Statische Websites ohne Origin-Server auf der Edge!

Viele der weltweiten Websites sind statisch. Das Content Delivery Network von Fastly liefert diese Seiten schnell vom Origin-Server an Besucher aus. Aber was wäre, wenn wir den Origin-Server aus der Gleichung herausnehmen würden?

Verwenden Sie zur Erstellung Ihrer Website einen Generator für statische Websites? Vielleicht verwenden Sie ein beliebtes Framework wie create-react-app, Gatsby, Docusaurus oder Vite, das statische Dateien ausgibt. Oder haben Sie nur ein paar statische Dateien, die Sie einfach nur bereitstellen müssen? Mit compute-js-static-publish können Sie jetzt alle Arten von Inhalten über Fastlys blitzschnelle Compute@Edge Plattform bereitstellen und ausliefern.

Das statische Internet gibt es immer noch. Natürlich sind viele Websites interaktiv, aber ein großer Teil des Internets – Blogs, Referenzseiten, Produktdetailseiten usw. – ist von Natur aus statisch. Der Inhalt der Webseiten wird in einigen Dateien oder in einem Content-Management-System geändert oder aktualisiert und die Website präsentiert dann die aktuellste Version dieser Informationen. 

Einige Websites verwenden statische Website-Generatoren (wie Gatsby). Dabei handelt es sich um Tools, die Quelldaten in Markdown oder HTML mit Vorlagen kombinieren, um ganze Websites zu erstellen. Auch Fastly verwendet statische Website-Generatoren – Gatsby wird beispielsweise für die Erstellung unseres Developer Hub verwendet, in dem alle unsere Tutorials und Referenzmaterialien zur Verfügung stehen, und unsere Expressly Website wird mit Docusaurus erstellt. Egal, welchen Generator Sie verwenden, was dabei herauskommt ist mit dieser Art von Generatoren in der Regel ein Bündel von Dateien.

Diese Dateien werden normalerweise auf einen Webserver hochgeladen, um statisch bereitgestellt zu werden. Heutzutage ist es in der Regel am besten, ein Content Delivery Network (wie das von Fastly) vor diesem Server einzusetzen, damit Sie Ihre Website weltweit zwischenspeichern können.

Aber lassen Sie uns nochmal einen Schritt zurückgehen. Der Webserver speichert zu diesem Zeitpunkt lediglich eine vollständige Kopie der Website, damit das CDN sie cachen kann. Jeder POP kann eine Teilmenge der Website enthalten.

Was wäre, wenn es eine Möglichkeit gäbe, die komplette Website einfach auf Fastly hochzuladen? Jeder POP enthält dann alle Dateien, die für die Bereitstellung der Website benötigt werden, und der Origin-Server wird nicht mehr benötigt!

Statisches Publishing auf der Edge

Seit kurzem ist das mit einer neuen Ergänzung unserer Developer Tools möglich. @fastly/compute-js-static-publish ist sowohl ein Command Line Tool als auch eine Runtime-Bibliothek, mit der Sie Ihre statische Website ganz ohne Origin-Server komplett auf der Edge bereitstellen können.

Angenommen, Sie haben die Dateien für eine Website in einem Verzeichnis namens „public“ gespeichert. Geben Sie den folgenden Befehl ein (vorausgesetzt, Sie haben NodeJS 16+ installiert):

npx @fastly/compute-js-static-publish --public-dir=./public

Dadurch wird eine Compute@Edge Anwendung in einem Verzeichnis namens compute-js generiert. Die Datei src/index.js in diesem generierten Projekt enthält den Code für die Bereitstellung der statischen Dateien.

Sie können Ihre Website nun auf dem lokalen Entwicklungsserver von Fastly testen. Vorausgesetzt, Sie haben die Fastly CLI installiert, können Sie Folgendes eingeben:

cd ./compute-js
fastly compute serve

Sie sollten Ihre Website nun unter http://localhost:7676/ aufrufen können.

Und wenn Sie schließlich bereit sind, online zu gehen, verwenden Sie diese Befehle:

cd ./compute-js
fastly compute publish

Jedes Mal, wenn Sie Ihr Compute@Edge Projekt erstellen (indem Sie fastly compute serve oder fastly compute publish ausführen), durchsucht compute-js-static-publish Ihr public-Verzeichnis und generiert das Compute@Edge Programm neu.

Wo sind all die statischen Dateien gelandet?

Alles in Ihrem Quellordner wird zu einer einzigen Wasm Binärdatei kompiliert, die wir auf Fastly bereitstellen können.

Der Trick liegt in der generierten Datei „src/statics.js“. Wenn Sie einen Blick in die Datei werfen, werden Sie einige Zeilen sehen, die in etwa so aussehen (der genaue Inhalt hängt von den in Ihrem Projekt enthaltenen Dateien ab):

import file0 from "../../public/index.html?staticText";
import file1 from "../../public/main.css?staticText";

export const assets = {
  "/index.html": { contentType: "text/html", content: file0, module: null, isStatic: false },
  "/main.css": { contentType: "text/css", content: file1, module: null, isStatic: false },
};

Durch diese Zeilen werden die statischen Dateien mithilfe einer Funktion von Webpack namens Asset Modules in das erstellte Modul aufgenommen. Mit dieser Funktion werden für jede angegebene Datei Module erstellt, deren Wert der Inhalt der jeweiligen referenzierten Datei ist. Bei der Erstellung der Anwendung durchsucht dieses Tool das öffentliche Verzeichnis und generiert die Datei src/statics.js neu, um alle Dateien in diesem Verzeichnis aufzulisten. Der Inhalt jeder Datei landet im Asset Object, das von dieser Datei exportiert wird, wobei die Schlüssel die Dateinamen der einzelnen Dateien sind, relativ zum Projektverzeichnis.

