Shopifyテーマってどうやってチーム開発するの？

Kazuki Matsumoto

2021年4月28日 22:38

日本に上陸して以来、多くのスタートアップ企業やD2Cブランドの立ち上げで利用されているshopify.

NO CODEで多くのことを実現できるその手軽さが魅力的なツールですが、フロントエンドのテーマをカスタマイズしたい場合は、やはりある程度の開発が必要になります。

その場合はShopifyの管理画面からフロントエンドのコード編集することになるんですが、、、

「いやいや、管理画面からカジュアルにコードいじって開発してたら、危険すぎるやろ！！」

「複数人開発とかやるならgitでコード管理とかしないときついやろ！」

「検証環境とかどうやって用意するの？」

みたいな疑問が湧いてくると思うので、僕が見つけた最適解をまとめておきました。

基本的にはこのブログに書いて方法に従っています。

手順1. まずはテーマを複製

Shopifyでは管理画面から複数のテーマを複製することができます。今回はShopifyのデフォルトテーマであるDebutを複製して以下の3つのテーマを作成しました。

1. Debut Production (本番環境）
2. Debut Staging (検証環境）
3. Debut Development (開発環境）

この3つのテーマは厳密には”環境”ではなく、すべて本番環境の中でテーマだけを切り替えてプレビューできるものであるということに注意が必要です。

もし、本番データを変更する可能性がある開発をする場合は、Shopify Partnerアカウントを取得して、個人で開発ストアを作成して開発した方が安全でしょう。

開発のケースによる環境の使い分けは以下の記事を参考にしてください

手順2. GitLabの設定

いや、もちろんGithubでもいいですよ！！

ただ、GitlabについてくるCIが無料プランでも十分運用に使えるので、Gitlabにしました！

日本ではあまり知名度のないGitlabですが、Githubがマイクロソフトに買収されて以来、勢いを増しているツールです

ざっくりいうと、Githubはレポジトリ管理がメインで、それにプロジェクト管理ツールやCIツールなどを付けれるのに対して、Gitlabはオールインワンの開発プロジェクトマネジメントツールという感じですね。

まあ、とりあえずGithubでもGitlabでも良いので、リポジトリを作成してください。

手順3. Shopify Theme Kitの設定

Shopifyのテーマ開発にはShopify Theme Kitというツールが用意されており、これを使うとローカル環境で開発を行い、その内容をさきほど作成したそれぞれのテーマに反映したり、プレビューしたりすることができます。

いやこれマジで便利やん！

Theme Kitの使い方や、変更内容の反映の仕方はこちらのブログがとても参考になります。

詳しくはブログを見て欲しいのですが、ここでも簡単に手順を説明しておきます。

まずはTheme Kitをインストール (以下はMacの例)

brew tap shopify/shopify
brew install themekit

そして Shopify管理画面->アプリ管理->プライベートアプリを管理するからプライベートアプリを作成します。

商品リストの読み込み権限とテーマの読み込み/書き込み権限をあたえてAPIパスワードを取得します。

手順4. テーマ一式をローカル環境にダウンロード

Theme Kitと先ほど取得したAPIパスワードを使えば、テーマのコード一式をダウンロードできます。

まずはShopify上で管理されているテーマIDを取得します。

theme get --list -p=[APIパスワード] -s=[管理画面のドメイン]

でそれぞれのテーマのテーマIDが取得できます。

今回はDebut ProductionのIDを使って、コード一式をダウンロードしましょう。

手順2で作成したレポジトリのディレクトリに移動して、以下のコマンドを叩きます。

theme get -p=[APIパスワード] -s=[管理画面のドメイン] -t=[テーマID]

これでコード一式がダウンロードされます。

手順5. 環境変数の設定

ダウンロードしたコードの中にあるconfig.ymlには、各テーマのIDやAPIキーなどの情報が含まれます。これはGitに入れたくないですよね？

今回はCIでデプロイの自動化までやりたいので、環境変数をローカル環境とGitlabレポジトリに設定してみようと思います。

まずはconfig.ymlをこんな感じに編集します。

development:
 password: ${SHOPIFY_API_PASSWORD}
 theme_id: ${DEVELOPMENT_THEME_ID}
 store: ${SHOPIFY_STORE}

そしてそれぞれの環境変数を設定していきます。

ローカルでの環境変数設定

各OSでの環境変数のパスはこちらのドキュメントで解説してあります。

各自の環境に合わせて、環境変数を設定していくのですが、今回はMacの例を挙げます。

variablesファイルを以下に作成します。

/Library/Application Support/Shopify/Themekit/variables

中身はこんな感じ

SHOPIFY_API_PASSWORD=your_api_password
STAGING_THEME_ID=your_staging_theme_id
PRODUCTION_THEME_ID=your_production_theme_id
DEVELOPMENT_THEME_ID=your_development_theme_id
SHOPIFY_STORE=yourdomain.myshopify.com

theme_idは先ほど詳細したテーマIDの取得コマンドを使って確認してください

theme get --list -p=[APIキー] -s=[管理画面のドメイン]

Gitlabでの環境変数設定

今回の設定ではmasterブランチにコードがプッシュされるたびに、Debut Stagingに変更が反映され、リリースタグが切られた時にDebut Productionに変更が反映されるようにCIの設定を行う予定です。

そのためにはGitlabでも各テーマの環境変数を設定する必要があります。

Gitlabレポジトリ -> Settings -> CI/CD -> Variables -> Add Variablesで環境変数を追加していきます。

Protect variableのチェックは外しておきました。さらにセキュリティを強固にしたい場合はチェックしておいても良いでしょう。

こんな感じですべての環境変数を登録していきます。

手順6. GitLab CIでデプロイを自動化

さきほどもちらっと説明しましたが今回は3つのテーマに対して以下のようにデプロイを使い分けていきます。

・リリースタグが切られた時にDebut Productionにテーマを自動反映
・masterブランチへの変更のたびに、Debut Stagingに自動反映
・Debut Developmentは開発のためだけに利用

これによって、以下のデプロイフローが確立します。

1. ローカルでの開発をDebut Developmentを使って行う
2. 開発が完了したら、masterブランチにマージリクエスト作成
3. コードレビュー後にコードをマージして、Debut Stagingで動作確認
4. リリースタグを作成し、Debut Productionにデプロイ

複数人で開発を行う場合は、各人のDebut Developmentを作成すればコンフリクトを防げます。

設定は、超簡単です！

設定はgitlabのレポジトリのルートディレクトリに以下のファイルを追加するだけです。

.gitlab-ci.yml

image: python:2
stages:
 - staging
 - production
staging:
 image: python:2
 stage: staging
 script:
   - curl -s https://shopify.github.io/themekit/scripts/install.py | python
   - theme deploy -e=staging
 only:
   - master
production:
 image: python:2
 stage: production
 script:
   - curl -s https://shopify.github.io/themekit/scripts/install.py | python
   - theme deploy -e=production --allow-live
 only:
   - tags

このファイルをそのまんまレポジトリにプッシュしてみてください。

CIが自動的に起動して、Debut Stagingに変更がデプロイされるはずです。

Gitlab -> CI/CD -> Pipelinesで進行状況が確認できます。

こんな感じですね。

Debut Stagingで変更が確認できたら、Gitlab -> Repository -> Tags -> New Tagでリリースタグを作成します。

そうすると、またCIが走って、Debut Productionに変更が反映されるはずです！

どうでしょうか？

完全に最初に紹介した英語のブログそのまんまですが、かなり実用的な仕組みになっていると思います。

ぜひこれでshopifyの開発をストレスフリーにしていきましょう！

この記事が気に入ったらサポートをしてみませんか？