Shopifyのローカル開発環境を準備する（Mac）

ローカル開発環境を準備することが何回かあったため手順をまとめます
2021年6月に発表されたShopifyCLIではなく、ThemeKitでの手順です。
online Store2.0を使用している場合はShopifyCLIを使用してください。
ThemeKit 1.3.0 darwin/amd64

Shopify接続するためのAPIキー・パスワードを生成する

アプリ管理
↓
プライベートアプリを管理する
↓
新しいプライベートアプリを作成する

必要事項を入力して権限を付与する
非アクティブなAdmin API権限を表示する
↓
テーマテンプレートとアセットを表示または管理する
「読み取りおよび書き込み」を選択
保存する
↓
アプリを作成する

これでAPIキー、パスワードが生成されます

ThemeKitをインストールする

$ brew tap shopify/shopify
$ brew install themekit
brew tapでshopifyが公開しているリポジトリをインストールできるようにする

テーマをダウンロードする

すでにShopifyアカウント内に存在するテーマをダウンロードする。
既存のテーマにアクセスするためにはテーマIDを取得する必要がある。

オンラインストア
↓
アクション
↓
コードを編集

上記操作でエディタが開かれる。そのページのURL末尾の数字がテーマID
https://your-shop-name.myshopify.com/admin/themes/00000000000
↑00000000000の部分

テーマをダウンロードするためのディレクトリに移動し、テーマをダウンロードする。以下コマンドでconfig.ymlが生成される。

$ theme get --password={api password} --store=your-shop-name.myshopify.com --themeid=00000000000
↑{api password}には最初のプライベートアプリ作成で入手した「パスワード」を入れる

以上で開発を開始することもできるが、以下で環境を整える

リモート上で開発環境を作る

オンラインストア
↓
現在のテーマ アクション
↓
複製
developなどの名前に変更する

.env

STORE_NAME = "your-shop-name.myshopify.com"
STORE_PASSWORD = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
THEME_ID = "11111111111"

PROD_THEME_ID = "0000000000"

config.yml

development:
  store: ${STORE_NAME}
  password: ${STORE_PASSWORD}
  theme_id: ${THEME_ID}
  ignore_files:
  - config/settings_data.json
  - .env

production:
  store: ${STORE_NAME}
  password: ${STORE_PASSWORD}
  theme_id: ${PROD_THEME_ID}
  ignore_files:
  - config/settings_data.json
  - .env

theme deploy時に設定の上書きを防止するために、ignore_filesにconfig/setting_data.jsonを追記しておくとよい

.gitignore

.envを除外しておく

package.json

デプロイとダウンロードのコマンドをスクリプト化しておく

{
  "scripts": {
    "deploy:develop" : "theme deploy --vars .env --env=development",
    "deploy:prod" : "theme deploy --vars .env --env=production",
    "theme_download" : "theme download --vars .env --env=production"
  }
}

すでに公開されている本番環境へのdeploy時は、--allow-live オプションをつけろというエラーが出るが、本番環境へ誤ってデプロイしてしまうのを防止するためスクリプトには含めずに都度記載することにする。