ShopifyとGitHub連携

これまでShopifyディベロッパーにとってテーマファイルの管理方法やチームでの開発方法は大きな悩みとなっていました。しかし2021年のアップデート以降、ソフトウェア開発のプラットフォームであるGitHubとの連携が可能になり、課題解決に大きく貢献しています。

ShopifyとGitHubを連携されるメリット

変更内容をGitHubに履歴として残せる

GitHubが連携できていない状態では本番環境とGitHubの最新内容に差分ができてしまうことがあったため、差分がある状態で編集したコードを反映させると内容がリセットされる事象が発生していました。しかし連携することでこの内容と本番環境の差分がないよう管理できます。

GitHubにバックアップできる

テーマをGitHubで管理しておくことができると、万が一Shopifyの管理画面からテーマを削除してしまったとしても、GitHub側にデータが残っているため復旧を行うことが可能です。バックアップになる点も大きなメリットの一つです。

複数バージョンを管理できる

GitHubをShopifyと連携することにより、複数のバージョンを管理することができるようになります。バージョン管理ができるようになったことで、PDCAサイクルの加速に貢献してくれるようになるでしょう。

ブランチ毎に連携できる

GitHubとShopifyはブランチごとの連携が可能であることから、それぞれでどのような変更を行ったのかの履歴を残すことができます。これにより編集の差分を確認することができるなど、非常に便利な機能です。

管理画面の同時編集が可能

管理画面で当時に編集を行う場合、片方の修正が上書きされてしまうリスクがあります。ローカル環境での変更を同時に行う場合やチームで開発してしまう場合など、連携をしておくことにより誤って上書きされることなく管理できます。

ShopifyとGitHubの連携手順

GitHubに登録

まずはじめに取り組むべきことはGitHubでのアカウント準備です。GitHubを利用するためにはもちろんアカウント登録をする必要がありますので、準備してから連携を進めて行きましょう。GitHubのアカウント作成は、GitHubの公式ホームページから行うことができます。

Shopifyの準備（Shopify CLIもしくはTheme Kit）

もう一点準備すべきことはShopify側での環境整備です。Shopify CLIもしくはTheme Kitでの開発環境の準備が必要であり、このShopify CLIとはShopifyの開発を行うためのコマンドラインツールです。これを導入することによりローカル環境で行った開発のプレビューを行えます。Shopify CLIを使ってローカル環境を構築する際には新しいテーマの作成、もしくは既存のテーマをローカル環境に準備して進めましょう。

Themeを管理するGitリポジトリをGitHub上に作成する

連携するにあたっては、まずテーマの編集を行うまえにGitHub上で新しいリポジトリを作成しましょう。Shopifyのテーマ管理を行っているディレクトリでリポジトリの作成を行います。初期ファイルをローカルリポジトリへ追加したあとリモートリポジトリと紐づけを行い、リモートリポジトリにプッシュします。

Shopifyの管理画面でGitHubに接続する

次にShopifyの管理画面上で「オンラインストア」を開き、「テーマ」「テーマを追加」「GitHubから接続する」という順番にクリックして進めましょう。その後「テーマを接続する」から作成したリポジトリを選択し、管理画面からテーマを編集してみることで連携ができているかの確認を行いましょう。管理画面から編集した内容がGitHubに反映されており、GitHub側のリポジトリに編集した箇所がアップデートされていることが確認できると完了です。