Shopify の Theme Kit で開発用と本番用のストアへ deploy 先を分ける

Shopifyのテーマを開発する際に本番環境に直接反映させる前に開発環境に反映させてテストしたいときがあります。こういった場合 config.yml で deploy 先を複数指定して管理することができます。

本番用と開発用のストアを準備

まず本番環境用のストアと開発用のストアを2つ用意します。
プライベートアプリを作成し、Theme Kit でテーマ開発できるようになったらそれぞれにテーマを作成していきます。
Theme Kitでテーマを新規で作成する方法は以下の記事を参考にしてください。

Shopify のテーマをローカルで開発する② Shopify Theme Kit の使い方

本番環境のストア: hogehogelive.myshopify.com
開発環境のストア: hogehogedemo.myshopify.com

テーマの新規作成

本番環境のストア用に hogehogelive ディレクトリを作って hogehogelive テーマを作ります。

mkdir hogehogelive
cd $_
theme new --password=shppa_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx --store=hogehogelive.myshopify.com --name=hogehogelive

開発環境のストア用に hogehogedemo ディレクトリを作って hogehogedemo テーマを作ります。

mkdir hogehogedemo
cd $_
theme new --password=shppa_yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy --store=hogehogedemo.myshopify.com --name=hogehogedemo

config.yml の編集

それぞれのディレクトリにテーマファイルと設定ファイルが生成されます。開発環境のストアように作った hogehogedemo ディレクトリの config.yml の内容を確認します。

cat hogehogedemo/config.yml

開発環境用に作ったテーマの情報が記述されているのでコピーします。

development:
 password: shppa_yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
 theme_id: 999999999999
 store: hogehogedemo.myshopify.com

次に本番環境用の設定ファイルを vi で開きます。

vi hogehogelive/config.yml

同様にテーマの情報が記述されています。

development:
 password: shppa_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 theme_id: 000000000000
 store: hogehoge.myshopify.com

「development」が環境の名前になっているので本番環境は「production」に変更し、下に先程コピーした開発環境のテーマの情報を追記します。「production」は任意の名前を指定できます。

production:
 password: shppa_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 theme_id: 000000000000
 store: hogehoge.myshopify.com</p>

<p>development:
 password: shppa_yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
 theme_id: 999999999999
 store: hogehogedemo.myshopify.com

編集したら保存します。開発環境用につくった hogehogedemo ディレクトリは削除します。

deployしてみる

hogehogelive ディレクトリで普通にdeployすると development で指定した開発用のストアに deploy されます。

theme deploy

本番環境用に deploy したい場合は環境名を指定することで deploy できます。

 theme deploy --env=production

なお、環境はさらに追加することもできます。その際は環境名を変えて config.yml に追加し、deploy の際に環境名を指定すれば deploy できます。

Theme Kit configuration reference