Shopify のテーマ開発を GitHub Actions で効率化する


こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

先日、横田の記事「Shopify のテーマ開発をチームで行う時の課題を共有する」にて、Eコマース用のプラットフォームである Shopify のテーマ開発での課題を共有しました。

その課題を解決する試行錯誤の一つとして、Shopify のテーマ開発に、GitHub上のさまざまな操作をトリガーとしてあらかじめ定義しておいた処理を実行できる GitHub Actions による自動化を取り入れて開発効率の改善を図ったので、今回はその知見についてまとめたいと思います。

課題に感じていたことについて

上の記事「Shopify のテーマ開発をチームで行う時の課題を共有する」にもある通り、Shopify テーマ開発を進める上で仕様上での課題が存在していました。

運用フェーズでは特に、同時並行で複数人の作業が重なることがあるため、本番公開用テーマの差分取り込みを明示的な手順として何度かはさまないと、不具合やデグレが起きたり、設定が消えてしまうことがある。しかし、自分の作業を本番環境にデプロイする直前に本番公開用テーマを取り込んでしまうと、コンフリクトや、逆に自分の作業の消失が起こってしまう。

https://wp.gaji.jp/2021/05/13/7279/

特にこの点がチームで並行して開発を進める上で大きい課題として積み上がっていました。

これは、

  • Shopify Theme Kit での開発は、プレビュー確認をするために常時テーマに作業をデプロイする必要がある
  • 1つのテーマに1つのプレビュー環境しか存在できないため、1テーマ上で複数の作業が行われるとどちらかをデプロイした際にもう片方の作業が消失する

という Shopify の仕様が原因でした。

これは作業ごとにテーマを都度作成することで解決可能なのですが、毎回作業の度に手動で管理画面からテーマ作成を行おうとするのは作業コストが高く、忘れて作業する・間違ったテーマを操作してしまうなどのヒューマンエラーも起こり得ます。

そこで、Pull Request 作成時に自動でテーマを作成してくれる GitHub Actions を作成し、課題の解決と作業コストの効率化を図りました。

追加した GitHub Actions

  1. Pull Request 作成時に自動でテーマを作成
  2. テーマを作成後、Shopify Theme Kit の config.yml を書き換える
  3. Actions が走りきった後に Pull Request にプレビューURLをコメントする

この3つを達成するために GitHub Actions を実装した結果、以下のようになりました。

name: create-feature-theme
on:
  pull_request:
    types: [opened] # PR作成時に走る
jobs:
  create-feature-theme:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2 # 作業ブランチに checkout
        with:
          fetch-depth: 0
          ref: ${{ github.event.pull_request.head.ref }}
      - uses: actions/setup-node@v1 # 仮想環境で node をセットアップ
        with:
          node-version: '14'
      - name: install-theme-kit # 仮想環境で Shopify Theme Kit をセットアップ
        run: |
          curl -s https://shopify.dev/themekit.py | sudo python
          yarn
      - name: run-git-config # git push 用に git config をセットアップ
        run: |
            git config user.name github-actions
            git config user.email github-actions@github.com
      - name: remove-old-feature-theme # もし古い feature テーマの設定があればそれを削除
        run: |
            FEATURE_LINE_NUMBER=`grep -e "feature" -n config.yml | sed -e 's/:.*//g'`
            if [ "$FEATURE_LINE_NUMBER" != "" ]
            then
              sed "$FEATURE_LINE_NUMBER,$(($FEATURE_LINE_NUMBER + 3))d" config.yml > tmp
              cat tmp > config.yml
              rm tmp
              git add config.yml
            fi
      - name: create-feature-theme # feature テーマを作成し、config.yml に設定を追加、作業を push しプレビューURLをコメント
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          URL: ${{ github.event.pull_request.comments_url }}
          SHOPIFY_API_KEY: [Shopify APIキー]
          SHOPIFY_STORE_NAME: [Shopify ストア名]
          SHOPIFY_STORE_DOMAIN: [Shopify ストアドメイン]
        run: |
          theme new -p=$SHOPIFY_API_KEY -s=$SHOPIFY_STORE_DOMAIN -n="$SHOPIFY_STORE_NAME - ${{ github.head_ref }}"
          THEMEID=`cat config.yml | perl -pe 's/\n/ /' config.yml | sed -E 's/.*theme_id: "(.+)".*production.*/\1/g'`
          git restore .
          git clean -f
          echo -e "feature:\n  password: ${SHOPIFY_API_KEY}\n  theme_id: '${THEMEID}'\n  store: ${SHOPIFY_STORE_DOMAIN}" >> config.yml
          git add config.yml
          git commit -m "Create feature theme"
          git push
          curl -X POST \
              -H "Authorization: token ${GITHUB_TOKEN}" \
              -d "{\"body\": \"Preview URL: https://$SHOPIFY_STORE_DOMAIN?preview_theme_id=$THEMEID\"}" \
              ${URL}

実際に GitHub 上で走らせてみると、無事テーマが作成され、PRにコメントが付けられていることを確認できました。

Shopify 管理画面のテーマライブラリーに自動作成されたテーマが追加されている
全ての jobs が走った後、PRにプレビューURLがコメントされている

作業フローの見直し

今回、GitHub Actions を導入したことから、開発フローの方も改めて以下のように見直しました。

  1. Github の main ブランチの最新からブランチを切る
  2. 空コミットを行い、 Pull Request を作成する
  3. テーマ作成後、作業を行う
  4. プレビューURLで確認する
  5. レビューを受ける
  6. Approved されたら main ブランチへマージする
  7. 本番公開用テーマにデプロイする

今後の開発では、以上のフローで開発を行っていく想定です。

まとめ

今回は Shopify でのテーマ開発をチームで行う上での課題の解決の一端として、GitHub Actions での自動化を行い、その知見をまとめました。

開発を行う上でまだまだ改善できる点があると感じていますので、今後も改善を行い、知見を共有できたらと思っています。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか?

「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」

役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。

リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

投稿者 Ishigaki Shotaro

未経験から Gaji-Labo に入社。現在は React/TypeScript/Next.js の案件で MUI を使ったコンポーネント組み込みを担当。プロジェクトチームのリードとして共に組み込み作業をしているメンバーの進行管理も行っています。休日はだいたい家で音楽を聴いており、たまにライブに出かけています。