Cloudflare Workers Assets: Ersetzen Sie Vercel für $0

Revolution der Cloudflare-Architektur: Die nahtlose Integration von Pages und Workers

In der Vergangenheit musste man sich im Cloudflare-Ökosystem zwischen zwei komplizierten Optionen entscheiden, wenn man eine Full-Stack-Webanwendung (React, Vue, Astro, Svelte) und eine Serverless-Backend-API aufbauen wollte:

1. Cloudflare Pages + Functions: Praktisch für das Servieren statischer Frontend-Dateien, aber die Routing-Regeln waren über das functions/-Verzeichnis und _routes.json-Wildcard-Dateien fragmentiert, was die Handhabung komplexer Middleware (Auth, GeoIP) erschwerte.
2. Cloudflare Workers: Bietet leistungsstarkes V8-Edge-Computing, aber das Bereitstellen statischer Assets (HTML/CSS/JS/WebP) erforderte das Speichern von textcodierten Dateien in KV oder das Einbinden eines separaten R2-Buckets.

[Die frühere fragmentierte duale Architektur von Cloudflare]
Frontend (Cloudflare Pages)  <--- _routes.json Fragmentierung --->  Backend-API (Cloudflare Workers)
         * Separate Verwaltung von 2 Projekten                       * Kein direktes Ausliefern statischer Assets
         * Einschränkungen bei Edge-Middleware                       * Umweg über KV/R2 erforderlich

Die Ende 2024 eingeführte und 2025/2026 zum offiziellen Standard (GA) erhobene Funktion Cloudflare Workers Assets (assets binding) beendet diese hartnäckige Fragmentierung vollständig.

Mit nur einer Zeile "assets": { "directory": "./dist", "binding": "ASSETS" } in der Projektdatei wrangler.jsonc arbeiten statische Websites (Vite/Astro/Next.js) und Serverless-Edge-APIs (Hono.js) in einer einzigen V8-Edge-Laufzeitumgebung mit einer Latenz von unter 0,1 ms perfekt zusammen.

In diesem Leitfaden behandeln wir ausführlich den Integrationsmechanismus von Workers Assets, die neueste wrangler.jsonc-Konfiguration, die Edge-Intercept-Pipeline mit env.ASSETS.fetch(request), Edge-JWT-Authentifizierung & GeoIP-Weiterleitung sowie Benchmarks für die Migration von Vercel/Netlify.

Der Kernmechanismus von Cloudflare Workers Assets

Workers Assets verbindet statische Dateien und dynamische Worker-Skripte in einer einzigen Edge-Pipeline.

+-----------------------------------------------------------------------------------+
| Cloudflare Workers Assets Hybrid-Streaming-Pipeline                               |
+-----------------------------------------------------------------------------------+

