コンテンツにスキップ

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 からのアクセスが許可されていること
  • CI からデプロイする場合は Cloudflare API トークン（CLOUDFLARE_API_TOKEN）を用意しておく
  • 本リポジトリでは GitHub Actions からデプロイする（main→本番、develop→ステージング）

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 管理対象外）
.github/workflows/deploy-storefront.yml GitHub Actions による自動ビルド/デプロイ（main/develop で環境分岐）
（廃止）apps/storefront/scripts/generate-content.cjs ダミー記事・キャンペーン生成は 2025-11 に廃止済み。現在は使用しない

3. 環境変数の整理

Workers の設定値は大きく 2 種類に分けて扱う。

  • Secrets（機密）: GitHub Actions で Doppler から取得し、wrangler secret bulk で Workers 側へ投入する（環境ごとに投入先が異なる）
  • Vars（非機密）: wrangler.toml の [vars] や Cloudflare ダッシュボードの Variables で管理する
変数名 用途 備考
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. ローカルビルドフロー

  1. 依存関係のインストール
pnpm install
  1. 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 へのデプロイ

GitHub Actions（推奨 / 現行構成）

  • develop ブランチへの push で staging をデプロイする（wrangler deploy --env staging）
  • main ブランチへの push で production をデプロイする（wrangler deploy）
  • ステージングは wrangler.toml の [env.staging] で Workers 名を分けており、本番とは別の Workers として管理される

詳細は .github/workflows/deploy-storefront.yml と apps/storefront/wrangler.toml を参照する。

ローカル（手動）

  1. Cloudflare アカウントへログイン
wrangler login
  1. 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
  • 環境変数: wrangler pages deploy コマンドが .dev.vars を自動で読み込むため Doppler 等での追加読み込みは不要ですが、CI/CD 環境では環境変数を別途設定する必要があります。
  • 出力ディレクトリ: 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 コマンドや生成ファイル構成が変わる可能性があるため、事前にステージングで検証する。