Shopify themeのGithub連携した際のsubtreeでの運用
Shopify GitHub integrationした際の管理方法として公式がベストプラクティスとして推奨されている、ブランチを使用してソース コードとコンパイル済みコードを分離する(推奨)を試してみました。
具体的な方法が書かれていないので手探りでやってみたことを記録します。
※そもそもこれじゃない方がラク説もあります。
運用の想定
現状下記のような運用を想定しています。
- 一人もしくは数人で開発。
- JSやCSS,themeに含む画像をビルドツールを通したい。
- ビルドは連携したブランチにマージされる前にローカルもしくはCIツールなどでビルドされる。
- その他のliquidファイル等はShopify管理画面からテキスト修正など編集する可能性がある。
方針
公式の説明では下記のように記載されています。
テーマのコンパイル済みコードを、ソース コードとは別のブランチで公開できます。このブランチのコンテンツは、Shopify テーマ プラットフォームおよびテーマ チェックと互換性があります。
これを実現する 1 つの方法は、 を使用することgit subtreeです。このsubtreeコマンドを使用すると、コンパイルされたコードをブランチに抽出して、テーマに安全に接続できます。
subtreeを使い、コンパイル済みコードだけのブランチをShopifyと接続すれば良いみたいですね。
subtreeとは
そもそもsubtreeとはリポジトリをサブディレクトリとして取り込んだり、サブディレクトリをブランチとして切り出せるようです。
初期設定
なるほど。ということは、 Shopify テーマフォルダー構造に一致するサブディレクトリを作り、それを切り出せばいいのですね。
deployディレクトリを作りました。
そしてsubtree split!
git subtree split --prefix=deploy --annotate='[subtree] ' --branch deploy --rejoin
こいつをGitHubにあげて、Shopify管理画面からdeployブランチと連携！
できた！
これでShopify管理画面からの変更はdeployブランチに反映されるようになりました。
更新
subtreeで切り出した後、mainブランチやdeployブランチの変更を追っていくのに、pullしていけばいいのかなーとか思ってたんですが、subtreeのコマンドを打たないといけなかったです。
deployブランチの変更をmainブランチに取り込むのはこれ
git subtree merge --prefix=deploy --squash deploy
mainブランチの変更をdeployブランチに反映するには再度subtreeで切り出す
git subtree split --prefix=deploy --rejoin --onto deploy -b deploy-XXXX
でリモートリポジトリの更新を考えると下記のようなことになります。
Shopify管理画面からの変更を取り込む
git checkout deploy
// 管理画面での変更をpull
git pull
git checkout main
// deployのコミットをマージ
git subtree merge --prefix=deploy --squash deploy
// リモートにpush
git push
localからの変更を取り込む
// deployディレクトリを別ブランチ名で切り出す
git subtree split --prefix=deploy --rejoin --onto deploy -b deploy-XXXXX
git checkout deploy
// 切り出した内容をdeployブランチに取り込む
git merge deploy-XXXXXX
// リモートにpush
git push
git checkout main
// マージコミットをmainに取り込んでおく
git subtree merge --prefix=deploy --squash deploy
git push
覚えられる気がしない & 複数人で運用したときに毎回打つのハードルが高い
ので
次回、GithubActionにしてみます！
更新しました！
引用・参考
Discussion