Cloudflare Workers + Vite

@cloudflare/vite-plugin を使うと、Vite と Cloudflare Workers でフルスタックアプリケーションを構築できます。 この構成では、高速な Vite 開発サーバー、Hono の JSX レンダラーによるサーバーサイドレンダリング、Vite でバンドルされるクライアント側スクリプトを利用でき、すべて Cloudflare Workers 上で動作します。

Cloudflare で新しいフルスタックプロジェクトを開始する際の推奨方法です。

1. セットアップ

Cloudflare Workers と Vite 向けのスターターテンプレートがあります。 「create-hono」コマンドでプロジェクトを開始します。 この例では cloudflare-workers+vite テンプレートを選択します。

npm

npm create hono@latest my-app

yarn

yarn create hono my-app

pnpm

pnpm create hono my-app

bun

bun create hono@latest my-app

deno

deno init --npm hono my-app

my-app に移動して依存関係をインストールします。

npm

cd my-app
npm i

yarn

cd my-app
yarn

pnpm

cd my-app
pnpm i

bun

cd my-app
bun i

基本的なディレクトリ構成は次のとおりです。

./
├── package.json
├── public // Put your static files here.
├── src
│   ├── index.tsx // The entry point for server-side.
│   ├── renderer.tsx
│   └── style.css
├── tsconfig.json
├── vite.config.ts
└── wrangler.jsonc

vite.config.ts では、SSR のために Cloudflare プラグインと vite-ssr-components を組み合わせます。

import { cloudflare } from '@cloudflare/vite-plugin'
import { defineConfig } from 'vite'
import ssrPlugin from 'vite-ssr-components/plugin'

export default defineConfig({
  plugins: [cloudflare(), ssrPlugin()],
})

2. Hello World

次のように src/index.tsx を編集します。

import { Hono } from 'hono'
import { renderer } from './renderer'

const app = new Hono()

app.use(renderer)

app.get('/', (c) => {
  return c.render(<h1>Hello, Cloudflare Workers!</h1>)
})

export default app

renderer は src/renderer.tsx で定義します。Hono の JSX レンダラーミドルウェアと、Vite のクライアントとアセットを連携させる vite-ssr-components を組み合わせます。

import { jsxRenderer } from 'hono/jsx-renderer'
import { Link, ViteClient } from 'vite-ssr-components/hono'

export const renderer = jsxRenderer(({ children }) => {
  return (
    <html>
      <head>
        <ViteClient />
        <Link href='/src/style.css' rel='stylesheet' />
      </head>
      <body>{children}</body>
    </html>
  )
})

3. 実行

開発サーバーをローカルで起動し、Web ブラウザーで http://localhost:5173 にアクセスします。

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

bun

bun run dev

4. デプロイ

Cloudflare アカウントがあれば、Cloudflare にデプロイできます。deploy スクリプトは Vite でビルドした後、Wrangler で公開します。

npm

npm run deploy

yarn

yarn deploy

pnpm

pnpm run deploy

bun

bun run deploy

バインディング

変数、KV、D1 などの Cloudflare バインディングを利用できます。 バインディングは wrangler.jsonc で設定します。たとえば、MY_NAME という変数を追加するには次のようにします。

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "my-app",
  "compatibility_date": "2025-08-03",
  "main": "./src/index.tsx",
  "vars": {
    "MY_NAME": "Hono",
  },
}

バインディングの型を生成するには、cf-typegen スクリプトを実行します。

npm

npm run cf-typegen

yarn

yarn cf-typegen

pnpm

pnpm run cf-typegen

bun

bun run cf-typegen

CloudflareBindings インターフェースが生成されます。これを Hono の型引数として渡します。

const app = new Hono<{ Bindings: CloudflareBindings }>()

続いて、c.env を通じてバインディングにアクセスします。

app.get('/', (c) => {
  return c.render(<h1>Hello! {c.env.MY_NAME}</h1>)
})

クライアント側

vite-ssr-components を使うと、Vite を通じてクライアント側のスクリプトを読み込めます。 クライアントのエントリーポイントを指定する Script コンポーネントを追加すると、開発環境と本番環境の両方で Vite がバンドルを処理します。

import { jsxRenderer } from 'hono/jsx-renderer'
import { Script, ViteClient } from 'vite-ssr-components/hono'

export const renderer = jsxRenderer(({ children }) => {
  return (
    <html>
      <head>
        <ViteClient />
        <Script src='/src/client.ts' />
      </head>
      <body>{children}</body>
    </html>
  )
})

詳しくは @cloudflare/vite-plugin のドキュメントと vite-ssr-components を参照してください。