Wenn wir also wissen möchten, was sich in der Datei „index.html“ befindet, müssen wir nur den Wert von assets['/index.html'].content ermitteln.

Bei Binärdateien (Nicht-Text-Dateien) ist der Prozess etwas komplizierter, aber der Grundgedanke ist derselbe. Wenn es Sie interessiert, empfehle ich Ihnen, sich über asset/inline in Webpack zu informieren und sich den von diesem Tool generierten Code anzusehen, um mehr über die Verarbeitung von Binärdateien zu erfahren.

Als Ergebnis landen Ihre Dateien dank @fastly/compute-js-static-publish alle ohne Origin-Server in den POPs von Fastly. Sie können sich das in etwa so vorstellen:

Ansonsten müssen Sie nur noch darauf achten, dass es Limits und Einschränkungen für eine Wasm Binärdatei auf Compute@Edge gibt. Insbesondere darf Ihr kompiliertes Paket 50 MB nicht überschreiten. Damit ist die Größe eines komprimierten Pakets gemeint. Sie können also mehr als 50 MB an Quelldateien einbinden, sollten dabei aber dennoch das Limit im Hinterkopf behalten.

Integration aller Komponenten

Wie verändert „compute-js-static-publish“ also die Art und Weise, wie Ihre aktuelle Website erstellt und bereitgestellt wird? Wenn Sie bereits Continuous Integration für die Bereitstellung Ihrer Website verwenden (falls nicht, informieren Sie sich über GitHub Actions und die Verwendung mit Compute@Edge!), können Sie direkt über die CI auf Fastly veröffentlichen.

Der Befehl „compute-js-static-publish“ integriert sich nahtlos in Ihre Bereitstellungspipeline, da Sie ein Argument zur Angabe einer Service-ID angeben können. Wenn Ihre aktuelle Konfiguration wie folgt aussieht:

Ersetzen Sie einfach die letzten beiden Schritte wie folgt:

Der letzte Schritt könnte etwa so aussehen:

npx @fastly/compute-js-static-publish --public-dir=/path/to/built/site --service-id=<YOUR_SERVICE_ID>
cd compute-js
fastly compute publish

Beachten Sie, dass Sie Ihre Dateien nicht mehr auf einen Webserver hochladen müssen. Und da das Edge-Programm alle Ihre statischen Assets enthält, ist auch kein Bereinigungsschritt erforderlich – sobald Ihr Paket an die Fastly-Edge-Knoten übertragen wurde, verfügen alle über die aktualisierten Inhalte.

Welchen Generator für statische Websites verwenden Sie? Wir haben dafür die entsprechende Voreinstellung.

Während der Entwicklung dieses Tools erhielten wir internes Feedback von Nutzern, die unterschiedliche Website-Generatoren verwendeten. Um mit diesen Nutzern arbeiten zu können, mussten wir oft Anweisungen geben, die sich auf den jeweiligen Generatortyp bezogen. Im Allgemeinen erzeugen verschiedene Website-Generatoren die Ausgabe auf unterschiedliche Weise (z. B. unterschiedliche Namen der Ausgabeverzeichnisse). Aber alle Nutzer eines bestimmten Generators verwenden die gleichen Einstellungen. Daher beschlossen wir, das Konzept der Voreinstellungen einzuführen. Dabei handelt es sich um Standardeinstellungen für einen bestimmten Generator, aber natürlich mit der Möglichkeit, einzelne Einstellungen bei Bedarf zu überschreiben.

Angenommen, Sie verwenden <u>create-react-app</u> zum Bootstrapping Ihrer Anwendung. Sie würden den Befehl „npm run start“ zum Starten des Entwicklungsservers verwenden und anschließend, wenn Sie bereit sind zu starten, „npm build“ ausführen. Dadurch werden alle Ausgabedateien in einem Verzeichnis namens „build“ abgelegt. Außerdem werden statische Dateien (Dateien mit gehashten Dateinamen, die für immer zwischengespeichert werden können) in einem Verzeichnis namens build/static abgelegt. Sie müssen diese Verzeichnisnamen also nicht dem Befehl compute-js-static-publish beifügen, sondern können ihn einfach so ausführen:

npx @fastly/compute-js-static-publish --preset=create-react-app

Im Moment bieten wir Voreinstellungen für Vite, SvelteKit, Gatsby, Docusaurus und sogar Next.js (Paket, das mit dem Befehl next export erstellt wurde).

Compute@Edge – eine Plattform für alles

Compute@Edge ist eine Allzweck-Computing-Plattform mit dem Potenzial, so ziemlich alles auf der Edge auszuführen. Wir hoffen, dass wir Ihnen mit Tools wie diesen noch mehr Ideen für Anwendungen geben können, die Sie auf der Plattform ausführen können.

Wir bei Fastly möchten Ihnen die Möglichkeit geben, noch mehr Code auf der Edge auszuführen und diesen schneller zu entwickeln. Dazu möchten wir Ihnen eine breite Palette neuer und vertrauter Tools zur Verfügung stellen. Wir würden gerne von Ihnen wissen, ob Sie diese Tools verwenden und was Sie damit machen. Schreiben Sie uns doch einfach auf Twitter.