Cloudflare Pages – Deployment Guide

Status: Alpha (v1.9.0) · Adapter: @sveltejs/adapter-cloudflare · Deploy: Direct Upload (kein GitHub)

Voraussetzungen

Was	Version
Node.js	≥ 18 (CF Pages Standard)
`@sveltejs/adapter-cloudflare`	^4.9.0
Wrangler	4.84.1+ (`npx wrangler` oder global)
Cloudflare Account	Pages + Workers aktiviert

Direct Upload via `deploy.sh` (Produktiv-Workflow)

Kein GitHub-Webhook nötig – deploy.sh übernimmt Build + Upload vollautomatisch.

Ablauf

# Aus dem Workspace-Root:
cd /Users/gm/Documents/Visual_Code_SHARED/UdoBeta
zsh deploy.sh

Was deploy.sh macht:

npm run build (sync-docs + vite build)
Videos >24 MB aus .svelte-kit/cloudflare löschen (CF Pages 25 MB Limit)
wrangler pages deploy .svelte-kit/cloudflare --project-name=boot-grasten

API-Token

# .env.deploy (nicht committed, liegt im Workspace-Root):
CLOUDFLARE_API_TOKEN=<token>
CLOUDFLARE_ACCOUNT_ID=edeaf72f08c3145711f257893d9ddab1

deploy.sh sourced .env.deploy automatisch.

Wichtig: Pfad-Konvention

# deploy.sh cd-t nach $FRONTEND_DIR zuerst:
cd "$FRONTEND_DIR"   # = UdoBeta/frontend/
wrangler pages deploy .svelte-kit/cloudflare   # relativer Pfad!
# NICHT: $FRONTEND_DIR/.svelte-kit/cloudflare  → doppelter Pfad = Fehler

nodejs_compat Flag

Das nodejs_compat Compatibility Flag ist über die CF API aktiviert (nicht in wrangler.toml).
Beim Erstellen eines neuen CF Pages Projekts muss es manuell aktiviert werden:

CF Dashboard → Pages → boot-grasten → Settings → Functions → Compatibility flags → nodejs_compat

Setup: Cloudflare Pages (Ersteinrichtung)

Manuell via Dashboard (einmalig)

Cloudflare Dashboard → Pages → „Create a project" → „Direct Upload"
Projekt-Name: boot-grasten
Ersten Upload hochladen (beliebiger Build-Output zum Initialisieren)
nodejs_compat Flag setzen (siehe oben)
Ab dann: zsh deploy.sh für alle weiteren Deploys

Environment Variables (für Produktion)

Keine zwingend erforderlichen Variablen für Alpha (Mock-Mode).
Später für Produktion in CF Dashboard → Settings → Environment Variables:

MS_GRAPH_TENANT_ID=...
MS_GRAPH_CLIENT_ID=...
MS_GRAPH_CLIENT_SECRET=...
USE_MOCK=false

Videos & Mediendateien

CF Pages hat ein 25 MB Datei-Limit. Videos werden daher:

Mit scripts/cf-videos.sh zu VP9 WebM encodiert (<20 MB)
Von deploy.sh automatisch aus dem Build-Output gelöscht (DNG, MOV, MP4 >5 MB)
Alternativ: Cloudflare Stream für große Videos (kostenpflichtig)

# Videos neu encodieren (bei neuen Rohdateien in _bilderundvideos/):
zsh scripts/cf-videos.sh

Architektur auf CF Pages

Cloudflare Edge (200+ PoPs)
  └── CF Pages (Static Assets: HTML, CSS, JS, Fonts)
        └── CF Workers (SSR + API-Routes)
              ├── GET /api/gallery   → statisch aus bundle (gallery.json)
              ├── /booking           → SSR Svelte
              └── alle anderen       → SSR Svelte

Nicht unterstützt auf CF (Alpha)

POST /api/gallery (Admin-Schreiben) → 501-Response
→ Workaround: lokaler Dev-Server für Admin-Operationen

DSGVO & Datenschutz

!!! success "Kein Cookie-Banner nötig" - Keine Analytics (kein GA, kein Plausible, kein Matomo) - Keine Tracking-Cookies gesetzt - localStorage nur für Sprach-Präferenz (locale) → technisch notwendig,
keine Einwilligung nach DSGVO/TDDDG erforderlich - Fonts lokal gebundelt (@fontsource/inter) – kein Google-Fonts-DNS-Request - CF-eigene Logs: Cloudflare loggt Zugriffe server-seitig (standard Hoster-Praxis)
→ Datenschutzerklärung muss CF als Auftragsverarbeiter nennen (Art. 28 DSGVO)

Datenschutzerklärung Mindestinhalt

Hoster: Cloudflare Inc., 101 Townsend St, San Francisco, CA 94107
Verarbeitungszweck: Website-Auslieferung, DDoS-Schutz
Rechtsgrundlage: Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse)
AVV mit Cloudflare: https://www.cloudflare.com/dpa/

Lokaler Test des CF-Builds

cd frontend
npm run build
npx wrangler pages dev .svelte-kit/cloudflare

Deployed URLs

	URL
Produktion	https://boot-grasten.pages.dev
letzter Deploy	https://`<hash>`.boot-grasten.pages.dev
Account-ID	`edeaf72f08c3145711f257893d9ddab1`