Subscribe to receive notifications of new posts:

Peppen Sie Ihre Seiten auf Cloudflare Pages mit der allgemeinen Verfügbarkeit von Pages Functions auf

11/17/2022

6 min read
Spice up static sites on Cloudflare Pages with Page Functions

Als wir Pages im April 2021 auf den Markt brachten, wussten wir: Es beginnt etwas Magisches – ein Erlebnis, das sich einfach „genau richtig“ anfühlt. Unsere Vision war, dass Pages so einfach und reibungslos funktioniert, dass jeder Entwickler in Sekundenschnelle eine Website veröffentlichen und sie mit Hilfe des restlichen Cloudflare-Ökosystems erweitern kann.

Diese Vision wurde ein paar Monate später Wirklichkeit, als wir im November 2021 ankündigten, dass Pages eine Full-Stack-Plattform sein würde. Mit der Schaffung einer Entwicklungsplattform für statische Websites war die Geschichte von Pages noch nicht zu Ende, und da Cloudflare Workers bereits Teil unseres Ökosystems war, wussten wir: Wir sitzen auf ungenutztem Potenzial. Mit der Einführung von Pages Functions gaben wir Entwicklern die Möglichkeit, in jede beliebige statische Website dynamischen Inhalt mit der Unterstützung von Cloudflare Workers einzubauen.

Während des letzten Jahres, seit Functions in der offenen Beta-Phase ist, haben wir erforscht, welche Art von Full-Stack-Funktionen Entwickler für ihre Projekte suchen – und wir haben uns daran gemacht, das Functions-Erlebnis zu dem zu machen, was es heute ist.

Wir freuen uns sehr, Ihnen mitteilen zu können, dass Pages Functions jetzt allgemein verfügbar ist!

Functions – Kurzbeschreibung

Obwohl wir sie im Zusammenhang mit Pages als „Functions“ bezeichnen, sind es eigentlich Funktionen, die auf unserem Cloudflare-Netzwerk laufen, also „getarnte“ Cloudflare Worker. Pages nutzt die Leistungsfähigkeit und Skalierbarkeit von Workers und optimiert sie für die Pages-Erfahrung, die unsere Nutzer kennen und lieben.

Mit Functions können Sie Ihre Website mit dynamischen Funktionen ausstatten – integrieren Sie Speicherlösungen, verbinden Sie sich mit Diensten von Drittanbietern, nutzen Sie serverseitiges Rendering mit Ihren bevorzugten Full-Stack-Frameworks und vieles mehr. Pages Functions öffnet seine Pforten für den Production Traffic. Schauen wir uns einige der spannenden Features an, die wir in dieser Version verbessert und hinzugefügt haben.

Die Erfahrung

Mit Git bereitstellen

Sie schreiben gerne Code? Wir kümmern uns um die Infrastruktur und Sie machen einfach Ihr Ding.

Schreiben Sie einfach eine JavaScript/Typescript-Function und legen Sie sie in einem Funktionsverzeichnis ab, indem Sie Ihren Code an Ihren Git-Provider übermitteln. Unser blitzschnelles CI-System baut Ihren Code und stellt ihn zusammen mit Ihren statischen Assets bereit.

Ihre Functions direkt hochladen

Möchten Sie den Build lieber selbst durchführen? Haben Sie einen speziellen Git-Provider, der von Pages noch nicht unterstützt wird? Kein Problem! Nachdem Sie Ihre Function in Ihrem Functions-Ordner abgelegt haben, können Sie sie mit Ihrem bevorzugten CI-Tool aufbauen und dann Ihr Projekt zur Bereitstellung in Pages hochladen.

Ihre Functions debuggen

Während der Beta-Phase haben wir festgestellt, dass Sie und Ihre Teams vor allem Wert auf Sichtbarkeit legen. Wie bei Cloudflare Workers haben wir für Sie eine einfache Möglichkeit geschaffen, Ihre Functions bei der Verarbeitung von Anfragen zu beobachten – je schneller Sie ein Problem verstehen, desto schneller können Sie reagieren.

Sie können jetzt ganz einfach die Protokolle für Ihre Functions einsehen, indem Sie Ihre Protokolle „verfolgen“. Für grundlegende Informationen wie Ergebnis und Anfrage-IP erhalten Sie die entsprechenden Protokolle über das Pages-Dashboard.

Für spezifischere Filter nutzen Sie

wrangler pages deployment tail

und erhalten Sie einen Live-Feed der Konsolen- und Ausnahmeprotokolle für jede Anfrage, die Ihre Function bekommt.

Functions-Metriken in Echtzeit abrufen

