Shopifyのテーマ拡張機能をCI/CDサービスからデプロイする

Tsun Inc. CTOの小笠原です。
今回はShopifyアプリのテーマ拡張機能をCI上からデプロイする手順をご紹介します。
現在テーマ拡張機能を開発されている方、今後開発される方の参考になれば幸いです。

なぜやるのか

Shopifyのテーマ拡張機能を開発するには、Shopifyアプリとは別にShopify上にデプロイします。
(テーマ拡張機能のLiquidやJavaScriptのファイル等はShopifyのサーバーから配信されます)

また、デプロイ後にShopify Partnerの管理画面からテーマ拡張機能を公開する必要があります。

デプロイ作業を自動化しておくと、テーマ拡張機能の更新漏れや公開作業のミスをある程度防ぐことができます。
(ただしShopify Partnerの管理画面からテーマ拡張機能を公開する作業までは自動化できません)

前提条件

対象読者

• Shopifyアプリのテーマ拡張機能の開発をしている

環境

• Shopify CLI: Version 3.39.0
• Package manager: npm

準備するもの

• Shopifyアプリのテーマ拡張機能
• CI/CDサービス (GitHub Actions、CircleCIなど)

対応手順

Shopify Developers Platformに公式ガイドがあるので、基本的にはこちらの手順に沿って進めれば大丈夫です。

テーマ拡張機能のIDを取得する

※ すでにデプロイをしたことがあればこの手順は飛ばしても問題ありません

テーマ拡張機能の実装が済んでいる状態で、下記のコマンドを実行します。

npm run deploy

最新のCLIだとテーマ拡張機能をデプロイするかどうかの確認等があり、デプロイが完了すると.envにSHOPIFY_THEME_EXTENSION_IDが追記されます。
これはテーマ拡張機能ごとに作成されるIDで、デプロイ時にSHOPIFY_API_KEYとこのIDを元にテーマ拡張機能を特定しデプロイが行われます。

CLIトークンを取得する

1. Shopify Partnerの管理画面から設定 > CLIトークン のトークンを管理するをクリックします
2. CLIトークンを生成するをクリックし、生成されたトークンをコピーします

CI/CDサービスでデプロイする

CI/CDサービスでデプロイを実行します。
その際に上記で取得したSHOPIFY_THEME_EXTENSION_ID、CLIトークンとSHOPIFY_API_KEYが必要です。
それぞれ、SHOPIFY_API_KEY、SHOPIFY_THEME_EXTENSION_ID、SHOPIFY_CLI_PARTNERS_TOKENとして環境変数から取得できるように設定します。

環境変数が設定された状態でデプロイコマンドを実行するとCI上からでもテーマ拡張機能をデプロイすることが可能になります。

注意点として、テーマ拡張機能をデプロイする際にShopify CLIでテーマ拡張機能でチェックが行われますが、そのチェックはRubyで動くため、RubyとBundlerが動く環境でデプロイを実行する必要があります。

またCLI v3.40.0以降ではデプロイコマンドに -f のフラグを付与する必要があります。

一例としてRubyをベースとしたイメージファイルにNodeをインストールしたDockerfileを記載しています。
このような感じでRubyとNodeが利用できる環境をCI/CDサービスで用意してあげればOKです。

FROM ruby:3.1-bullseye as extension

ARG SHOPIFY_API_KEY
ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY
ARG SHOPIFY_CLI_PARTNERS_TOKEN
ENV SHOPIFY_CLI_PARTNERS_TOKEN=$SHOPIFY_CLI_PARTNERS_TOKEN
ARG SHOPIFY_THEME_EXTENSION_ID
ENV SHOPIFY_THEME_EXTENSION_ID=$SHOPIFY_THEME_EXTENSION_ID

RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
  apt-get install -y nodejs
WORKDIR /app
COPY . .
RUN cd extensions/theme-extension && npm ci && npm run build
RUN npm ci && npm run deploy -- --force

まとめ

今回はShopifyのテーマ拡張機能をCI/CDサービスからデプロイする方法をご紹介しました。
デプロイの自動化などは一度設定しておけば業務効率化やヒューマンエラー防止に継続的に効いてくるのでぜひ設定しておきましょう。

Tsun Inc.では世界中のストアに利用されているShopifyアプリの開発を行っています。
もしShopifyアプリ開発の依頼や採用に興味のある方は、ぜひTsun Inc.へお問い合わせください。