Vike 拡張の vike-photon ↗ を使うと、Vike ↗ アプリを Cloudflare にデプロイできます。
アプリ種別（SSR / SPA / SSG）はすべて対応しています。
Vike検出済み
生成された設定
wrangler.jsonc
main:dist/server/index.js
wrangler.jsonc
assets:directory: dist/client
wrangler.jsonc
compatibility_flags:nodejs_compat
wrangler.jsonc
observability:enabled: true
Workersデプロイ済み
Wrangler が設定を自動で処理します
Vike ↗ は、高度なアプリケーション向けの Next.js / Nuxt の代替です。モジュール構成により、高い柔軟性と安定性を備えています。
vike.dev/new ↗ で、vike-photon と @photonjs/cloudflare を使う新しい Vike アプリのひな形を作れます。
-
npm i wrangler vike-photon @photonjs/cloudflareyarn add wrangler vike-photon @photonjs/cloudflarepnpm add wrangler vike-photon @photonjs/cloudflarebun add wrangler vike-photon @photonjs/cloudflare -
pages/+config.tsdiff import type { Config } from 'vike/types' + import vikePhoton from 'vike-photon/config' export default { + extends: [vikePhoton] } satisfies Config -
package.jsondiff { "scripts": { "dev": "vike dev", + "preview": "vike build && vike preview", + "deploy": "vike build && wrangler deploy" } }wrangler.jsoncdiff + { + "$schema": "node_modules/wrangler/config-schema.json", + "compatibility_date": "2025-08-06", + "name": "my-vike-cloudflare-app", + "main": "virtual:photon:cloudflare:server-entry", + // Only required if your app depends a Node.js API + "compatibility_flags": ["nodejs_compat"] + } -
.gitignorediff + .wrangler/ -
（任意） デフォルトでは、Photon は SSR などの基本機能に対応した組み込みサーバーを使います。ファイルアップロード ↗ や API ルート ↗ など、追加のサーバー機能が必要な場合は、独自サーバーを作成 ↗ します。
D1 や KV などの Cloudflare API にアクセスするには、cloudflare:workers からインポートした env オブジェクト経由で使える バインディング を使います。
import { env } from 'cloudflare:workers'
// Key-value store
env.KV.get('my-key')
// Environment variable
env.LOG_LEVEL
// ...Cloudflare D1 の利用例:
npm create vike@latest -- --react --hono --drizzle --cloudflareyarn create vike --react --hono --drizzle --cloudflarepnpm create vike@latest --react --hono --drizzle --cloudflareまたは vike.dev/new ↗ で、ORM 付きの
Cloudflareを選びます。
TypeScript を使う場合は、Cloudflare の設定を変えるたびに wrangler types を実行し、worker-configuration.d.ts ファイルを更新します。
npx wrangler typesyarn wrangler typespnpm wrangler typesその後、コミットします。
git commit -am "update cloudflare types"TypeScript がこのファイルを読み込むようにします。
{
"compilerOptions": {
+ "types": ["./worker-configuration.d.ts"]
}
}あわせて参照: Cloudflare Workers > TypeScript.