Shopifyテーマ開発の先祖返りを防ぐテクニック。複数環境間のバージョン管理

こんにちは、エンジニアの川島です。

前回の記事にて、Shopifyのテスト環境構築についてご紹介しましたが、Shopify開発において特に悩ましいのが各環境の同期とバージョン管理ではないでしょうか。
管理画面上のコードエディタ・テーマエディタから誰でも編集できること、そしてTheme Kitのdeploy機能でShopifyサーバーへ容易にファイルを反映できることは、長所でもあるのですが、複数人で開発を行う場合には先祖返りのリスクにもなります。

そこで本記事では、複数人でのShopifyテーマ開発を安全に進めるために、私たちが行っているバージョン管理の工夫について、ご紹介したいと思います。

※本記事では下記を前提とします。

  • Shopifyストアの管理画面にアクセスできる
  • Shopifyテーマ開発において、本番環境に加えテスト環境を利用している
  • Shopify Theme Kitをインストールし、複数環境へのdeployに利用している

先祖返りを防ぐTheme Kitのtheme deploy手順

Theme Kitは、ローカルでコーディングしたファイルをShopifyサーバーへ反映するには、とても便利なツールです。(Theme Kitの初期設定についてはこちらの過去記事をご参照ください
ですが、Shopify側で——管理画面上のテーマエディタやコードエディタで——編集が行われていた場合、Theme Kitは変更を感知できません。 theme watch theme deploy で該当ファイルをアップロードすると、Shopify側の編集内容は容赦なく上書きされ、先祖返りを起こしてしまいます。
テーマエディタから編集できる内容は多岐に渡るため、既に運用されているストアの開発に加わる場合には特に、先祖返りを防ぐ運用ルールの策定が欠かせません。

Theme Kitのファイル上書きをめぐるGitHub上のやりとりにおいて、Shopify開発者より、 theme deploy の手順は下記のように言及されています。

  • use version control and commit all your work
  • run theme download before deploying to make sure you get all the recent changes and use your version control to see what exactly changed
  • run theme deploy when you are finally ready.

1. gitを利用し、実装内容はすべてコミットする
2. theme deploy前にtheme downloadを必ず行い、差分を解消しておく
3. 差分がないことを確認した上でtheme deployする
参照:https://github.com/Shopify/themekit/issues/647

(※過去のTheme Kitにはファイルバージョンチェック機能があったものの、不具合頻発のために削除されたそうです)

こちらの手順に従い、「theme deploy前に必ずtheme download工程を挟む」という運用ルールを開発者間で共有すれば、上書きのリスクはある程度まで低減できます。(ヒューマンエラーのリスクはどうしても残ってしまいますが……)
複数環境で開発を行っている場合は特に、本番反映前に本番環境の内容を theme download し、ローカルとの同期を取っておくことが大切ですね。

ただ、テーマフォルダ内のファイル数が増加すると、 theme download 一回ごとに掛かる時間も無視できないものになってゆきます。開発中の体感としては、300ファイル未満でも、毎回3分ほど掛かっています。
アプリを多用する場合や大規模ストアの場合は特に、テーマフォルダ内のファイル数が増加してゆくため、もう一工夫した方が良さそうです。

補足:theme deployの反映仕様について

こちらは2019年12月現在のTheme Kitの仕様となりますが、 theme deploy コマンドをオプションを用いずそのまま利用した場合、反映先環境の全てのファイルが、ローカル環境のファイル内容に置き換わります。
ローカル環境に存在しないファイルは削除されますし、どのファイルが上書きされたのかログも残りません。

前述したTheme Kitワークフロー( theme deploy 前に theme download を必ず行う)に従えば、上書きのリスクは減らせますが、人は必ずミスをするものです。工程を忘れてしまうこともあるでしょう。
もう一工夫として、反映したいファイル名を以下のようにコマンド内で記述すれば、意図しない範囲への上書きをある程度防ぐことができます。

theme deploy sections/header.liquid assets/custom.css --env=production

が、これでも打ち間違いや打ち忘れのリスクは残っています。人の手が入る箇所は極力減らしたいところです。
そこで、(まだ検証中ですが)現在、deployBotを利用したShopifyへの自動反映をテストストアで試してみています。上手くいきそうであれば、また別途記事にまとめたいと思います:)

