Cloudflare Pages ist ab sofort Full-Stack

Als wir im April ankündigten, das Cloudflare Pages allgemein verfügbar ist, versprachen wir Ihnen, dass dies erst der Anfang sein würde. Die Entwicklung unserer Plattform begann mit der Unterstützung statischer Websites mit kleinen dynamischen Funktionen wie dem Setzen von Weiterleitungen und benutzerdefinierten Headers. Aber wir wollten Ihnen und Ihren Teams noch mehr Möglichkeiten bieten, das Unvorstellbare zu schaffen. Wir stellten uns eine Zukunft vor, in der Ihre gesamte Anwendung – Frontend, APIs, Speicher, Daten – mit einem einzigen Commit bereitgestellt werden kann, sich leicht im Staging testen lässt und einen einzigen Merge für die Bereitstellung in der Produktion erfordert. Anlässlich unserer Full Stack Week stellen wir Ihnen nun die Tools zur Verfügung, mit denen Sie genau das erreichen können.

Willkommen in der Zukunft! Wir freuen uns, Ihnen mitteilen zu können, dass Pages jetzt mithilfe von Cloudflare Workers zu einer Full-Stack-Plattform geworden ist.

Das Ganze funktioniert genau so, wie Sie es von Pages gewohnt sind: Schreiben Sie Ihren Code, übermitteln Sie ihn an Ihren Git-Provider (wir unterstützen jetzt GitLab) und wir veröffentlichen Ihre gesamte Website für Sie. Der einzige Unterschied besteht darin, dass nicht nur Ihr Frontend, sondern auch Ihr Backend Cloudflare Workers zur Bereitstellung serverloser Funktionen verwendet.

Cloudflare Workers bietet eine serverlose Ausführungsumgebung, die es Ihnen ermöglicht, völlig neue Anwendungen zu erstellen oder bestehende Anwendungen zu erweitern, ohne die Infrastruktur zu konfigurieren oder zu warten. Es war auch bisher schon möglich, Workers mit einem Pages-Projekt zu verbinden –durch die Installation von Wrangler und die manuelle Bereitstellung eines Workers, indem Sie Ihre App sowohl in Pages als auch in Workers schreiben. Aber wir wollten uns nicht aus das „Mögliche“ beschränken. Uns schwebte eine Lösung vor, deren Verwendung für Sie so selbstverständlich ist, dass Sie nicht zweimal darüber nachdenken müssen, wie Sie Ihrer Website dynamische Funktionen hinzufügen.

Durch die Verwendung der Dateisystemkonvention Ihres Repositorys und den Export einer oder mehrerer Funktionshandler kann Pages für Sie Workers zur Bereitstellung serverloser Funktionen einsetzen. Fügen Sie einfach ein Verzeichnis namens ./functions im Stammverzeichnis Ihres Projekts hinzu und exportieren Sie innerhalb einer JavaScript- oder TypeScript-Datei einen Funktionshandler. Nehmen wir zum Beispiel an, dass sich in Ihrem ./functions-Verzeichnis eine Datei namens hello.js mit folgendem Inhalt befindet:

Wenn Sie den Befehl git commit ausführen, wird ein neuer Pages-Build ausgelöst, um Ihre dynamische Website bereitzustellen! Pages geht während der Build-Pipeline Ihr Verzeichnis durch und ordnet die Dateinamen den URLs entsprechend Ihrer Repository-Struktur zu.

// GET requests to /filename would return "Hello, world!"
export const onRequestGet = () => {
  return new Response("Hello, world!")
}

// POST requests to /filename with a JSON-encoded body would return "Hello, <name>!"
export const onRequestPost = async ({ request }) => {
  const { name } = await request.json()
  return new Response(`Hello, ${name}!`)
}

Im Hintergrund werden Worker von Pages generiert, die Ihr gesamtes Routing und Ihre Funktionalität aus der Quelle umfassen. Die Funktionen unterstützten stark verschachtelte Routen, Wildcard-Matching, Middleware für Dinge wie Authentifizierung und Fehlerbehandlung und vieles mehr! Um all diese Funktionen zu demonstrieren, stellen wir in einem Blog-Beitrag eine Full-Stack-Anwendung im Detail vor.

Auch wenn Ihre Website immer komplexer wird – mit der neuen Full-Stack-Funktionalität von Pages müssen Sie sich als Entwickler keine Sorgen machen. Sie können dem vertrauten und geschätzten Workflow folgen, während Sie Ihrer Website noch mehr Tiefe verleihen.

Auf die gleiche Weise, wie wir die Builds und Veröffentlichungen Ihrer statischen Websites gehandhabt haben – mit git commit und git push – stellen wir nun auch Ihre Funktionen automatisch für Sie bereit. Solange Ihr Verzeichnis die richtige Struktur aufweist, kann Pages Ihre Funktionen identifizieren und in unserem Netzwerk mit Ihrer Website bereitstellen.

Wenn Sie Ihre Worker zu Pages bringen, sind Bindungen ein wichtiger Teil dessen, was Ihre Anwendung zu einer Full-Stack-Anwendung macht. Wir freuen uns sehr darüber, dass wir alle Bindungen, die Sie bisher mit regulären Workers verwendet haben, nun auch in Pages anbieten können!

