INTEGRITY Документация

← Cloudflare Workers / workers / framework-guides / web-apps

Vike

Можно развернуть ваш Vike ↗ приложение в Cloudflare с помощью расширения Vike vike-photon ↗.

Поддерживаются все типы приложений (SSR/SPA/SSG).

узел Framework
VikeОбнаружено
Коннектор: Framework to Config
элементы конфигурации
Сгенерированная конфигурация
wrangler.jsonc
main:dist/server/index.js
wrangler.jsonc
assets:directory: dist/client
wrangler.jsonc
compatibility_flags:nodejs_compat
wrangler.jsonc
наблюдаемость:enabled: true
Коннектор: Config to Workers
WorkersРазвернуто
Индикатор статуса
Wrangler настраивает конфигурацию автоматически

Что такое Vike?

Vike ↗ это альтернатива Next.js/Nuxt для сложных приложений, построенная на модульной архитектуре, обеспечивающей исключительную гибкость и стабильность.

Новое приложение

Используйте vike.dev/new ↗ чтобы создать каркас нового приложения Vike, использующего vike-photon с @photonjs/cloudflare.

Добавить в существующее приложение

  1. npm i wrangler vike-photon @photonjs/cloudflare
  2. pages/+config.ts
      import type { Config } from 'vike/types'
+ import vikePhoton from 'vike-photon/config'

  export default {
+   extends: [vikePhoton]
  } satisfies Config
  3. package.json
      {
    "scripts": {
      "dev": "vike dev",
+     "preview": "vike build && vike preview",
+     "deploy": "vike build && wrangler deploy"
    }
  }
    wrangler.jsonc
    + {
+   "$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"]
+ }
  4. .gitignore
    + .wrangler/

  5. (Необязательно) По умолчанию Photon использует встроенный сервер, который поддерживает базовые функции, например SSR. Если требуются дополнительные серверные функции (например, загрузка файлов ↗ или Маршруты API ↗), затем создайте собственный сервер ↗.

API Cloudflare (привязки)

Чтобы получить доступ к API Cloudflare (например, D1 и KV), используйте привязки которые доступны через env объект импортируется из cloudflare:workers.

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 --cloudflare

Или перейдите к vike.dev/new ↗ и выберите Cloudflare с ORM.

TypeScript

Если вы используете TypeScript, выполните wrangler types каждый раз, когда вы изменяете конфигурацию Cloudflare, чтобы обновить worker-configuration.d.ts файл.

npx wrangler types

Затем закоммитьте изменения:

git commit -am "update cloudflare types"

Убедитесь, что TypeScript загружает его:

tsconfig.json
  {
    "compilerOptions": {
+     "types": ["./worker-configuration.d.ts"]
   }
  }

См. также: Cloudflare Workers > TypeScript.

См. также