shopifyバージョン管理において私たちが行っていること

Theme Kitのdeploy手順についてはご紹介したとおりですが、適切なバージョン管理のために、私たちは下記の工夫も行っています。

gitを利用する

こちらについては大前提ですね。私たちはテーマフォルダの内容をGitHub上で管理し、各メンバーの作業内容を必ずコミット・プッシュするようにしています。
Shopifyテーマ開発に適したブランチ運用についてはまだ探り探りなのですが、基本的には本番環境をmasterブランチと、開発環境をfeatureブランチと紐付けています。
featureブランチで開発し、本番反映前にmasterブランチで本番環境の内容を theme download 、差分が無いことを確認した上でfeatureブランチの内容を theme deploy ……という手順を踏むことが多いです。
deployBotと上手く組み合わせられれば、より楽になるのではないかと考えています。
一点、 theme watch コマンドの実行中にブランチを切り替えると予期しないファイルまで一気に反映されてしまうので、留意が必要です。

管理画面上からのコード編集は行わない

開発者が複数いる場合には、Theme Kitの開発環境を整え、管理画面のコードエディタ経由での開発はできるだけ行わないようにしています。
クライアントがコードエディタから編集を行う機会は少ないと思いますが、編集が行われた場合には、一報を入れていただくようにお願いしています。

管理が困難なファイル(setting_data.jsonなど)をTheme Kitとgit管理からignoreする

テーマ開発でもっともバージョン管理が困難なのは、setting_data.jsonファイルではないかと思います。
(Shopify開発を始めたばかりの頃、私はsetting_data.jsonの差分管理に失敗して本番上書きをやらかしました…笑)

setting_data.jsonにはテーマエディタ経由の変更がすべて記述される上に、本番ストアと開発ストア間での同期も取りづらいです(※前回の記事で言及したとおり、テーマエディタから登録されているデータはアプリを用いてもストア間での移行ができず、画像含めすべて手動で複製する必要があるため)。
そのため、私たちは現在、setting_data.jsonについてはgit管理からもTheme Kit管理からも除外しています。
クライアントが本番環境テーマエディタから編集を行う前提で、上書きリスクを鑑み、テスト環境との差分を許容する運用です。

Theme Kitからsetting_data.jsonを省く運用については、下記記事も参考になります。

When an admin changes a setting, it is written to config/settings_data.json on the server, however the theme watch is not a two-way street. The local copy of config/settings_data.json will not reflect settings made through the admin interface, and if you edit it locally, it will push up and overwrite what is on the server. Therefore, it is best to ignore this file altogether from your repository and let it live only on the server.

参照:https://thoughtbot.com/blog/shopify-theme-development

Theme Kitのignore設定は、config.ymlファイルを下記のように編集することで可能です。

環境の名前:
  password: パスワード
  theme_id: "テーマID"
  store: ストアURL
  ignore_files:
  - config/settings_data.json

setting_data.jsonの情報すなわちテーマエディタ上の設定情報なので、カスタマイズの都合上変更が必要な場合には、管理画面のテーマエディタ上から直接編集するようにしています(setting_data.jsonファイルは直接触らない)。

また、カスタムフィールドなどのアプリが生成するliquidファイルも、アプリ側の編集内容によって頻繁に上書きされてゆくため、テスト環境上での確認が不要な場合にはignore対象に含めても良いかもしれません。

おわりに

Shopifyは双方向(サーバーとローカル間)の同期が困難ということもあり、バージョン管理が適切に行われていないと、予想外の先祖返りトラブルに見舞われがちです。
本記事で紹介した工夫についても、もっとより良い方法がないか、私たちも模索しています。
「こうしたら良いのでは」「この手順が上手く行っている」など、何かありましたら、Twitterや感想フォームからお声をお寄せいただけるととても嬉しく思います:)

記事カテゴリー