Reactで作ったWebアプリを公開したい時、どのホスティングサービスを選ぶか迷っていませんか？
「まずは無料でサクッと試したい」
「アクセス数が増えても料金を心配したくない」
そんな方に今一番おすすめなのが Cloudflare Pages です。
本記事では、Reactアプリを無料デプロイできる主要サービスを比較しつつ、Cloudflare Pages ＋ GitHub を使った具体的なデプロイ手順をわかりやすく解説します！
1. React対応！無料デプロイサービスの一覧と特徴
Reactアプリを無料で公開できる代表的なサービスは以下の4つです。
| サービス名 | 主な特徴 | こんな人におすすめ |
| Cloudflare Pages | 転送量（帯域幅）が無制限。 爆速CDNで世界中に配信 | コストゼロで安定して長く運用したい人 |
| Vercel | GitHub連携が超強力。Next.jsの開発元で高機能 | Next.jsを使う人、プレビュー環境を重視する人 |
| Netlify | フォルダのドラッグ＆ドロップでも即公開可能 | Gitを使わずサクッと動作確認したい初心者 |
| GitHub Pages | GitHub公式機能。別サービスへの登録不要 | GitHubのみで管理を完結させたい人 |
2. なぜ「シンプルなページ」なら Cloudflare Pages なのか？
Vite + React などで作成した SPA（シングルページアプリケーション）や静的なポートフォリオサイト であれば、Cloudflare Pages が一番使いやすくおすすめです。
Cloudflare Pages が選ばれる理由
- 転送量（帯域幅）が完全無制限多くの無料ホスティングサービスでは「月間100GBまで」といった制限がありますが、Cloudflare Pages は無料枠でも転送量無制限です。バズったりアクセスが急増したりしても突然請求が発生する心配がありません。
- ビルドと配信速度が爆速世界中に展開されたCloudflareのネットワーク（CDN）から直接配信されるため、ページの表示速度が非常に高速です。
- 無料枠で商用利用もOKアフィリエイトリンクの掲載や商用Webサイトの運用も、無料プランのまま行えます。
3. Cloudflare Pages × GitHub 連携でデプロイする手順
ここからは、実際に Vite + React のプロジェクトを GitHub 連携で自動デプロイする流れをステップ解説します。
1.GitHubにリポジトリをPushする
手元のReactプロジェクトをGitHubのリポジトリにPushしておきます。
2.Cloudflareにログインし Pages を作成
- Cloudflareの公式サイト にログイン。
- 左メニューの 「Workers & Pages」を選択。
- 「アプリケーションを作成する」を選択。
- 一番下の「始める」を選択。
- ＞ 「Gitに接続」 を選択。
3.GitHub アカウントの連携とリポジトリ選択
- GitHubアカウントへのアクセスを許可します。
- デプロイしたいReactプロジェクトのリポジトリを選択し、「セットアップの開始」 をクリックします。
4.ビルド設定（Framework preset）を入力
ビルドの設定画面で以下のように指定します
- フレームワークのプリセット: React（Vite）
- ビルドコマンド: npm run build
- ビルド出力ディレクトリ: dist
入力したら 「保存してデプロイ」 を押します。
5.デプロイ完了！
1〜2分ほどでビルドが完了し、
4. 将来的にサーバーサイドレンダリングや [id] ページを使うなら Vercel もおすすめ
今回はシンプルな静的SPAのデプロイとして Cloudflare Pages を紹介しましたが、アプリの成長に合わせて Vercel への移行や使い分けを検討するのも賢い選択です。
Vercel が本領を発揮するケース
- Next.js などを採用し、サーバーサイドレンダリング（SSR）を行いたい時
- /posts/[id] や /users/[id] のような動的ルーティング（Dynamic Routes）を、サーバー側で高速に処理・生成したい時
Vercel は Next.js の開発元でもあるため、複雑なサーバーサイド処理や [id] ページの設定がゼロ構成（設定なし）で完璧に動作します。
- シンプルな静的Reactアプリ・ポートフォリオ なら 無料枠が太っ腹な Cloudflare Pages
- Next.jsを使ったフルスタック・動的Webアプリ なら 開発体験が抜群な Vercel
といった形で使い分けるのが現在のフロントエンド開発のトレンドです。
まとめ
- 無料で安心・高速にReactアプリを公開したいなら Cloudflare Pages が第一候補になります。
- GitHubと連携すれば、git push だけで自動ビルド＆デプロイが完了する。
- 今後 Next.js による SSR や [id] ページの構築にステップアップするなら Vercel も併せて試してみるのがおすすめ！
ぜひ手元のReactアプリを Cloudflare Pages で公開してみてください！
コメント