ShopifyをGitで管理運用するやり方

１．はじめに

これはなにか？
Shopify開発における運用のルールとベースになるものを書きました。

■課題

• Shopifyは管理画面で「いつ」「だれが」更新したか不明なので、運用ルールとおりに開発しても先祖返りしてしまう。
  • つまり開発をGit管理していても、Shopifyの管理画面側を変更されるとGit管理から外れていってしまう。

■解決

そのため管理画面のテーマを３つに分岐して開発しています。
※テーマは例です

・本番（プロダクション）
Debut-production

・ステージング（確認用）
Debut-staging

・デベロップ（開発用）
Debut-development

■体制

• 望ましい運用は本番（プロダクション）を管理画面から直接、修正しない事。
  • 管理画面から編集する場合は編集する人を限定すること
• デベロップ（開発用）テーマで修正を行い、ステージング（確認用）テーマで確認をします。

■リリースの順番

• デベロップ→ステージング
• ステージング→本番

■具体的なやり方

タイトルにあるとおりですが、やり方は諸説あります。今回は、われわれの環境では「こういう風」にやるよ！というだけです。

２．Shopifyの開発

■local開発はできません。

ソースコード変更の後はサーバーにファイル群をアップロード（自動更新あり）していきながら開発を行います。

■用意するもの

使用ツールShopify Theme Kit

• PCにインストールします

■Gitブランチ

• develop
• master
• original
• feature/0001-xxx
• feature/0002-xxx
• feature/0003-xxx
• ・
• ・
• ・

※masterブランチとdevelopブランチは開発前の段階では、同じ内容と考えてください。
※originalと名前がつくものは触らない事にします、有事の際にデフォルトへ戻すためです。

■Shopifyテーマ

• Debut-production
• Debut-staging
• Debut-development
• Debut-original

※originalと名前がつくものは触らない事にします、有事の際にデフォルトへ戻すためです。

■config.yml

各テーマで同じconfigを使用します。

• Debut-production
• Debut-staging
• Debut-development

config.yml

# 本番環境
production:
  password: パスワード
  theme_id: 1111111111　←例
  store: abcd.myshopify.com　←例

# ステージング環境
staging:
  password: パスワード
  theme_id: 1234567890
  store: abcd.myshopify.com

# 開発環境
development:
  password: パスワード
  theme_id: 9999999999
  store: abcd.myshopify.com

■開発手順

（１）ターミナルでデベロップブランチ から フューチャーブランチを作ります。

$ git checkout develop
$ git branch
$ git checkout -b feature/0003-xxx

• feature/0003-xxxのxxx部分は開発する件名
• 4桁の数字は管理するための通し番号

（２）別のターミナルを開いてファイル自動更新のコマンドtheme watchを打つと、こうなります。

$ theme watch
15:51:59 [development] ショップ名称: Watching for file changes to theme 9999999999

※監視した状態で、ソースコードを改変すると監視してリアルタイムにサーバーにファイルをアップロードしはじめます。

※自動的にターゲットのテーマはdevelopmentに向きます。
※theme watchを使用しない場合は手動でデプロイ

$ theme deploy

（３）【重要】開発（ソースコードを更新、変更）する前に、サーバーからダウンロード

※ターゲットのテーマはdevelopmentからのダウンロード

$ theme download
[development] 265|265 [=================================================================]  100 %

※続いてステージングと本番の管理画面で更新されたものをダウンロード

$ theme download --env=staging
$ theme download --env=production

gitでコミット

$ git status
$ git add .
$ git commit -m "管理画面更新分ダウンロード"

（４）開発（ソースコードを変更）

（５）エンジニアによるレビュー（画面確認）

オンラインストア
　└ テーマ
　　└ Debut-development
　　　 ├ プレビュー
　　　 └ カスタマイズ

（６）ステージングへデプロイ

$ theme deploy --env=staging

またはファイル毎のデプロイの場合

$ theme deploy ファイル名 --env=staging

（７）依頼者にレビュー依頼（Slack、またはチャットワーク、またはタスク管理ツール）

（８）依頼者によるレビュー（画面確認）

オンラインストア
　└ テーマ
　　└ Debut-staging
　　　 └ プレビュー

（９）修正があればレビューOKとなるまで（３）番または（４）番からもう一度

※プルリクエストの場合
Git画面でプルリクエストのレビュー依頼を行う場合はレビュアーがマージします。

（１０）レビューOKとなれば、feature/0003-xxxからdevelopにマージ

依頼者がGitを使えない場合は、開発者が自分でマージします。

gitでコミットとプッシュ

$ git status
$ git add .
$ git commit -m "変更した内容を記入"
$ git push origin feature/0003-xxx ←例

gitマージ

$ git checkout develop
$ git merge feature/0003-xxx

３．リリース作業

■ソースコードをmasterにマージ

developからmasterへプルリクエストします。

Git画面でプルリクエストでdevelopからmasterにマージします。

※masterブランチとdevelopブランチは開発前と同じ内容となりました。

■本番リリース

$ theme deploy --env=production

４．おわりに

■先祖返り

Shopifyは管理画面で「いつ」「だれが」更新したか不明です。
運用ルールとおりに開発しても先祖返りしてしまう場合を想定して。

• （１）こまめにサーバーからdownload
• （２）こまめにコミット