Cloudflare Pagesフロントエンドデプロイ完全ガイド：React/Vue/Next.js設定+エラー回避の極意

はじめに

週末にReactプロジェクトを作り、「さあ、世界に公開しよう！」と意気込んでCloudflare Pagesの設定画面を開いたものの、「Build Commandって何？」「Output Directoryはdist？build？」「環境変数は？」とフリーズしてしまった経験はありませんか？

VercelやNetlifyも素晴らしいですが、Cloudflare Pagesの「帯域幅無制限」は個人開発者にとって最強の魅力です。しかし、ドキュメントが英語だったり、Next.jsの設定にクセがあったりと、最初のハードルが少し高いのも事実。

この記事では、React、Vue、Next.jsの3大フレームワークをCloudflare Pagesにデプロイするための「完全な設定リスト」を提供します。私が実際に踏み抜いた落とし穴（特にNext.jsの互換性エラー）の回避方法もシェアしますので、これを読めば迷わずデプロイできるはずです。

Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応

価格を見る →広告

なぜCloudflare Pagesを選ぶのか？

Vercelの無料プランは100GB/月の帯域制限がありますが、Cloudflare Pagesは無料・無制限です。

最適なユースケース：

• 個人ブログ、ポートフォリオ
• 中小規模のSPA（React/Vueアプリ）
• 静的サイト（SSG）
• 突然バズる可能性のあるコンテンツ（課金の心配がない）

準備作業

1. Cloudflareアカウント登録: まだなら作りましょう。
2. Gitリポジトリ: コードをGitHubまたはGitLabにプッシュしておきます。
3. ビルド設定の確認: 自分のプロジェクトがどうビルドされるかを確認（Vite? CRA? Next.js?）。

React アプリのデプロイ

設定チェックリスト

Cloudflareダッシュボードで「Create Project」>「Connect to Git」を選び、リポジトリを選択します。以下の通り設定してください。

注意点:

• Viteの出力先は dist、CRAは build です。ここを間違えると404になります。

環境変数の設定

Reactアプリで環境変数を使う場合、プレフィックスが必要です。

• Vite: VITE_ で始める（例：VITE_API_URL）
• CRA: REACT_APP_ で始める（例：REACT_APP_API_URL）

Settings > Environment variables で変数を追加します。

SPAのルーティング問題（404対策）

React Routerなどを使っている場合、トップページ以外でリロードすると404エラーになります。
これを防ぐために、public フォルダに _redirects というファイルを作成し、以下を記述します：

Alibaba Cloud - 開発者向けクラウドの第一候補、ライトサーバー15%OFF、プロジェクトの迅速な立ち上げを支援

15%割引を入手 →広告

/* /index.html 200

これだけで、すべてのリクエストが index.html に転送され、ルーターが正常に機能します。

Vue アプリのデプロイ

設定チェックリスト

VueもReactと似ていますが、フレームワークによって少し違います。

注意点: Vue CLIもViteも、デフォルト出力先は dist です。

Railway - モダンなデプロイプラットフォーム、煩わしい運用から解放、数分で公開

今すぐ始める →広告

環境変数

• Vite: VITE_ プレフィックス
• Vue CLI: VUE_APP_ プレフィックス

ヒストリーモードの404対策

Vue Routerのヒストリーモードを使う場合も、React同様に public/_redirects ファイルが必要です。

/* /index.html 200

Next.js アプリのデプロイ（最重要！）

Next.jsのデプロイは少し複雑です。**静的エクスポート（Static Export）**か、**SSR（Server Side Rendering）**かで設定が全く異なります。

パターン1：静的エクスポート（初心者・ブログ向け）

APIルートやSSR機能を使わない場合は、これが最も簡単で安定しています。

1. next.config.js の設定:

   const nextConfig = {
     output: 'export', // 必須: 静的エクスポートを有効化
     images: {
       unoptimized: true, // CF PagesはNext.jsの画像最適化をサポートしていません
     },
   }
   module.exports = nextConfig

2. Cloudflare設定:
   • Framework preset: Next.js (Static HTML Export)
   • Build command: npm run build
   • Output directory: out

パターン2：SSRモード（API Routes使用）

動的な機能を使う場合は、アダプターが必要です。現在は @opennextjs/cloudflare（旧 @cloudflare/next-on-pages）が推奨されています。

1. アダプターのインストール:

   npm install @opennextjs/cloudflare

2. next.config.js: output: 'export' は不要です。画像の unoptimized: true は必要です。
3. Cloudflare設定:
   • Framework preset: None
   • Build command: npx @opennextjs/cloudflare
   • Output directory: .worker-next
4. 互換性フラグの設定（ここがハマりポイント！）:
   Settings > Functions > Compatibility flags に行き、Production と Preview 両方に nodejs_compat を追加し、日付を 2024-09-23 以降に設定してください。これを忘れると500エラーになります。
5. Edge Runtimeの指定:
   APIルートやServer Componentには、以下の行を追加する必要があります。

   export const runtime = 'edge';

Next.js よくあるカオス（エラー集）

• nodejs_compat is not defined: 上記の互換性フラグを設定すれば直ります。
• デプロイ成功しても404: Output directoryが間違っていないか確認（SSRなら .worker-next、静的なら out）。
• 画像が表示されない: next/image はデフォルトでは使えません。unoptimized: true にするか、Cloudflare Imagesなどの外部サービスを使いましょう。

環境変数の管理術

開発環境（ローカル）、プレビュー（PR）、本番（Production）で環境変数を使い分けたいですよね。

1. ローカル: .env.local を使用（Gitにはコミットしない）。

   VITE_API_URL=http://localhost:3000

2. Cloudflare上: Settings > Environment variables で設定。
   • Production: 本番用のAPIキーなど。Secretにして隠せます。
   • Preview: テスト用のAPIキーなど。

カスタムドメインとHTTPS

デプロイが完了したら、xxx.pages.dev というURLが発行されますが、独自ドメインも無料で設定できます。

1. Custom domains タブへ移動。
2. Set up a custom domain をクリック。
3. ドメイン名を入力（Cloudflareで管理しているドメインなら、DNSレコードが自動追加されます）。
4. 数分待てばSSL証明書が発行され、HTTPSでアクセスできるようになります。

プレビューデプロイの活用

GitHubでプルリクエスト（PR）を作成したり、メイン以外のブランチにプッシュすると、Cloudflare Pagesは自動的に「プレビュー環境」を作成します。
本番環境（Production）とは別のURLが発行されるので、マージ前に変更内容をスマホで確認したり、チームでレビューしたりするのに最適です。

まとめ

Cloudflare Pagesへのデプロイは、「ビルドコマンド」と「出力ディレクトリ」、そして「環境変数」さえ正しく設定できれば、あとはGit Pushするだけの全自動になります。
特にNext.jsユーザーは、nodejs_compat フラグとEdge Runtimeの設定だけ忘れないようにしてください。これさえクリアすれば、無料で爆速なサイト運営が待っています。

4 min read · 公開日: 2025年12月1日 · 更新日: 2026年1月22日

Easton

技術開発