Next.js Storefront の Cloudflare Workers デプロイ手順¶

目的¶

リツビ B2B Storefront（Next.js 15 + App Router）を OpenNext + Cloudflare Workers で配備するためのローカルビルド手順、設定ファイル、環境変数管理、既知の注意点を整理する。

1. 事前準備¶

Cloudflare アカウントで Workers を利用可能であること（wrangler login 済み）
pnpm ワークスペースに wrangler / @opennextjs/cloudflare を追加済み
Vendure 本番 API エンドポイントが稼働し、Workers からのアクセスが許可されていること
GitHub Actions など CI からデプロイする場合は API トークンと Account ID を取得しておく

2. 新規追加・更新した主なファイル¶

ファイル	役割
`apps/storefront/wrangler.toml`	Workers 用設定（`main`, `assets`, `build.command`, `compatibility_flags` など）
`apps/storefront/open-next.config.ts`	OpenNext (Cloudflare アダプター) の設定ファイル
`apps/storefront/.open-next/`	OpenNext が生成する成果物ディレクトリ（Git 管理対象外）
（廃止）`apps/storefront/scripts/generate-content.cjs`	ダミー記事・キャンペーン生成は 2025-11 に廃止済み。現在は使用しない

3. 環境変数の整理¶

Workers 環境変数は wrangler.toml の [vars] で管理し、本番・プレビューで値を切り替える場合は [env.production.vars] 等で上書きする。

変数名	用途	備考
`VENDURE_BASE_URL`	Vendure 基本URL（例: `https://api.example.com`）	指定しない場合は `http://localhost:3021` を使用
`VENDURE_API_URL`	Shop GraphQL フルURL（`/shop-api` を含む）	省略時は `VENDURE_BASE_URL + /shop-api` を利用
`VENDURE_ASSET_URL`	Vendure AssetServer へのフルURL	省略時は `VENDURE_BASE_URL + /assets` を利用
`NEXT_PUBLIC_STOREFRONT_API_MOCKING`	`disabled` 固定	本番では MSW を無効化

Cloudflare ダッシュボードから登録する場合は「Workers & Pages → Variables」から追加する。

4. ローカルビルドフロー¶

依存関係のインストール

pnpm install

OpenNext による Cloudflare Workers 用ビルド

pnpm --filter ritsubi-storefront run cloudflare:build

precloudflare:build で codegen のみ実行（ダミーコンテンツ生成は廃止済み）
cloudflare:build で pnpm exec opennextjs-cloudflare を呼び出し、.open-next/ 配下に成果物を生成
出力確認
Workers エントリ: apps/storefront/.open-next/worker.js
静的資産: apps/storefront/.open-next/assets/
ルーティング情報: apps/storefront/.open-next/_routes.json

.open-next/ 配下は Git 管理対象外 (.gitignore で除外) とする。

5. Cloudflare Workers へのデプロイ¶

Cloudflare アカウントへログイン

wrangler login

Workers へデプロイ

cd apps/storefront
pnpm run cloudflare:deploy

本番用: pnpm run cloudflare:deploy → opennextjs-cloudflare deploy
プレビュー用: pnpm run cloudflare:preview → opennextjs-cloudflare preview（ローカル開発用）
プレビュー環境デプロイ: pnpm run cloudflare:deploy:preview → wrangler deploy --env preview
デプロイ後に確認すべきポイント
/commerce/* リライトルールが期待通りプロキシされること（Workers 実行ログで確認）
Analytics / Caching など Cloudflare 側設定が要件どおりになっていること

6. Cloudflare Pages でのビルドコマンド設定¶

Cloudflare Pages から Next.js Storefront をデプロイする場合は、ritsubi-storefront パッケージの build スクリプトを直接実行し、Storefront とその依存パッケージのみをビルド対象にする。

Build command: pnpm --filter ritsubi-storefront run build
環境変数: Next.js が .env, .env.local を自動で読み込むため dotenvx での追加読み込みは不要
出力ディレクトリ: apps/storefront/.open-next/assets （OpenNext の設定に合わせて必要に応じて変更）

build スクリプトは prebuild（codegen のみ）実行後に Next.js 本番ビルドを走らせる。Cloudflare Pages 側では Storefront のみにフィルタした pnpm --filter ritsubi-storefront run build を指定することで、Vendure やプラグインのビルドをスキップし、ジョブ時間と失敗リスクを減らせる。

7. 既知の注意点¶

OpenNext 1.x は .open-next/ を 1 回のビルド毎に完全再生成する。CI では pnpm run cloudflare:build を必ず実行する。
KV や D1 でのキャッシュを利用する場合は open-next.config.ts に追記し、wrangler.toml でリソースをバインドする。
wrangler deploy はデフォルトで Workers 名前空間に発行する。Pages とは配信スキームが異なる点に注意する。
wrangler / @opennextjs/cloudflare のメジャーアップデート時は CLI コマンドや生成ファイル構成が変わる可能性があるため、事前にステージングで検証する。