VercelでRemix Shopifyアプリの開発

① 前提条件

• Shopify Partners アカウント
• Shopify開発ストア
• Vercel アカウント
• GitHub アカウント（Vercel連携用）
• Node.js（推奨 v18+）
• npm または pnpm

② アプリテンプレートを作成

npx create-remix@latest --template shopify/app-template-remix
cd app-template-remix

このテンプレートは、

• Shopify OAuth認証
• App Bridge対応（埋め込みアプリ）
• Webhook処理 などが最初から組み込まれています。

③ 環境変数を設定

.env ファイルを作成して、以下のように設定します：

SHOPIFY_API_KEY=xxx
SHOPIFY_API_SECRET=xxx
SCOPES=read_products,write_products
SHOP=your-dev-store.myshopify.com
HOST=localhost:3000

※SHOPIFY_API_KEYとSECRETは、Shopify Partners管理画面 → アプリ → 作成 → Custom app から取得。

④ ローカルで確認

npm install
npm run dev

ブラウザで http://localhost:3000 にアクセスし、開発ストアにアプリをインストールできるか確認します。

⑤ GitHub にプッシュ

git init
git remote add origin https://github.com/yourname/your-remix-shopify-app.git
git add .
git commit -m "Initial commit"
git push -u origin main

⑥ Vercel にデプロイ

1. https://vercel.com/dashboard にアクセス
2. 「New Project」→ GitHubのリポジトリを選択
3. 環境変数をVercelに追加（Shopify用の .env の内容をそのまま入力）
4. 「Deploy」ボタンをクリック！

⑦ Shopify Partners にリダイレクトURLを登録

Shopify管理画面 > アプリ設定 > OAuth の「リダイレクトURL」に次のように入力：

https://your-vercel-app.vercel.app/api/auth/callback

⑧ 本番動作確認

アプリのインストールURLにアクセスして、開発ストアにインストールできるかテスト。