この記事は、「Hono Advent Calendar 2025」の遅刻ポストです。

ここではReact（Vite ）で作成した SPA と、Hono で実装した API を、1つの Cloudflare Workers プロジェクトとしてまとめて開発・デプロイする方法を解説します。API とフロントを分離せず、Cloudflare Workers 上でまとめて運用できるため、個人開発などではかなり開発フローがシンプルにできます。

Cloudflare Workersから静的ファイルを配信する

Cloudflare Workersには Static Assetsという静的なコンテンツを配信するための機能が用意されています。これを利用することで、Reactなどで作られたSPA ( Single Page Application )をWorkersへデプロイすることができます。Cloudflare PagesはWorkersへの移行が推奨されている様子で、Pagesを利用していたユーザー向けの受け口として作られた機能・・・なのかもしれません。

この機能の特徴は、通常のWorkersと一緒にデプロイできることです。そのため、静的なページとWorkersを利用したAPIを１つのWorkersプロジェクトとしてデプロイできます。

ディレクトリ構成の例

今回は次のような構成にしました。npm create viteでReactアプリをセットアップしたのち、Honoを追加しています。

example-app/
├── backend/         # Hono/Cloudflare Workers (API)
│   ├── src/
│   │   └── worker.ts
│   └── package.json
├── src/             # フロントエンド（React等）
├── public/          # 静的アセット
├── dist/            # フロントエンドビルド出力
├── index.html
├── package.json     # フロントエンド用
├── vite.config.ts
├── wrangler.jsonc   # Cloudflare Workers設定
└── ...

Honoアプリは backend/src/worker.ts をエントリポイントとしていますが、それ以外は至って普通の Honoアプリとして開発しました。

import { Hono } from 'hono';
const app = new Hono();
app.get('/api/hello', (c) => c.json({ message: 'Hello from Hono API!' }));
export default app;

wrangler.jsonc の設定

デプロイに関する設定などは、wrangler.jsoncで行います。ここではmainにHonoアプリのエントリポイント、assets/directoryにビルド後のReactアプリがあるディレクトリパスを指定します。

{
  "name": "example-app",
  "main": "./backend/src/worker.ts",
  "compatibility_date": "2025-04-01",
  "assets": {
    "directory": "./dist/"
  }
}

開発時は、ViteのProxyを活用する

ローカル開発では、API サーバーは cd backend && npx wrangler dev で起動します。フロントエンドはルートで npm run dev を実行します。デプロイ後は同一ドメインから配信されるので、ViteのProxyを使って相対パスで使えるようにしておきました。

export default defineConfig({
  // ...他設定
  server: {
    proxy: {
      '/api': 'http://localhost:8787'
    }
  }
});

これでフロントエンドから /api で始まるリクエストは API サーバー（wrangler dev）に転送されます。

注意したほうがいい点

静的ファイル配信は Cloudflare Workers の assets.directory で自動化されます。API と SPA の URL 空間が衝突しないよう、API は /api/ で始めるなど、Reactアプリ側で誤って利用しないようなパスを設けておくほうが安全に感じます。

まとめ

React SPA と Hono API を1つの Cloudflare Workers プロジェクトで統合運用できます。開発時は Vite の proxy で API 連携し、本番は Workers で一体配信するという流れになります。

Tag: プロキシ設定

React SPA + Hono API を Cloudflare Workers でまとめて開発・デプロイする