• KV-Namespace: unsere serverlose und global zugängliche Schlüssel-Werte-Datenbank. Innerhalb von Pages ist eine Integration mit jedem der KV-Namespaces möglich, die Sie in Ihrem Workers-Dashboard für Ihr Pages-Projekt festlegen.

• Durable Object-Namespace: unsere äußerst konsistente Koordinationsprimitive, die die Verbindung von WebSockets, die Zustandsverwaltung und die Erstellung ganzer Anwendungen zu einem Kinderspiel macht. Analog zu KV können Sie Ihre Namespaces im Workers-Dashboard festlegen und aus dieser Liste in der Pages-Benutzeroberfläche Ihre Wahl treffen.

• R2 (bald verfügbar!): unsere S3-kompatible Objektspeicherlösung, die die Egress-Gebühren auf Null reduziert.

• Umgebungsvariable: ein eingespeister Wert, auf den Ihre Funktionen zugreifen können und der im Klartext gespeichert ist. Sie können Ihre Umgebungsvariablen sowohl für Ihre Produktions- als auch für Ihre Vorschauumgebung in der Entwicklungs- oder Ausführungsphase direkt im Pages-Interface festlegen.

• Secret (bald verfügbar!): eine verschlüsselte Umgebungsvariable, die weder von Wrangler noch von Dashboard-Schnittstellen eingesehen werden kann. Secrets sind eine großartige Lösung für vertrauliche Daten wie Passwörter und API-Tokens.

Bei der Bereitstellung Ihrer Serverless-Funktionen können Sie weiterhin die einfache Zusammenarbeit und das Testen nutzen, wie Sie es bisher getan haben. Bevor Sie Ihr Projekt in die Produktion überführen, können Sie es einfach in einer Testumgebung veröffentlichen, um Ihre Änderungen zu testen. Sogar bei Ihren Funktionen können Sie mit Pages einen Versionsverlauf für jeden Commit mit einer eindeutigen URL aufbewahren. So lässt sich ganz einfach Feedback einholen, sei es von anderen Entwicklern, Projektmanagern, Designern oder Marketingverantwortlichen! Sie können auch die gleichen unbegrenzten Staging-Privilegien nutzen wie bei statischen Websites, mit einer einheitlichen URL für die neuesten Änderungen.

Uns ist aber bewusst, dass es bei schnellem Iterieren mühsam sein kann, während des Entwickelns und Implementierens jede kleine Änderung abzubilden. Dank der neuesten Version unseres Wrangler-CLI können Sie jetzt komplette Pages-Anwendungen entwickeln. Mit Hilfe von Miniflare können Sie Ihre gesamte Anwendung lokal ausführen, mit Unterstützung für Mocked Secrets, Umgebungsvariablen und KV (Unterstützung für Durable Objects bald verfügbar!). Setzen Sie Wrangler bei einem Verzeichnis mit statischen Assets ein oder stellen Sie eine nahtlose Verbindung zu Ihren vorhandenen Tools her:

Dies ist nur der Anfang der Integrationen von Pages mit Wrangler. Halten Sie weiter die Augen offen, denn wir werden Ihre Entwicklererfahrung weiter verbessern.

# Install wrangler v2 beta
npm install wrangler@beta

# Serve a folder of static assets
npx wrangler pages dev ./dist

# Or automatically proxy your existing tools
npx wrangler pages dev -- npx react-scripts start

Alle, die Ihren von HTTP Workers aktuell geboten werden!

Wenn Sie eine Pages-Anwendung mit Funktionen bereitstellen, kompiliert und implementiert Pages erstklassige Workers für Sie. Das bedeutet, dass es keine Funktionalitätseinbußen gibt, wenn Sie einen Worker innerhalb Ihrer Pages-Anwendung einsetzen – es gibt bloß neue Vorteile, von denen Sie profitieren können!

SvelteKit ist ein Web-Framework für die Entwicklung von Svelte-Anwendungen. Es wird vom Svelte-Team entwickelt und gewartet, was es für Nutzer von Svelte zur bevorzugten Lösung für alle ihre Anwendungsanforderungen macht. Mit SvelteKit können Benutzer Projekte mit komplexen API-Backends erstellen.

Ab heute können SvelteKit-Projekte das @sveltejs/adapter-cloudflare-Paket anhängen und konfigurieren. Das Projekt kann danach zu Pages hinzugefügt werden und ist dann bereit für seinen ersten Einsatz! Mit Pages können Sie Ihr(e) SvelteKit-Projekt(e) mit API-Endpunkten und vollständiger serverseitiger Rendering-Unterstützung bereitstellen. Es kommt noch besser: Das gesamte Projekt – einschließlich der API-Endpunkte – kann auch von den Vorteilen der Preview-Bereitstellung profitieren! Dies ist schon für sich genommen ein großer Erfolg für anspruchsvolle Projekte, die bisher auf den Workers-Adapter angewiesen waren. Werfen Sie einen Blick auf dieses Beispiel, um den SvelteKit-Adapter für Pages in Aktion zu sehen!

