コンテンツにスキップ
【厳選】おすすめ Shopifyアプリ
【厳選】おすすめ Shopifyアプリ
Shopifyのテーマ拡張機能をCI/CDサービスからデプロイする | Tsun Inc.

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.へお問い合わせください。

前の記事 【Shopify Tips】コレクションの並び替え項目(ソート項目)を非表示にする方法 | 対象テーマ:Dawn
次の記事 Shopifyのブログ記事内にタグ一覧を追加する

Shopify Apps

TECH BLOGS

BLOGS

編集プロセス

EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。

詳しく見る →

掲載情報に関して

掲載している各種情報は、株式会社Tsunが調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。

アプリの比較

{"one"=>"比較する2つまたは3つのアイテムを選択します", "other"=>"選択された3つのアイテムの{{ count }}"}

比較する最初のアイテムを選択します

比較する2番目の項目を選択します

比較する3番目の項目を選択

比較