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
- Pull Request 作成時に自動でテーマを作成
- テーマを作成後、Shopify Theme Kit の config.yml を書き換える
- 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にコメントが付けられていることを確認できました。
作業フローの見直し
今回、GitHub Actions を導入したことから、開発フローの方も改めて以下のように見直しました。
- Github の main ブランチの最新からブランチを切る
- 空コミットを行い、 Pull Request を作成する
- テーマ作成後、作業を行う
- プレビューURLで確認する
- レビューを受ける
- Approved されたら main ブランチへマージする
- 本番公開用テーマにデプロイする
今後の開発では、以上のフローで開発を行っていく想定です。
まとめ
今回は Shopify でのテーマ開発をチームで行う上での課題の解決の一端として、GitHub Actions での自動化を行い、その知見をまとめました。
開発を行う上でまだまだ改善できる点があると感じていますので、今後も改善を行い、知見を共有できたらと思っています。
開発のお悩み、フロントエンドから解決しませんか?
あなたのチームのお悩みはなんですか?
「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」
役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。
オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。
リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください!
お悩み相談はこちらから!