React Router v7のSPAをCloudflare Workersにデプロイする

はじめに

React Router v7で作っていたサービスをPagesで動かしていました。下記ブログをみてせっかくなのでWorkersを使って見ようと思い、記録を残します。
※将来のWokersの便利機能が使えないのももどかしいですしね。
ついでにサブドメインの登録もします。

Workersが静的アセットの配信とサーバーサイドレンダリングの両方をサポートするようになったので、Workersから始めるのがよいでしょう。Cloudflare Pagesは引き続きサポートしますが、今後の投資、最適化、機能開発の作業はすべてWorkersの改善に向けられます。当社は、Pagesでうまくいった点や改善点について皆様からいただいたフィードバックを基に、Workersを最高のフルスタックアプリ構築プラットフォームにすることを目指しています。

https://blog.cloudflare.com/ja-jp/full-stack-development-on-cloudflare-workers/

既存プロジェクトへの準備

既存のサービスに wranglerをinstallする。

npm i -D wrangler@latest

wrangler.jsonc

{
  "name": "YOUR-SEVICE-NAME",
  "compatibility_date": "2025-04-01",
  "assets": {
    "directory": "./build/client",
    "not_found_handling": "single-page-application"
  }
}

directoryはnpm run buildした際の出力先を設定。
not_found_handling を single-page-applicationと設定しておくことで、 / 以外のパスにアクセスがあった際も / にルーティングさせるようにしてくれます。
SPAではこの設定をしないと別のパスに直接アクセスした際にエラーになります。

GitHubと連携 と Build,Deploy

個人的にはこれが一番楽で便利だと思います。

その後Buildの設定をする

デプロイするBranchの設定もサブドメインの設定もメチャクチャ簡単

レコードタイプがWokersになるの面白い

SupabaseやFirebaseのフロントに必要な変数はここで設定

その他

最初っからVersion管理が自動的にでき、切り替えもめっちゃ簡単でとても良い

Pagesの場合は「Production」と「Preview」において、それぞれ画面上から変数を変更することができましたが、Wokersではぱっとできなさそう。