【Shopify】開発ストアにShopify Hydrogen storefront を接続する方法
はじめに
Shopifyの 「Hydrogen Storefront」 を試してみたいと思い、チュートリアルに沿って進めていたのですが、途中の「Link your Hydrogen project to Shopify」にて自身の開発ストアにアプリ「Hydrogen」を入れる必要があるのですがインストールしようとしたところ無料のパートナーアカウントではインストールすることができませんでした。
そこでアプリ「Hydrogen」を自身の開発ストアにインストールしなくてもローカルで作成したHydrogen storefrontを開発ストアに接続する方法を備忘録として今回まとめました。
実施手順
0. 開発環境構築（Shopify CLI のインストール）
Hydrogenの開発環境を準備するにあたってCLIの他には下記が必要と公式サイトに記載がありますので、こちらは事前に準備をしておいてください
・Node.js v16.20
・npm v8.19+
Shopify CLI はbrewでインストールします。
brew tap shopify/shopify
brew install shopify-cli
以上で開発環境の準備は整いました
1. Hydrogen storefront の作成
npm init @shopify/hydrogen
この時点でmockのショップを接続するか自身のShopifyアカウントを接続するか選択肢が表示されますが、現時点ではmockを選択してください
> Use sample data from mock.shop (You can connect a Shopify account later)
Link your Shopify account
そのあとはフォルダー名やいくつか設定の選択肢が出てきますが、こだわりがない方は下記設定で良いと思います。
? Where would you like to create your storefront?
✔ hoge
? The directory hoge is not empty. Do you want to delete the existing files and continue?
✔ Yes, confirm
? Select a language:
✔ TypeScript
? Select a styling library:
✔ Tailwind (v4 alpha)
? Install dependencies with npm?
✔ Yes
╭─ success ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ hoge is ready to build. │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
? Do you want to scaffold routes and core functionality?
✔ Yes, set up now
? Select a URL structure to support multiple markets:
✔ Subfolders (example.com/fr-ca/...)
2. ローカルのHydrogen storefront をストアに接続するためにアプリを作成
自身の開発ストアにて「アプリと販売チャネル」を選択し、「アプリを開発」をクリック。
「アプリを作成」を選択
適当なアプリ名を設定。
するとこのような画面になるので「ストアフロントAPIスコープを設定する」をクリック。
今回は商品情報だけ取得できれば良いので「unauthenticated_read_product_listings
」のみをチェック。チェックを入れたら保存。
「API資格情報」タブに移動し「アプリをインストール」を選択。インストールすると Storefront APIのアクセストークンが表示されるのでコピー。
これでアプリ作成手順は完了です。
3. Hydrogen storefront の.envを編集
.envに3つのパラメーターを設定します。
# storeのドメイン
PUBLIC_STORE_DOMAIN=hoge.myshopify.com
# 先ほどコピーしたアプリのStorefront API のトークンを設定
PUBLIC_STOREFRONT_API_TOKEN=yourApplicationStorefrontKey
# 任意のランダム文字列
SESSION_SECRET=randomString
4. localhostを起動して開発ストアの商品が表示されるか確認
最後に接続した開発ストアの商品が表示されるか確認します。
npm run dev
これで自分が開発ストアに登録した商品が表示されるようになっていると思います！
さいごに
以上で「【Shopify】開発ストアにShopify Hydrogen storefront を接続する方法」のご紹介を終わります。最後まで読んでいただきありがとうございました！
参考になったり面白かったと思っていただけましたら❤️ボタンをクリックお願いします！
参考記事
Discussion