ソリッドシード株式会社
GitHub連携を用いたShopify開発環境作成
Shopifyとは
Shopifyは、eコマース（オンラインストア）を構築・運営するためのクラウドベースのプラットフォームです。
セットアップが簡単でWordPressのようにテンプレートが多数あり、地域ごとの通貨や税金設定、多言語・多通貨対応、API提供もあります。
開発環境の課題
Shopifyはソースコード(liquid)を直接変更するか、テーマエディタと呼ばれるGUIの編集機能を用いて行います。
1名で始める分にはとても便利ですが、複数人で開発環境・本番環境を分けながらの運用が難しいです。
GitHub連携
ShopifyにはGitHubとテーマの連携機能がある為、git管理を行う事ができます。
尚、Shopifyは完全なローカル開発環境を作る事が出来ない為、ローカル開発用のブランチを切る事で疑似的にローカル環境を用意する事はできます。
連携内容は、
・ githubへのpushを行うと紐づけられたテーマが自動的にその変更を反映
・ テーマエディタを編集すると紐づけられたリポジトリへ自動的にpush
の為、Shopify管理画面のコード編集を行っても自動的にpushされません。
基本的には利用しない方が混乱を避けられます。
既存のテーマとGitHubの連携手順は以下です。
- 1. GitHubリポジトリ作成
- 2. ストアのテーマファイルをローカルのgit管理下にダウンロード
- 3. テーマファイルをGitHubへPush
- 4. ShopifyテーマとGitHubを接続（接続と同時に紐付いたテーマが作成されます）
Shopify-CLI
GitHub連携を行いgit管理ができるようになりましたが、
開発時にファイル保存の度にgithubへpushするのは手間がかかる為、疑似的なローカル環境を用意できるようShopify-CLIを利用します。
今回はテーマファイルと同じリポジトリにdockerを用いたShopify-CLI環境を設置します。
（Shopifyは既定のディレクトリ以外が連携されたgithub上に存在していても、それらは無視してくれます。）
ディレクトリ構成は以下のようにしました。
Shopify
┣━ assets①
┣━ config②
┣━ locales③
┣━ section④
┣━ snippets⑤
┣━ templates⑥
┣━ Dockerfile⑦
┗━ docker-compose.yaml⑧
①～⑥はShopifyの規程のディレクトリ、⑦⑧がローカル開発用です。
DockerfileはnodejsをベースにしたコンテナにShopify-CLIをインストールします。
運用方法
全体構成はこちら。
ローカルでの作業時には
- 1. ローカル環境用のgit/githubブランチを切る
- 2. ファイル編集の反映はShopify-CLIで接続したテーマを直接更新
- 3. 完了後はローカル環境用ブランチへpushする
という形でローカル環境に近い形で複数人の作業ができます。
Shopify-CLIでのファイル編集は自動的にpushされない為、編集後には必ずpushするようにします。
以上
GitHub連携を用いたShopify開発環境作成でした。
Komine
