React Router v7 × Cloudflare 無料かつ爆速でWebサイトをデプロイする

Last updated at 2025-10-29Posted at 2025-10-29

はじめに

React Routerで作ったアプリをサクッと公開したいとき、Cloudflare Workersが便利です。公式のReact Router v7テンプレートが用意されていて、数分あれば環境構築からデプロイまで完了します。

この記事では、Cloudflare Workersの無料枠内で簡単にアプリを公開するまでの最小手順を紹介します。

前提条件

Cloudflareアカウントにログインできること
npmがインストールされていること

アカウントをまだ持っていない場合は以下から登録できます。
無料枠で使うだけなら、クレジットカード登録すら不要です。

プロジェクト作成

Cloudflare公式のReact Routerテンプレートを使ってプロジェクトを作成します。

npm create cloudflare@latest -- my-react-router-app --framework=react-router

コマンド実行後、my-react-router-appというディレクトリが生成され、初期構成が作成されます。

参考:

コード修正（おまけ）

テンプレートのままでも動作しますが、せっかくなのでトップページを少しだけおしゃれにしてみます。Tailwind CSS がデフォルトで組み込まれているので、スタイル付きのUIを簡単に作成できます。

以下のようにChatGPTへ指示を出してみました。

ReactとTailwind CSSで、welcome.tsxにシンプルでモダンなデモサイトのWelcomeページを作成してください。

生成されたコードを app/welcome/welcome.tsx に貼り付けます。

export function Welcome() {
  return (
    <div className="min-h-screen flex flex-col bg-gradient-to-b from-blue-50 to-white text-gray-800">
      <header className="w-full py-4 shadow-sm bg-white/70 backdrop-blur-sm">
        <div className="max-w-6xl mx-auto flex items-center justify-between px-4">
          <h1 className="text-xl font-semibold tracking-tight">DemoSite</h1>
          <nav className="flex gap-6 text-sm">
            <a href="#" className="hover:text-blue-600 transition-colors">Home</a>
            <a href="#" className="hover:text-blue-600 transition-colors">About</a>
            <a href="#" className="hover:text-blue-600 transition-colors">Contact</a>
          </nav>
        </div>
      </header>

      <main className="flex-grow flex items-center justify-center text-center px-4">
        <div className="max-w-2xl">
          <h2 className="text-4xl sm:text-5xl font-bold mb-4">Welcome to DemoSite</h2>
          <p className="text-gray-600 mb-8">
            React Router v7 と Tailwind CSS で構築されたデモページです。
          </p>
        </div>
      </main>

      <footer className="py-6 text-center text-sm text-gray-500 border-t">
        © 2025 DemoSite. All rights reserved.
      </footer>
    </div>
  );
}

ローカル実行

ローカル環境で動作を確認しておきます。次のコマンドで開発モードを起動します。

npm run dev

ブラウザで http://localhost:5173 にアクセスすると、React Routerで構築したトップページを確認できます。

Cloudflare へデプロイ

デプロイはこの1コマンドで完了します。

npm run deploy

初回のみ、ブラウザが開いてCloudflareアカウントとの連携許可を求められます。
「Allow」をクリックすれば認証完了です。

Wranglerとは

package.jsonを見ると、npm run deploy は内部で次のスクリプトを実行していることがわかります。

npm run build && wrangler deploy

Wrangler（ラングラー）は、Cloudflare公式のCLIツールで、
Workersアプリのビルド、デプロイ、設定、環境変数の管理などを行うためのものです。今回のテンプレートにはあらかじめWranglerが同梱されているため、特別な設定をしなくてもそのまま利用できます

参考:

デプロイ確認

デプロイが完了したら、Cloudflareダッシュボードにアクセスし、
「Workers & Pages」を開きます。

デプロイ済みプロジェクトが表示され、以下のようなURLが発行されます。

https://my-react-router-app.<アカウント名>.workers.dev

このURLをブラウザで開けば、React RouterサイトがCloudflare上で高速に表示されます。
workers.devドメインは一時的なURLですが、独自ドメインを無料で紐付けることも可能です。

無料枠の制限

Cloudflare Workers 無料枠はいくつかの制限がありますが、個人ポートフォリオ、LP、デモアプリなどであれば十分活用できると思います。

項目	無料プランの上限
リクエスト数	1日あたり 10万件
CPU実行時間	1リクエストあたり 10ミリ秒以内

参考:

まとめ

React Router v7 テンプレートで簡単セットアップ
Cloudflare Workersへの無料デプロイ
npm run deploy だけで公開完了
無料枠でも小規模サイトなら十分実用的