Shopifyのストア開発には欠かせない、テーマ開発!
今回はこれからShopifyのテーマ開発を行なっていく方や
既にチームでのテーマ開発を行なっているけど、テーマ管理に困っている方に向けて
テーマをどのように管理・運用しているのか、実際に行なっている方法を紹介します！
※もっといい方法があるよという方！ ぜひ、コメントください！
結論
Shopifyのテーマ管理・運用には以下の方法がオススメ！
- Theme Kit を使用した開発
- Git を使用したテーマ管理
- 本番・検証・個人開発テーマを用意
- 自動デプロイを行う
結局は、Shopifyのテーマ開発も基本的には一般的なアプリケーションの開発時と同様に管理・運用すればいいんだよ！ってことです。
開発中のテーマ管理について
まずは、開発中・開発を始める際のテーマの管理について紹介します！
ここでは、下記の3点について説明します。
- Theme Kit を使用した開発
- Git を使用したテーマ管理
- 本番・検証・個人開発用のそれぞれのテーマを用意
基本的なテーマの構造や仕組み、Liquidの書き方などはここでは紹介しませんので
他の記事を参考にしてください。
Theme Kit を使用した開発
Theme Kit とは、Shopifyのテーマを開発するためのツールです。
こちらのShopify ブログを参考すると導入や使い方がわかりやすいです！
Theme Kit を使用することで、開発の効率向上とテーマの管理が簡単になります。
テーマ開発には必須と言っても良いツールですので、ぜひ使ってみましょう！
・Theme Kit を使わなかった場合
Shopifyのテーマはローカル環境で開発して、ローカル環境で確認を行うことはできません。
ローカルにあるテーマのコードを修正したら、Shopify上にテーマを反映して反映されたテーマにて
実装の確認を行う必要があります。
以下の作業を手動で繰り返し行なっていく必要があります。
テーマのダウンロード→テーマの修正→テーマをアップロード→確認→テーマのダウンロード→・・・
非常に手間で面倒ですよね💦
・Theme Kit を使った場合
Theme Kit を使用することで、ローカルで開発中のテーマのコードを効率よく反映・確認を行うことができます。
ローカルで修正されたコードを自動でストアのテーマに反映することもできますし、コマンド一つで開発中のテーマのプレビューを確認することも可能です！
また、テーマ毎にIDが振られていてIDによって開発するテーマを簡単に切り替えることができます。
さらにさらに！上記の機能とGitを組み合わせることで開発中のテーマの管理がしやすくなります。
※開発の状況によっては、一部テーマに反映のしたくないファイルがあったりします。
適切なオプションや設定ファイルを作成することで対応可能なので Theme Kitの仕様を確認してみてください。
Git を使用したテーマ管理
テーマの開発方法がわかった後に困ることが、テーマのソースコードをどう管理するかだと思います！
Shopifyではストア内に複数のテーマを保存できることから、1つのテーマを複製しバージョンをつけて管理している方を見かけることがあります。
しかしながら、複数の開発者が同時にテーマを開発する場合やコードの修正分の把握が必要な場合が実際の実装にはあるため、一般的なアプリケーションの開発と同様にGitを使用したソースコード管理をオススメします。
本番・検証・個人開発テーマを用意する
Gitでソースコードを管理するとして、開発には実際にShopifyのストア上でテーマを持っている必要があります。
1つのテーマで複数人が並行して実装してしまうと、適切な環境で動作確認が行えなかったり他人の修正中のコードを変更してしまったり事故が起こりそうですよね。
そこで、本番・検証・個人開発用のテーマをそれぞれ用意することをオススメします。
実際のテーマの管理
実査のテーマ管理としては、
検証用のメインテーマと各開発者の個人のテーマを用意します。
この場合の実装の流れとしては、以下のようになります。
- 検証用のテーマのブランチから各個人の開発用ブランチを切ります。
- 各個人のブランチのコードを各個人のテーマに反映して実装を行います。
- 実装が済んだら、検証用のブランチにプルリクエストを出します。
- 各個人のテーマのプレビューとプルリクエストを確認し、検証用ブランチにマージします。
- 検証用ブランチの内容を検証用テーマに反映します。
開発中は上記の流れを繰り返して開発を進めていきます。
本番環境でテーマを使用する際には、本番用のテーマを作成して検証用のテーマの動作確認後に本番用のテーマに反映するように運用すると、ミスによる本番テーマへの反映が起きづらくなり良いと思います。
※ストアのアプリ使用状況によっては、アプリによってコードが作成される場合があります。
その場合は、アプリごと適切な対応が必要となります。
アプリの変更が適用されたブランチを作成し差分を確認するなどするといいです。
また、セクションへの値などの管理もGitで行うか行わないかが問題になると思いますがストアで方針を決めてGit管理する対象を決めましょう。
テーマの自動デプロイについて
ここまで、Shopify テーマ開発においてのオススメのテーマ管理方法を紹介しました。
基本的には一般のアプリケーションの実装と同じようにソースコードを管理・実装する方法を紹介しました。
ソースコードの実装を行なったら、次にそれぞれの環境へのデプロイが必要になりますよね。
ここからは、テーマの自動デプロイについて紹介します。
自動デプロイの必要性
そもそも、皆さん自動デプロイをShopifyのテーマ開発に限らず取り入れていますでしょうか？
ここでは、なぜ自動デプロイを行う必要があるのかから説明します。
・手動デプロイを行う場合
基本的に、デプロイ作業というのは人間のやる必要のない作業であり手動デプロイを行うと行っただけ無駄に開発の時間（リソース）を奪うこととなります。
また、本番への反映時など手動でのデプロイを行う場合には人為的なミスが発生する可能性が高くなります。そこで、最近ではアプリケーションの開発で自動デプロイを採用しているケースが非常に多くなってきています。
特にShopifyの場合、ThemeKitを使用しながら手動デプロイを行うには以下のような面倒な作業を毎回する必要があり、反映先も手動で選択するので人為的なミスが発生しやすいです。
・開発ブランチからデプロイ対象ブランチへチェックアウトを行う。
・デプロイ対象ブランチを最新状態になるようにプルする。
・デプロイ対象テーマの設定を確認して、デプロイ対象テーマにテーマ反映用のコマンドを実行する。
・また開発する際に、開発用のブランチにチェックアウトを行う。
・自動デプロイを行う場合
最初に自動デプロイの仕組みを用意する必要はあります。（30分ほど）
しかしながら、以降のデプロイはGithub上でのメインブランチへのマージなどをトリガーに自動でデプロイを行なってくれます。
開発者が都度、数行のコマンドを実行したり場合によってはデプロイ用のサーバーに接続する必要がなくなり非常に幸せになれます。
また、人為的なミスも比較して起きづらくなります。
ここまでの実装・管理が一般的なアプリケーションとほぼ同じだったように
デプロイの自動化まで行うことを強くオススメします。
Shopifyテーマの自動デプロイ
さて、ここからは実際にShopifyのテーマの自動デプロイを行う方法を紹介します。
最近では、何種類ものCI/CDツールやサービスが出ておりますので基本的な流れと
私が実際に行った方法を紹介します。
GitHub Actions を使用した方法
Shopifyを使用したECサイト構築やテーマ開発は日本よりも海外の方が活発なため
海外の方が実装したGitHub Actionがすでに作成されています。
詳細はこちらになります↓↓↓
もしも、GitHub Actionsの使用が許される環境でしたら使ってみるといいかもしれません！
AWS CodePipeline を使用した方法
私は、AWSを使用して同時にShopifyアプリの開発をしていたため
AWS CodePipelineを使用して自動デプロイ環境を構築しています。
手順としては単純で下記の通りです。（※ECRへのpushの仕方やCodeBuildの使い方は省きます。）
- ECRにThemeKitのインストールを行ったDocker Imageを作成する。
- AWS CodeBuildで上記イメージを使用し、ビルド時にデプロイのコマンドを実行するようにbuildspecを作成。
- AWS CodePipelineでソースに、テーマ開発用のGithubブランチを指定してBuildに作成したCodeBuildのプロジェクトを登録したパイプラインを作成する。
これで、テーマ開発を行なっているGitHubの検証用や本番用などの特定ブランチに変更があった際に自動でテーマがデプロイされるようになります。
デプロイ環境で使用しているDockerイメージについては下記リポジトリのものを使用しています。
(そのうちCloudFormationのテンプレートも作成するかもしれないです。)
その他のツールを使用する場合
基本的には、以下のリポジトリのDockerfile参考にしてThemeKitのインストールされた環境を用意し、以下のリポジトリのbuildspecを参考にデプロイ用のコマンドが自動で実行されるようにすれば自動デプロイは可能です。
使用するツールに合わせて設定を行いましょう。
まとめ
今回は、Shopify テーマの開発時の管理について1つの方法を紹介しました。
Theme Kit を使っていこう！
結局、Shopifyのテーマ開発でも一般のアプリ開発などと同様のソースコード管理や検証・本番環境を用意するといいと思う！
また、自動デプロイの導入もオススメだよ！ってことを紹介しました。
誰かの役に立ってくれると嬉しいです！
また、こんな方法のほうがいいよ！とか
Git管理の時にこれ困るよ！とか ご意見あればコメントしてください🙏