Contents Management System

Shopify CLI で GitHub と連携し本番環境にデプロイ・前半

Shopifygit

最近 Shopify を触ることがあったので、環境構築の方法とテーマの作り方をメモします。このブログではShopify環境構築とベーシックテーマをインストールし修正できるまでを目標に記事にまとめます。

前提条件

  • VS Code をインストールしてある
  • GitHub アカウントを持っている
  • Git 操作ができる

この記事ではMacのみの開発方法を紹介しています。

Shopify CLI をインストール

Shopify CLI をインストールします。公式に書いてあるとおりインストールしますが、私はインストール系のものは Homebrew で一元管理しているので、今回は Homebrew でのインストール方法をご紹介します。

Homebrewでインストール。

コマンド
brew tap shopify/shopify
brew install shopify-cli

https://shopify.dev/apps/tools/cli/installation

バージョン確認。

コマンド
shopify version
# 2.15.2

Sshopify は Ruby で動いています。

コマンド
ruby -v
# 2.15.2

ベースとなる Theme Dawn を落として git リポジトリと連携しておく

Dawn は Shopify の基本の Theme です。

今回はこの Dawn をもとにThemeを作成していきます。

コマンド
shopify theme init new-shop

テーマのインストールされたディレクトリに移動します。

new-shop

GitHub でリポジトリを作って、リモートリポジトリと連携しておきます。

コマンド
echo "# new-shop" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/アカウント/new-shop.git
git push -u origin main

対象のストアにログインします。

コマンド
shopify login --store xxxxx.myshopify.com
Shopify 管理画面左メニューからオンラインストアに移動します。テーマライブラリーからgithub と連携しておきます。 テーマライブラリーからgithub
ユーザーアカウント(Organizationでも大丈夫)、リポジトリ、ブランチを選んでおきます。 テーマライブラリーからgithub

shopify theme pullで設定した先程セットしたテーマ名を選びます。

コマンド
shopify theme pull

開発環境を起動。

コマンド
shopify theme serve
開発環境を起動

開発環境でサイトが確認できるようになりました。

開発環境を起動

サイトは開発モードなのでURLを踏んだ直後、パスワードを促される可能性があります。

パスワードはオンラインストア、各種設定、パスワード保護から確認できます。

Shopfy の基本のディレクトリ構造

ディレクトリ内容
assetsCSSやJAS画像など
configテーマ全体や管理画面で設定を保存するjsonデータを格納
layoutレイアウトに関するhtmlなど
locales言語に関する設定
sections各ページの大きめの共通パーツ
snippets各ページの小さめの共通パーツ
templates各ページのテンプレート
環境構築に不便なM1チップ。5ヶ月くらい前は shopify theme serve が動かないとかあったみたいですが問題なく動きました。
かみーゆ
かみーゆ

私の記事はだいたい公開備忘録です。案件で過去やったことを守秘義務内でまとめてます。

お読みいただきありがとうございます。
「銀ねこアトリエ」をより良いブログにするために是非応援してください!

銀ねこアトリエを応援する