Im Dashboard fasst Pages die Daten für Ihre Functions in Form von Metriken zu Anfrageerfolgen/-fehlern und Aufrufstatus zusammen. Sie können Ihr Metrik-Dashboard nicht nur dazu verwenden, Ihre Nutzung auf Projektbasis besser zu verstehen, sondern auch anhand der Erfolgs-/Fehlerzahlen den Zustand Ihrer Functions zu überprüfen.

Schnelle Integration in das Cloudflare-Ökosystem

Speicherbindungen

Möchten Sie eine wirklich umfassende Lösung? Wir wissen, dass es normalerweise nicht einfach ist, eine Speicherlösung zu finden, die Ihren Bedürfnissen und Ihrem Ökosystem entspricht – aber es geht auch anders.

Mit Functions können Sie die Vorteile unserer breiten Palette von Speicherprodukten nutzen, darunter Workers KV, Durable Objects, R2, D1 und – sehr bald – Queues und Workers Analytics Engine! Erstellen Sie einfach Ihren Namespace, Bucket oder Ihre Datenbank und fügen Sie Ihre Bindung im Pages Dashboard hinzu, um Ihre vollständige Site mit nur wenigen Klicks zum Laufen zu bringen.

Ob Sie nun ein schnelles Kommentarsystem einfügen, Ihre eigene Authentifizierung einführen oder datenbankgestützte E-Commerce-Sites erstellen – die Integration mit bestehenden Produkten unserer Entwicklerplattform eröffnet Ihnen eine Vielzahl von Anwendungsmöglichkeiten für Ihre Site.

Geheime Bindungen

Zusätzlich zu den Umgebungsvariablen, die Ihrem Projekt sowohl bei der Erstellung als auch zur Laufzeit zur Verfügung stehen, können Sie jetzt auch „Geheimnisse“ zu Ihrem Projekt hinzufügen. Dabei handelt es sich um verschlüsselte Umgebungsvariablen, die von keiner Dashboard-Schnittstelle eingesehen werden können. Sie eignen sich hervorragend für sensible Daten wie API-Tokens oder Passwörter.

Integration mit Diensten von Drittanbietern

Mit Pages wollen wir Sie immer dort abholen, wo Sie sind, wenn es um Ihre bevorzugten Tools geht. Während der Beta-Phase haben wir auch einige übereinstimmende Muster in der Art und Weise festgestellt, wie Sie Functions zur Integration mit gängigen Diensten von Drittanbietern einsetzen. Pages Plugins – unsere vorgefertigten Codesnippets – bieten Ihnen die einfache Möglichkeit, das Ökosystem Ihrer Wahl um Ihre Anwendung herum aufzubauen.

Im Wesentlichen ist ein Pages Plugin ein wiederverwendbares – und anpassbares – Stück Runtime-Code, das überall in Ihre Pages-Anwendung integriert werden kann. Es handelt sich um eine „zusammensetzbare“ Pages-Function, die den Plugins die volle Leistungsfähigkeit von Functions (d. h. Workers) verleiht, einschließlich der Einrichtung von Middleware, parametrisierten Routen und statischen Assets.

Mit Pages Plugins können Sie eine Fülle von Anwendungen von Drittanbietern integrieren, darunter die offiziell unterstützten Sentry, Honeycomb, Stytch, MailChannels und andere.

Verwenden Sie Ihre bevorzugten Full-Stack-Frameworks

Ganz im Sinne von Entwickler dort abholen, wo sie sind, kommt dieser Gedanke auch in Form von Javascript-Frameworks zum Ausdruck. Als großer Unterstützer nicht nur von weit verbreiteten, sondern auch von neuen Frameworks arbeitet unser Team mit einer Vielzahl von Framework-Autoren zusammen. Wir wollen Ihnen die Möglichkeit geben, mit der neuen Technologie zu experimentieren und sie sofort auf Pages einzusetzen.

Jetzt kompatibel mit Next.js 13 und mehr!

Vor kurzem haben wir unsere Unterstützung für Next.js-Anwendungen angekündigt, die die Edge Runtime nutzen. Heute freuen wir uns, Ihnen mitteilen zu können, dass wir jetzt auch mit Next.js 13 kompatibel sind. Next.js 13 bringt einige der am häufigsten nachgefragten modernen Paradigmen in das Next.js-Framework ein, darunter verschachteltes Routing, die Serverkomponenten von React 18 und Streaming.

Bevorzugen Sie ein anderes Framework? Kein Problem!

Gehen Sie bei Pages in die Vollen und nutzen Sie die Vorteile des serverseitigen Renderings (SSR) mit einem der vielen anderen offiziell unterstützten Frameworks wie Remix, SvelteKit, QwikCity, SolidStart, Astro und Nuxt. Lesen Sie unseren Blogbeitrag über die SSR-Unterstützung von Pages und wie Sie mit einigen dieser Frameworks loslegen können.