Sie sind nun in der Lage, jede bei Ihrem Pages-Projekt eingehende Anfrage abzufangen. Das bedeutet, dass Sie eine Worker-Logik definieren können, die eingehende URLs empfängt, und dass Ihr Worker anstelle von statischem HTML-Code neue HTML-Antworten mit dynamischen Daten rendern kann.

Zum Beispiel kann eine Anwendung mit einer Produktseite eine einzige product/[id].js-Datei definieren, die den Parameter id erhält, die Produktdaten von einer Workers KV-Bindung abruft und dann die HTML-Antwort für diese Seite generiert. Im Vergleich zu einem statischen Website-Generator ist dieser Ansatz effizienter und über einen längeren Zeitraum leichter zu warten, da Sie nicht für jedes Produkt zum Zeitpunkt der Erstellung eine statische HTML-Seite bauen müssen, die potenziell aus Hunderten oder sogar Tausenden von Seiten bestehen kann!

Wenn Sie bereits über einen einzelnen Worker verfügen und diesen direkt auf Pages übertragen möchten, um die Vorteile unserer Plattform für Entwickler zu nutzen, ermöglicht Ihnen unsere heute vorgestellte Lösung auch genau das. Ihre Entwicklung kann einen ES-Modul Worker mit dem Namen _worker.js im Ausgabeverzeichnis Ihres Projekts generieren und Ihre Git-Befehle zur Bereitstellung ausführen. Wir kümmern uns dann um den Rest! Dies kann besonders dann von Vorteil sein, wenn Sie ein Framework-Schöpfer sind oder einen komplexeren Anwendungsfall haben, der nicht unserer vorgegebenen Dateistruktur folgt.

Wir freuen uns sehr über die heutige Veröffentlichung unserer Open Beta-Version, die alle Nutzer von Cloudflare-Tarifen ohne zusätzliche Kosten ausprobieren können. Es wird zwar auch weiterhin einige Einschränkungen geben, aber wir nutzen diese Open Beta-Phase, um mehr darüber zu erfahren, wie Sie und Ihre Teams die Funktionen in Ihren Pages-Projekten einsetzen. In der Zwischenzeit ermutigen wir Sie, Ihrer Kreativität freien Lauf zu lassen und die Website zu erstellen, die Sie schon lange entwickeln wollten – ohne sich Gedanken über die Kosten machen zu müssen.

Wenn wir in wenigen Monaten die allgemeine Verfügbarkeit dieser Lösung bekannt geben, können Sie davon ausgehen, dass unsere Preise in Einklang mit den Workers Bundled Plans stehen werden – schließlich liegen diesen Angeboten jeweils Workers zugrunde!

Da wir diese Version nur als Open Beta-Version präsentieren, haben wir in den kommenden Wochen und Monaten einige äußerst spannende Dinge geplant. Wir möchten die Ihnen bereits vertraute schnelle und einfache Pages-Entwicklererfahrung verbessern, indem wir Unterstützung für integrierte Protokollierung und mehr Analysen für Ihre bereitgestellten Funktionen hinzufügen.

Darüber hinaus werden wir unseren erstklassigen Support für die nächste Generation von Frontend-Frameworks ausbauen. Wie wir mit SvelteKit gezeigt haben, ermöglicht die Fähigkeit von Pages, statischen und dynamischen Quellcode nahtlos zusammen einzusetzen, eine unschlagbare Performance für den Endbenutzer und einen hohen Komfort für die Entwickler. Wir freuen uns darauf, dies noch mehr Menschen zugänglich zu machen. Fans ähnlicher Frameworks und Technologien wie beispielsweise NextJS, NuxtJS, React Server Components, Remix, Hydrogen sollten diesen Blog für weitere Ankündigungen im Auge behalten. Oder noch besser: Schließen Sie sich uns an und bringen Sie sich ein!

Darüber hinaus wollen wir, wie schon bei SvelteKit, weitere erstklassige Integrationen in bestehende Frameworks einbauen, damit Pages das primäre Zuhause für die von Ihnen bevorzugten Frameworks werden kann. Wir arbeiten daran, NextJS, NuxtJS, React Server Components, Shopify Hydrogen und andere Lösungen nahtlos in die Entwicklung von Full-Stack-Anwendungen zu integrieren.

Außerdem bemühen wir uns, die Erstellungszeiten zu verkürzen, damit Sie sich auf die Veröffentlichung von Änderungen und die schnelle Iteration konzentrieren können – ohne Wartezeiten!

Beim Einstieg hilft Ihnen unsere Pages-Dokumentation und wenn Sie mehr darüber erfahren möchten, wie Sie Serverless-Funktionen mit Cloudflare Workers über Pages bereitstellen können, lohnt sich ein Blick in unseren Demo-Blog.

Am meisten freuen wir uns natürlich, wenn wir sehen, was Sie entwickeln! Schauen Sie in unserem Discord-Kanal vorbei und zeigen Sie uns, wie Sie Pages zur Entwicklung Ihrer Full-Stack-Applikationen nutzen.