【Shopify】テーマ開発の流れ（GitHub＆Shopify CLI for themes）
みなさまこんにちは！Staffing Div.＆ICT Div.神谷（@kamipoo_）です。
日頃、Shopifyの構築・運用のご依頼を多くいただいておりまして、ありがとうございます！
社内でもECチーム＆ICT Div.でShopifyの勉強会を積極的に行っています。
今回はさまざまな案件に携わらせていただく中でテーマの開発フローを試行錯誤してできてきたものを一度書いてみたいと思います。
実現したいこと
・Shopifyストアは本番環境のみ
・GitHubでバージョン管理を行いたい
・GitHubでmainブランチにプッシュと同時に公開される状態は避ける
（本番環境上でテスト後公開したい）
・Shopify CLI for themesを使ってローカル環境で開発する
前提
・Shopifyストアは作成済み
・GitHubのアカウントは登録済み
・Shopify CLI for themesはインストール済み
1. ストアに元となるテーマをインストール
テーマストアのテーマをベースにする場合はまずテーマのインストールを実施します。
プロジェクトによってはフルスクラッチで開発する場合はデフォルト（Dawn）のまま進めます。
2. GitHubリポジトリを作成する
GitHubで新規のリポジトリを作成します。
ARCHETYPでは一般的な git-flowを採用しています。
・main：公開ブランチ（Shopifyに接続：公開用テーマ）
・develop：開発を行うブランチ（Shopifyに接続：開発用テーマ）
・feature：developから作成する機能開発等のブランチ。
3. ローカル環境にGitHubをクローンする
ローカル環境にGitHubのリポジトリをクローンします。
4. Shopify CLI for themes でストアと接続
ローカル環境でテーマを開発するためにShopify CLI for themesを設定します。
インストールがまだの方は公式のチュートリアルを見てインストールしてください。
Shopify CLI for themes
Install Shopify CLI
1. ストアにログイン
$ shopify login --store=[store-name].myshopify.com2. ストアからテーマをダウンロード
$ shopify theme pull上記コマンドを実行するとテーマ選択が表示されるので、DLするテーマを選択すると実行しているディレクトリにテーマがダウンロードされます。
? Select a theme to pull from (You chose: XXXXXXXXXX)
┏━━ Pulling theme files from XXXXXXXXXX (#XXXXXXXXXX) on [store-name].myshopify.com
┃ 100%
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (111.19s) ━━
✓ Theme pulled successfully5. GitHubとShopifyストアを接続する
Shopify管理画面の「オンラインストア」のテーマライブラリーの「テーマを追加」のメニュー内の「GitHubから接続する」をクリックします。
GitHubにてShopifyとの連携認証を行うと操作可能なリポジトリが表示されますので、mainブランチとdevelopブランチを接続します。
mainブランチはShopify管理画面上で「公開」をしておきます。
6. テーマを開発する
developブランチを元にfeature/〇〇ブランチを作成します。
$ shopify theme serve上記のコマンドを実行するとテーマをローカル環境で実行するためにストアとの接続が作成されます。
接続が完了すると以下の情報が表示されます。
※接続には1〜2分ほどかかる場合があります。
┏━━ Viewing theme… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ * Syncing theme #XXXXXXXXXX on [store-name].myshopify.com
┃ 100%
┃
┃ Serving .
┃
┃ Please open this URL in your browser:
┃ http://127.0.0.1:9292
┃
┃ Customize this theme in the Online Store Editor:
┃ https://[store-name].myshopify.com/admin/themes/XXXXXXXXXX/editor
┃
┃ Share this theme preview:
┃ https://[store-name].myshopify.com/?preview_theme_id=XXXXXXXXXX
┃
┃ (Use Ctrl-C to stop)
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (79.07s) ━━ Please open this URL in your browser:
http://127.0.0.1:9292
ローカル環境で実行される環境。
テーマファイルをエディタで編集するとホットリロードされます。
Customize this theme in the Online Store Editor:
https://[store-name].myshopify.com/admin/themes/XXXXXXXXXX/editor
ストアのビジュアルエディタでの編集画面のURLです。
Share this theme preview:
https://[store-name].myshopify.com/?preview_theme_id=XXXXXXXXXX
開発者がshopify theme serve を実行している間に共有可能なURLです。
アカウント関連がローカル環境だと不安定な場合は、こちらのURLだと正常に動作する場合があります。
上記のURLをブラウザで表示しながら、エディタを利用して開発していきます。
featureブランチには適宜コミット、プッシュしていきます。
7. テーマをチェックする
6で開発したテーマをdevelopブランチにマージ＆プッシュします。
プッシュするとShopifyに接続したdevelop用のテーマに反映されるので、各所にて確認をしていきます。
8. テーマを本番反映する
developブランチでの確認が反映されたら、mainブランチにプルリクエストを出して、最終公開前のコードレビューを実施後にマージをしてプッシュします。
コミットにはリリースタグ（Release-YYYYMMDD）を付与します
まだまだ、完璧なフローではないと思うのでご指摘・アドバイスなどあればぜひコメントください！
Twitterもフォローよろしくお願いします！
ARCHETYPではShopifyが好き！、ECが好き！な仲間を大募集中ですので、興味のある方はエントリーをお待ちしております！
この記事が気に入ったらサポートをしてみませんか？