[HTTP-Anfrage des Benutzers: https://effidev.dev/dashboard]
                       |
                       v
     [Cloudflare V8 Edge Worker (0.1ms Eintritt)]
                       |
        +--------------+--------------+
        |                             |
 (A) Edge-Middleware-Logik          (B) Statische Asset-Anfrage (HTML/CSS/JS)
   - JWT-Token-Validierung            - env.ASSETS.fetch(request)
   - GeoIP-länderspezifischer          - Automatische Caching im Cloudflare Edge CDN (TTFB < 5ms)
     301-Redirect                     - SPA 404-Fallback index.html Injektion
   - /api/v1/* Edge-API-Ausführung    |
        |                             |
        +--------------+--------------+
                       |
                       v
         [Rückgabe einer fehlerfreien Antwort an den Browser in 0.1ms]

1. Ausliefern statischer Dateien: Wenn ein statisches Asset vorhanden ist, das mit dem angeforderten URL-Pfad übereinstimmt (z. B. /assets/app.js, /hero.webp), wird es im globalen Cloudflare Edge CDN-Netzwerk in 0 ms im direkten Durchgang extrem schnell ausgeliefert.
2. Edge-Middleware-Abfangung (Edge Interceptor): Entwickler können vor oder nach dem Aufruf der Methode env.ASSETS.fetch(request) beliebigen TypeScript-Code (Authentifizierungsprüfung, A/B-Test-Cookie-Injektion, dynamisches HTML-Rewriting) in nur 0,1 ms ausführen.

Schritt 1: Neueste Assets-Deklaration in wrangler.jsonc

Deklarieren Sie das Verzeichnis für statische Artefakte und das ASSETS-Binding in der Konfigurationsdatei wrangler.jsonc Ihres Projekts.

// wrangler.jsonc
{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "fullstack-edge-app",
  "main": "src/index.ts",
  "compatibility_date": "2026-08-01",
  "compatibility_flags": ["nodejs_compat"],

  // GA Workers Assets-Deklaration für 2025/2026
  "assets": {
    "directory": "./dist",       // Build-Ausgabe-Pfad für Vite / Astro / Next.js
    "binding": "ASSETS",         // Binding-Name für den Zugriff auf env.ASSETS im Worker-Code
    "not_found_handling": "single-page-app" // SPA-Routing-Unterstützung (Serviert index.html bei 404)
  },

  // Zusätzliche Bindings (D1 DB, KV, R2 Integration möglich)
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "production_db",
      "database_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
    }
  ]
}

Schritt 2: Implementierung des Hono.js Edge-Interceptors & Hybrid-Routers

Schreiben Sie praxisnahen Code in src/index.ts, der die Bereitstellung statischer Assets und das Backend-API-Routing harmonisch verarbeitet.

src/index.ts

// src/index.ts
import { Hono } from "hono";

type Env = {
  Bindings: {
    ASSETS: Fetcher; // Type für Workers Assets Binding
    DB: D1Database;
  };
};

const app = new Hono<Env>();

// -------------------------------------------------------------------
// 1. Edge-Backend-API-Routen (/api/*)
// -------------------------------------------------------------------
app.get("/api/v1/user/profile", async (c) => {
  const authHeader = c.req.header("authorization");
  if (!authHeader) {
    return c.json({ error: "Unauthorized" }, 401);
  }

  // D1-Datenbankabfrage
  const { results } = await c.env.DB.prepare(
    "SELECT id, email, name FROM users WHERE token = ?"
  ).bind(authHeader).all();

  return c.json({ user: results[0] ?? null });
});

// -------------------------------------------------------------------
// 2. Edge-Geolocation (GeoIP) basierte 301-Redirect-Middleware
// -------------------------------------------------------------------
app.use("/landing", async (c, next) => {
  // Ländercode des Zugriffs aus Cloudflare Edge-Headern extrahieren (KR, US, JP etc.)
  const country = c.req.header("cf-ipcountry") || "US";

  if (country === "KR" && !c.req.url.includes("/kr")) {
    return c.redirect("/landing/kr", 301);
  }

  await next();
});

// -------------------------------------------------------------------
// 3. Geschützter Bereich (/dashboard/*) Edge-JWT-Auth-Interceptor
// -------------------------------------------------------------------
app.use("/dashboard/*", async (c, next) => {
  const cookie = c.req.header("cookie") || "";
  const hasAuthToken = cookie.includes("session_token=");

  // Wenn ein nicht angemeldeter Benutzer versucht, auf die statische Dashboard-HTML zuzugreifen, sofort zur Login-Seite umleiten
  if (!hasAuthToken) {
    return c.redirect("/login", 302);
  }

  await next();
});

// -------------------------------------------------------------------
// 4. Statischer Asset Fallback-Service (env.ASSETS.fetch)
// -------------------------------------------------------------------
app.all("*", async (c) => {
  // Alle Anfragen, die nicht mit /api übereinstimmen, an das statische Assets-Binding weiterleiten
  const response = await c.env.ASSETS.fetch(c.req.raw);

  // Bei Bedarf Sicherheitsheader in die Antwort injizieren
  const newHeaders = new Headers(response.headers);
  newHeaders.set("X-Frame-Options", "DENY");
  newHeaders.set("X-Content-Type-Options", "nosniff");
  newHeaders.set("Referrer-Policy", "strict-origin-when-cross-origin");

  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: newHeaders,
  });
});

export default app;

Schritt 3: Build- und Produktions-Deployment-Pipeline

Erstellen Sie die Frontend-Build-Artefakte (dist) und führen Sie das Deployment in nur 1 Sekunde mit der Cloudflare Wrangler CLI aus.

package.json-Skriptkonfiguration

{
  "name": "fullstack-edge-app",
  "private": true,
  "scripts": {
    "build:frontend": "vite build",
    "build": "npm run build:frontend",
    "deploy": "npm run build && wrangler deploy",
    "dev": "wrangler dev"
  }
}

Deployment ausführen und Logs überprüfen

# Build und globales Deployment ausführen
npm run deploy

Beim Ausführen von wrangler deploy lädt die Wrangler CLI die statischen Dateien aus dem Ordner ./dist in den Cloudflare Edge-Speicher hoch, bündelt sie zusammen mit dem Worker-Skript als eine einziger Release-Version und aktiviert sie in 1 Sekunde in 330 Edge-Rechenzentren weltweit.

Benchmark: Vercel/Netlify vs. Cloudflare Workers Assets – Kosten und Leistung

Dies sind die Kosten- und Leistungsindikatoren der jeweiligen Plattformen beim Betrieb derselben Full-Stack-Web-App (5 Millionen monatliche Besucher, 20 Millionen API-Aufrufe).

Kosten- und Leistungsvergleichsbericht nach Plattform

Fazit: Der neue Standard für Serverless Full-Stack

Cloudflare Workers Assets hat die frühere künstliche Trennung “statische Websites mit Pages, Edge-APIs mit Workers” endlich komplett aufgehoben.

Die Vorteile der Einführung von Workers Assets (env.ASSETS) sind überwältigend:

1. 96% Kostenersparnis im Vergleich zu Vercel / Netlify: Unbegrenzte Bereitstellung statischer Dateien ohne unerwartete Bandbreitenkosten (Egress Fees).
2. Maximierte Entwicklerproduktivität: Steuerung von Frontend-Builds und Edge-Backend-APIs über eine einzige wrangler.jsonc-Datei.
3. Leistungsstarke Edge-Middleware: Ausführung von JWT-Prüfungen, GeoIP-Weiterleitungen und dynamischer HTML-Injektion vor und nach env.ASSETS.fetch(request) in nur 0,1 ms.
4. Schnellstes globales TTFB: Sofortiges Laden von Websites mit minimaler Latenz von unter 5 ms in 330 Edge-Rechenzentren weltweit.

Migrieren Sie Ihre bestehenden Projekte noch heute zu Cloudflare Workers Assets und erleben Sie eine Edge-Architektur mit $0 Kosten und 0,1 ms Leistung.

Ähnlicher Artikel: Weitere Details zur Erstellung einer Edge-Authentifizierungsarchitektur finden Sie in unserem Leitfaden zum Aufbau einer Authentifizierung für $0 mit Cloudflare Workers + Passkey (WebAuthn) ohne Auth0/Clerk.