Im erweiterten Modus Gas geben

Obwohl Pages Functions von Workers unterstützt werden, verstehen wir, dass sie auf den ersten Blick nicht exakt identisch sind. Für bestehende Nutzer, die vielleicht schon Workers verwenden und gerne Cloudflare Pages ausprobieren möchten, bieten wir jedoch einen direkten Pfad an, der Ihnen einen schnellen Einstieg ermöglicht.

Wenn Sie bereits einen einzelnen Worker haben und einen einfachen Weg suchen, um mit Pages voll durchzustarten, nutzen Sie den „erweiterten Modus“ von Pages Function. Erzeugen Sie ein ES-Modul Worker mit dem Namen _worker.js im Ausgabeverzeichnis Ihres Projekts und stellen Sie es bereit. Dies kann besonders hilfreich sein, wenn Sie ein Framework-Autor sind oder vielleicht ihr komplexer Anwendungsfall nicht in unseren dateibasierten Router passt.

Ohne Grenzen skalieren

Wir freuen uns sehr, dass wir heute Functions allgemein verfügbar machen, sodass Sie Ihren Traffic skalieren können. Während der Open Beta-Phase galt ein tägliches Limit von 100.000 kostenlosen Anfragen pro Tag, damit Sie das Feature ausprobieren konnten. Die 100.000 Anfragen pro Tag bleiben auch heute noch das kostenlose Limit, aber jetzt können Sie für eine unbegrenzte Anzahl von Anfragen bezahlen.

Da es sich bei Functions nur um „spezielle“ Workers handelt, sehen Sie ab dieser Ankündigung die Nutzung von Functions auf Ihrer Rechnung unter dem Workers Bezahlabonnement oder über Ihren Workers Enterprise-Vertrag. Wie bei Workers können Sie auch bei einem kostenpflichtigen Tarif zwischen unseren beiden Nutzungsmodellen wählen – Bundled und Unbound – und werden entsprechend abgerechnet.

Pages bleibt weiterhin das „Geschenk von Cloudflare an das Internet“. Also erhalten Sie eine unbegrenzte Anzahl von kostenlosen Anfragen für statische Assets und werden in erster Linie für dynamische Anfragen abgerechnet. Wie die Abrechnung mit Functions genau abläuft, können Sie in unserer Dokumentation nachlesen.

Steigen Sie noch heute ein

Um loszulegen, gehen Sie zu den Pages Functions-Dokumenten und lesen Sie unseren Blog zu den besten Frameworks, die Sie für Ihre erste Full-Stack-Anwendung verwenden können. Wenn Sie mit der Umsetzung Ihrer Projekte beginnen, schreiben Sie uns gerne im Channel #functions unter Pages in unserem Cloudflare Developers Discord. Frohes Entwickeln!

We protect entire corporate networks, help customers build Internet-scale applications efficiently, accelerate any website or Internet application, ward off DDoS attacks, keep hackers at bay, and can help you on your journey to Zero Trust.

Visit 1.1.1.1 from any device to get started with our free app that makes your Internet faster and safer.

To learn more about our mission to help build a better Internet, start here. If you're looking for a new career direction, check out our open positions.
Developer Week (DE)Cloudflare Pages (DE)Cloudflare Workers (DE)Full Stack (DE)JAMstack (DE)DeutschServerless (DE)

Follow on X

Nevi Shah|@nevikashah
Cloudflare|@cloudflare

Related posts

April 05, 2024 1:01 PM

Browser Rendering-API allgemein verfügbar, Einführung von Cloudflare Snippets, SWR, und Bereitstellung von Workers for Platforms für alle Nutzer

Browser Rendering-API ist jetzt für alle zahlenden Workers-Kunden verfügbar und bietet auch eine verbesserte Sitzungsverwaltung...

April 04, 2024 1:05 PM

Neue Tools für die Produktionssicherheit — Gradual Deployments, Source Maps, Rate Limiting und neue SDKs

Heute geben wir fünf Updates bekannt, die Ihnen noch mehr Möglichkeiten bieten: Gradual Deployments, Source Mapped Stack Traces in Tail Workers, eine neue Rate Limiting API, brandneue API SDKs und Updates für Durable Objects – alle mit Blick auf geschäftskritische Produktionsdienste...

April 03, 2024 1:30 PM

R2 fügt Ereignisbenachrichtigungen, Unterstützung für Migrationen von Google Cloud Storage und eine Speicherebene mit seltenem Zugriff hinzu

Wir freuen uns, drei neue Funktionen für Cloudflare R2 ankündigen zu können: Ereignisbenachrichtigungen, Unterstützung für Migrationen von Google Cloud Storage und eine Speicherebene für seltenen Zugriff...