docs.noimk.com

Appearance

2章_Cloudflareに本番相当をデプロイ ​

1. Cloudflare にログイン（wrangler login） ​

今回はプロジェクトルートのworkspaceにwranglerを追加したので、

bash
pnpm exec wrangler login

login は1回でOK（以降はトークンが保存される）

ブラウザが開いて認可 → 戻る、の流れになります。

2. API（Worker+Hono）をCloudflareにデプロイ ​

apps/api/wrangler.jsonc の name が Cloudflare上で一意である必要があります。ユニークな名前に変えてください（例：cf-nextjs-sample-api-noimasaki）。

※ workspace ルートに入れた wrangler を使うため、基本はルートで --filter を使います。

確認・修正後にデプロイ：

bash
pnpm --filter ./apps/api exec wrangler deploy

3. Web（Next.js）をCloudflareにデプロイ ​

apps/web/wrangler.jsonc の name が Cloudflare上で一意である必要があります。ユニークな名前に変えてください（例：cf-nextjs-sample-web-noimasaki）。

Webのデプロイには、OpenNextで生成される .open-next/worker.js と .open-next/assets が必要です。

確認・修正後にデプロイ：

bash
pnpm --filter ./apps/web run build:cf
pnpm --filter ./apps/web exec wrangler deploy

4. 一括デプロイ可能とする ​

package.jsonのscriptsに以下を追加：

json
"scripts": {
  // --- Deploy (Cloudflare) ---
  "deploy:api": "pnpm --filter ./apps/api exec wrangler deploy",
  "deploy:web": "pnpm --filter ./apps/web run build:cf && pnpm --filter ./apps/web exec wrangler deploy",
  "deploy": "pnpm run deploy:api && pnpm run deploy:web"
}
  • pnpm run deploy:api：apiのみをデプロイ
  • pnpm run deploy:web：webのみをデプロイ
  • pnpm run deploy：apiとwebの両方をデプロイ