😎

Shopify ThemeのGithub連携時のベストプラクティスはsubtreeなのか？

2022/09/01に公開

GitHub

Shopify

theme

tech

Shopify GitHub integrationが出来るようになって管理画面からの変更がGithubのブランチにも反映されるようになり、Githubのブランチの変更もShopifyへ反映されるようになりました。

今まではtheme pullで手動で取り込んでコミットしていました。
（忘れて上書きしちゃうことも...）

Shopify GitHub integrationの条件として、

デフォルトの Shopify テーマフォルダー構造に一致するブランチのみを接続できます。

とあります。

つまりCSS、JSなどをビルドし生成していた場合のソースファイルは含めないほうが良さそうです。
となるとソースファイルのバージョン管理はどうしたらいいんだ？？？？？

そこでどういった方法が良いのか調べてみました。

運用の想定

現状下記のような運用を想定しています。

一人もしくは数人で開発。
JSやCSS,themeに含む画像をビルドツールを通したい。
ビルドは連携したブランチにマージされる前にローカルもしくはCIツールなどでビルドされる。
その他のliquidファイル等はShopify管理画面からテキスト修正など編集する可能性がある。

公式の見解

ベストプラクティスとして4つ紹介されています。

Use separate repositories for source code and compiled code
翻訳：ソースコードとコンパイル済みコードに別々のリポジトリを使用する
Separate source code and compiled code using branches (Recommended)
翻訳：分岐を使用してソースコードとコンパイル済みコードを分離する(推奨)
Mix source code and compiled code
翻訳：ソースコードとコンパイル済みコードを混在させる
manage only your source code in version control.
翻訳：バージョン管理でソースコードのみを管理する

それぞれ簡単に所感。

ソースコードとコンパイル済みコードに別々のリポジトリを使用する

リポジトリ２ついるの？？

分岐を使用してソースコードとコンパイル済みコードを分離する(推奨)

git subtreeを使えばコンパイル済みコードをブランチに分けられるとのこと。
subtreeって？。
推奨らしい。

ソースコードとコンパイル済みコードを混在させる

assetsフォルダ内にソースファイルも入れてしまう。
ソースファイルが公開されちゃわないか心配。
また管理画面からもソースファイルを編集できちゃうようになるので心配。

バージョン管理でソースコードのみを管理する

管理画面からの変更は無視して、手動でDeployしろとのこと。

推奨の 「分岐を使用してソースコードとコンパイル済みコードを分離する(推奨)」 をやってみたところ結構複雑そうです。

※こちらの方法を試した記事はこちら

別の選択肢

どれもなんだかピンとこないな〜と思っていたら、ふと次の文章が目に入りました。

この構造に一致しないリポジトリ内のフォルダーは無視されます。

無視されるのであれば、ルートにsrcディレクトリを作れば解決しない？と思いましたが、無視とはどういった挙動でしょうか？

構成外のファイルはShopify管理画面上には取り込まれないといった挙動だけだったら、バージョン管理には問題無いように思えます。

困るのは

そもそもShopify GitHub integrationできない。
Shopify管理画面から編集してGitHubにPushする際に構成外のファイルが消えてしまう。

あたりかと思います。

やってみました。

まずは新規テーマ作成。

shopify theme init

え、構成外のファイルがデフォルトで生成されるw

そもそもShopify GitHub integrationできるか？

前述の通り構成外のファイルが含まれているテーマが出来たので早速連携してみます。

GitHubにリポジトリ作ってShopify管理画面から連携。

連携できました！

テスト用にtheme.liquidにコメントを入れて更新してGitHubにpushしても無事反映されています。

その後、ルートにsrcフォルダやpackage.jsonをおいて確認しましたが問題無さそうでした。

Shopify管理画面から編集してGitHubにPushする際に構成外のファイルが消えてしまわない？

管理画面からtheme.liquidにコメントを入れて更新してみます。

コメントを入れて更新。

すると、、、

無事更新され、構成外のファイルはそのままです！

結果

構成外のファイルを置いても問題無さそう。

つまりベストプラクティスは？

subtreeを使った運用でも良いが、運用体制によっては、ルートにsrcフォルダやpackage.jsonを作ったりすればOKそう！

ちなみに

こちらでもsubtree使わなくていいんじゃない？って議論されていました。

コミット履歴がきれいに見えるかどうか？？かな？？？

ちなみに2

Just-in-time file transformationsAnchor（JITファイル変換？）を使ってビルドをShopifyに任せるのもアリな気がします。

この場合管理画面からソースファイルを編集しても大丈夫になるはずです。