INTEGRITY Dokumentace

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

Vike

Můžete nasadit svůj Vike ↗ aplikaci na Cloudflare pomocí rozšíření Vike vike-photon ↗.

Podporovány jsou všechny typy aplikací (SSR/SPA/SSG).

VikeRozpoznáno
Konektor: Framework to Config
položky konfigurace
Vygenerovaná konfigurace
wrangler.jsonc
main:dist/server/index.js
wrangler.jsonc
assets:adresář: dist/client
wrangler.jsonc
compatibility_flags:nodejs_compat
wrangler.jsonc
observabilita:enabled: true
Konektor: Config to Workers
Workers uzlu
WorkersNasazeno
Ukazatel stavu
Wrangler zpracovává konfiguraci automaticky

Co je Vike?

Vike ↗ je alternativa k Next.js/Nuxt pro pokročilé aplikace, postavená na modulární architektuře, která přináší nebývalou flexibilitu a stabilitu.

Nová aplikace

Použijte vike.dev/new ↗ pro vytvoření nové aplikace Vike, která používá vike-photon hodnotou @photonjs/cloudflare.

Přidat do existující aplikace

  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. (Volitelné) Ve výchozím nastavení Photon používá vestavěný server, který podporuje základní funkce jako SSR. Pokud potřebujete další funkce serveru (např. nahrávání souborů ↗ nebo Trasy API ↗), poté vytvořte si vlastní server ↗.

Rozhraní Cloudflare API (bindings)

Pro přístup k rozhraním Cloudflare API (například D1 a KV), použijte vazby které jsou dostupné prostřednictvím env objekt importováno z cloudflare:workers.

import { env } from 'cloudflare:workers'
// Key-value store
env.KV.get('my-key')
// Environment variable
env.LOG_LEVEL
// ...

Příklad použití Cloudflare D1:

npm create vike@latest -- --react --hono --drizzle --cloudflare

Nebo přejděte na vike.dev/new ↗ a vyberte Cloudflare s ORM.

TypeScript

Pokud používáte TypeScript, spusťte wrangler types kdykoli změníte konfiguraci Cloudflare, aby se aktualizoval worker-configuration.d.ts .

npx wrangler types

Poté proveďte commit:

git commit -am "update cloudflare types"

Ujistěte se, že TypeScript tento soubor načítá:

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

Viz také: Cloudflare Workers > TypeScript.

Viz také