【保存版】ReactアプリをCloudflare Pagesで無料デプロイする方法！Vercelとの使い分けも解説

ReactアプリをcloudflarePagesで無料デプロイする流れ インフラ・サーバー
2026.07.30

Reactで作ったWebアプリを公開したい時、どのホスティングサービスを選ぶか迷っていませんか？

「まずは無料でサクッと試したい」

「アクセス数が増えても料金を心配したくない」

そんな方に今一番おすすめなのが Cloudflare Pages です。

本記事では、Reactアプリを無料デプロイできる主要サービスを比較しつつ、Cloudflare Pages ＋ GitHub を使った具体的なデプロイ手順をわかりやすく解説します！

1. React対応！無料デプロイサービスの一覧と特徴

Reactアプリを無料で公開できる代表的なサービスは以下の4つです。

サービス名主な特徴こんな人におすすめ
Cloudflare Pages転送量（帯域幅）が無制限。 爆速CDNで世界中に配信コストゼロで安定して長く運用したい人
VercelGitHub連携が超強力。Next.jsの開発元で高機能Next.jsを使う人、プレビュー環境を重視する人
Netlifyフォルダのドラッグ＆ドロップでも即公開可能Gitを使わずサクッと動作確認したい初心者
GitHub PagesGitHub公式機能。別サービスへの登録不要GitHubのみで管理を完結させたい人

2. なぜ「シンプルなページ」なら Cloudflare Pages なのか？

Vite + React などで作成した SPA（シングルページアプリケーション）や静的なポートフォリオサイト であれば、Cloudflare Pages が一番使いやすくおすすめです。

cloudflarePagesとVercelの概念

Cloudflare Pages が選ばれる理由

  1. 転送量（帯域幅）が完全無制限：
    多くの無料ホスティングサービスでは「月間100GBまで」といった制限がありますが、Cloudflare Pages は無料枠でも転送量無制限です。バズったりアクセスが急増したりしても突然請求が発生する心配がありません。
  2. ビルドと配信速度が爆速：
    世界中に展開されたCloudflareのネットワーク（CDN）から直接配信されるため、ページの表示速度が非常に高速です。
  3. 無料枠で商用利用もOK：
    アフィリエイトリンクの掲載や商用Webサイトの運用も、無料プランのまま行えます。

📝 Cloudflare Pagesでポートフォリオを公開してみて
私は自分のWebサイトや開発したアプリをCloudflare Pagesを使ってポートフォリオとして公開しています。GitHubと連携させているため、コードを修正して git push するだけで数十秒後には本番環境へ自動反映されます。 サーバーの管理やインフラの知識がほぼ不要で、転送量を気にせず放置できる安心感は、個人開発者にとって本当にありがたい環境だと実感しています。

3. Cloudflare Pages × GitHub 連携でデプロイする手順

ここからは、実際に Vite + React のプロジェクトを GitHub 連携で自動デプロイする流れをステップ解説します。

cloudflarePagesのデプロイの流れ

1.GitHubにリポジトリをPushする

手元のReactプロジェクトをGitHubのリポジトリにPushしておきます。

2.Cloudflareにログインし Pages を作成

Cloudflareのメニューバーのスクリーンショット
  • 「アプリケーションを作成する」を選択。
CloudflarePages作成のボタン配置
  • 一番下の「始める」を選択。
CloudflareのWorkerの中にあるPagesの始め方
  • 「Gitに接続」 を選択。
CloudflarePagesの始め方のスクリーンショット

3.GitHub アカウントの連携とリポジトリ選択

  1. GitHubアカウントへのアクセスを許可します。
  2. デプロイしたいReactプロジェクトのリポジトリを選択し、「セットアップの開始」 をクリックします。
CloudflarePagesにデプロイするリポジトリの選択方法

4.ビルド設定（Framework preset）を入力

ビルドの設定画面で以下のように指定します

  • フレームワークのプリセット: React（Vite）
  • ビルドコマンド: npm run build
  • ビルド出力ディレクトリ: dist
CloudflarePagesへReactアプリをデプロイする設定

入力したら 「保存してデプロイ」 を押します。

5.デプロイ完了！

1〜2分ほどでビルドが完了し、

https://xxx.pages.dev
xxx.pages.dev
というURLが発行されます！

ReactのWebサイトのデプロイ確認のスクリーンショット

以降は手元のPCから git push するだけで、Cloudflareが自動でコードを検知して最新版へ更新してくれます。

4. 【重要】React（SPA）でページ更新時に404エラーが出る場合の対処法

React Routerなどを使ってクライアントサイドでルーティング（/about や /dashboard など）を行っている場合、「直リンクでアクセスしたり、ページをリロード（F5）すると404エラー（Not Found）になる」 というトラブルがよく起こります。

これは、Cloudflareのサーバー上に /about/index.html という物理ファイルが存在しないために発生します。

解決策：_redirects ファイルを配置する

プロジェクトの public フォルダ内に、拡張子なしの _redirects という名前のファイルを作成し、以下の1行を記述してリポジトリにPushしてください。

/*  /index.html  200

この設定（すべてのリクエストを index.html に200ステータスでリダイレクトする）を入れることで、SPAのルーティングが正常に動作するようになります。

5. 将来的にSSRや動的ページを使うなら Vercel との使い分けも賢い

今回はシンプルな静的SPAのデプロイとして Cloudflare Pages を紹介しましたが、アプリの成長に合わせて Vercel への移行や使い分けを検討するのも賢い選択です。

Vercel が本領を発揮するケース

  • Next.js などを採用し、サーバーサイドレンダリング（SSR）を行いたい時
  • /posts/[id] や /users/[id] のような動的ルーティング（Dynamic Routes）を、サーバー側で高速に処理・生成したい時

Vercel は Next.js の開発元でもあるため、複雑なサーバーサイド処理や [id] ページの設定がゼロ構成（設定なし）で完璧に動作します。

効率的な使い分けの基準

  • Cloudflare Pages： シンプルな静的Reactアプリ、ポートフォリオ、個人開発のSPA（転送量無制限で完全無料運用）
  • Vercel： Next.jsを使ったフルスタックWebアプリ、SSRを多用するプロダクト（開発体験重視）

このように自分の作るアプリの特性に合わせてサービスを選択するのが、現代フロントエンド開発のベストプラクティスです。

まとめ

  • 無料で安心・高速にReactアプリを公開したいなら Cloudflare Pages が第一候補。
  • 転送量が完全無制限のため、アクセス急増時も安心して運用できる。
  • GitHubと連携すれば、git push だけで自動ビルド＆デプロイが完了。
  • SPAでリロード時に404エラーが出る場合は、public/_redirects の配置で即解決できる。
  • 今後 Next.js による SSR などにステップアップするなら Vercel も併せて試してみるのがおすすめ！

ぜひ手元のReactアプリを Cloudflare Pages で世界に向けて公開してみてください！

コメント