Cloudflare deploy

✅ 今日の振り返り（2025/04/21）

🕐 午後スタート：Cloudflare Pagesデプロイ設定

  • やったこと
    • Cloudflare Pages に Next.js（App Router）のブログをデプロイしようとする
    • ビルドコマンド: npm run build、出力ディレクトリ: /out に設定
  • つまづきポイント
    • "/out" の / が自動で入るため不安に → Cloudflareの仕様でOKと判明
    • npm run build && npm run export が export スクリプトなしで失敗

🔧 調査・修正

  • やったこと

    • package.json に "export": "next export" を追加

    • next.config.ts に以下を設定：

      const nextConfig = {
  output: "export",
  distDir: "../out",
  compiler: { styledComponents: true },
}

  • 気づき

    • distDir: "../out" だと Cloudflare が認識しない可能性がある（Cloudflareは /out を期待）

⚠️ エラー再発 → ビルド成功しない

  • エラー内容
    • next build は成功するが、next export でエラー
    • Cloudflareログで Missing script: export → スクリプト追加で解消

🟢 決定打：wrangler.toml の導入

  • やったこと
    • wrangler.toml をプロジェクトルートに追加
    • site.outDir = "./out" を設定し、Cloudflareに出力ディレクトリを明示
  • 結果
    • Cloudflare が正しく out ディレクトリを認識
    • デプロイ成功！

🎉 学び・気づきまとめ

学び 内容
✅ next export 必須 Static Exportを使うには next.config.ts + npm run export が必要
✅ Cloudflare Pages の仕様 /out ディレクトリを前提としている
✅ エラーログは宝 ログを見ればほとんどのヒントが書いてある
✅ 粘り強さが命 知識だけでなく、やり切る力が今日の勝因！

🔚 今日のまとめ

今日は Cloudflare × Next.js の壁を超えた日。
エラー地獄を一つずつ突破して、ついに本番デプロイ成功！

ブログ一覧に戻る