Im Sommer 2022 arbeitete mein Teamkollege Kailan an einer Rust-Kiste für Fastly Compute, implementierte eine Teilmenge der Edge Side Includes (ESI)-Vorlagensprache und veröffentlichte einen Blogbeitrag darüber Es. Dieser Artikel war nicht nur deshalb von Bedeutung, weil wir eine nützliche Bibliothek veröffentlicht haben, sondern auch, weil er ein brillantes Beispiel dafür war, was Compute uns bieten kann: einen programmierbaren Edge mit modularer Funktionalität. Und da JavaScript nun seit mehr als einem Jahr allgemein auf Compute verfügbar ist, war es an der Zeit, dass wir eine ähnliche Lösung für unsere JavaScript-Benutzer haben. Mit der ESI-Bibliothek für JavaScript von Fastly, die jetzt auf npm verfügbar ist, können Sie Ihrer Anwendung leistungsstarke ESI-Verarbeitung hinzufügen.
Seit fast einem Jahrzehnt unterstützt das CDN von Fastly Edge Side Includes (ESI), eine Vorlagensprache, die durch die Interpretation spezieller Tags in Ihrer HTML-Quelle funktioniert. Es dreht sich um das Tag
index.html
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
header.html
<header>Welcome to the web site</header>
Ausgabe
<header>Welcome to the web site</header>Content
Als Compute auf den Markt kam, veränderte sich die Edge-Landschaft hauptsächlich auf zwei Arten: Programmierbarkeit und Modularität.
Kurz nachdem sich unsere Plattformunterstützung für Rust stabilisiert hatte, veröffentlichten wir eine Kiste für Rust, die ESI implementierte und Programmierbarkeit hinzufügte. Sie können jetzt mithilfe von Code konfigurieren, wie zusätzliche Backend-Anfragen erstellt und Antwortfragmente verarbeitet werden. Sie können die ESI-Verarbeitung sogar für Dokumente durchführen, die nicht vom Backend-Server stammen. Diese Programmierbarkeit unterschied es von der ESI-Unterstützung, die wir in VCL haben, die auf die von uns angebotenen festen Funktionen beschränkt war.
Gleichzeitig war dieser Ansatz hochgradig modular und gab dem Programmierer die Möglichkeit, diese ESI-Verarbeitung auf Anfragebasis durchzuführen, und die Möglichkeit, die Verarbeitung mit anderen Modulen zu kombinieren, die mit kompatiblen Datentypen arbeiten und anwenden sie in beliebiger Reihenfolge und/oder logischer Bedingung.
Ähnlich wie bei unserer Rust-Version wollten wir, dass diese JavaScript-Bibliothek programmierbar ist. Die JavaScript-Unterstützung von Fastly umfasst seit jeher die Fetch-API und die dazugehörige Streams-API. Eine nützliche Funktion der Streams-API ist die TransformStream-Schnittstelle, die es ermöglicht, Daten durch ein Objekt zu „leiten“, um eine Transformation anzuwenden – perfekt für ESI. Durch die Implementierung des ESI-Prozessors als Implementierung von TransformStream konnten wir ihn direkt in eine in JavaScript geschriebene Fastly Compute-Anwendung integrieren.
So können Sie es streamen:
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
Die Transformation, die wir EsiTransformStream nennen, wird direkt auf den Stream angewendet, wodurch Speicher- und Leistungsprobleme entfallen. Das bedeutet:
Darüber hinaus ist dieses Design modular, sodass EsiTransformStream zu einem weiteren Tool wird, das Sie neben anderen Dingen verwenden können. Beispielsweise möchten Sie möglicherweise andere Transformationen wie Komprimierung auf Antworten anwenden, und eine Antwort kann durch eine beliebige Anzahl dieser Transformationsströme geleitet werden, da es sich um eine vollständig standardmäßige Schnittstelle handelt. Wenn Sie möchten, können Sie ESI sogar nur für bestimmte Anfragen oder Antworten bedingt aktivieren, z. B. nach Anfrageheadern, Pfaden oder Antwortinhaltstyp.
So instanziieren Sie EsiTransformStream:
<header>Welcome to the web site</header>
Der Konstruktor akzeptiert eine URL und ein Headers-Objekt und optional einige Optionen als dritten Parameter. Wie bereits beschrieben, besteht die Hauptfunktion von ESI darin, zusätzliche Vorlagen herunterzuladen, um sie in den resultierenden Stream einzubinden. Begegnung mit einem
Im einfachsten Fall verwenden Sie nur den Abrufwert des Konfigurationsobjekts. Wenn Sie es nicht bereitstellen, wird stattdessen die globale Abruffunktion verwendet. In Compute benötigen Sie es jedoch, um ein Backend für den Abruf anzugeben, das beim Einbinden einer Vorlage verwendet werden soll (es sei denn, Sie verwenden die dynamische Backend-Funktion). Der obige Beispielausschnitt weist das Backend mit dem Namen origin_0 zu, bevor der globale Abruf aufgerufen wird.
Das ist es! Mit diesem einfachen Setup können Sie ein Backend einrichten, das ESI-Tags bereitstellt, und eine Compute-Anwendung, die diese verarbeitet. Hier ist ein vollständiges Beispiel, das Sie ausführen können:
Diese Implementierung bietet mehr ESI-Funktionen als andere, die wir in der Vergangenheit zur Verfügung gestellt haben.
Manchmal wird eine Datei, auf die von einem
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
Wenn /templates/header.html einen Fehler verursacht, ignoriert der ESI-Prozessor den Fehler stillschweigend und ersetzt das gesamte
Es ist auch möglich, eine strukturiertere Fehlerbehandlung zu verwenden, indem ein
<header>Welcome to the web site</header>
Der ESI-Prozessor führt zunächst den Inhalt von
Es ist wichtig zu beachten, dass das gesamte
ESI ermöglicht auch die bedingte Ausführung, indem es Laufzeitprüfungen für Variablen durchführt. Das Folgende ist ein Beispiel für eine solche Prüfung:
<header>Welcome to the web site</header>Content
Wenn der Prozessor auf ein
Der Prozessor stellt einen begrenzten Satz an Variablen zur Verfügung, die hauptsächlich auf Anfragecookies basieren. Im obigen Beispiel wird ein HTTP-Cookie mit dem Namen „group“ auf seinen Wert überprüft. Unsere Implementierung basiert auf der ESI-Sprachspezifikation; Weitere Informationen finden Sie hier.
Diese Implementierung unterstützt die folgenden Tags der ESI-Sprachspezifikation.
Das
ESI-Variablen werden in den Attributen von ESI-Tags unterstützt und ESI-Ausdrücke werden im Testattribut von
Während der Funktionsumfang ausreicht, um begeistert zu sein, ist das wirklich Spannende an der Programmierbarkeit, dass noch mehr Dinge möglich sind. Das Einbinden von Vorlagen ist die Hauptanwendung von ESI, aber das ist bei weitem nicht alles, was es kann. Hier ist ein Beispiel.
Bedenken Sie, dass in Ihrem Dokument ein Zeitstempel markiert ist, der bei der Anzeige als relatives Datum dargestellt werden soll, z. B. „vor 2 Tagen“. Es gibt viele Möglichkeiten, dies zu tun, aber um die besten Auswirkungen auf Leistung und Speicher zu erzielen, wäre es großartig, ein Suchen/Ersetzen in Streams durchzuführen. Die Programmierung dieser ESI-Bibliothek kann hierfür tatsächlich eine gute Option sein.
Wir können Zeitstempel definieren, die in Ihrem Backend-Dokument kodiert werden sollen, indem wir ein speziell gestaltetes ESI-Tag in einem Format wie dem folgenden verwenden:
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
Dieses Snippet kann beispielsweise Mitternacht am 1. Januar 2024 (Pazifikzeit) darstellen:
<header>Welcome to the web site</header>
Richten Sie nun den EsiTransformStream so ein, dass ein synthetisches Ersatzdokument bereitgestellt wird, wann immer er dieses URL-Muster sieht:
<header>Welcome to the web site</header>Content
Wenn der Prozessor nun auf den obigen Beispielausschnitt stößt, gibt er ein Ergebnis ähnlich dem folgenden aus (abhängig davon, wie viele Tage in der Zukunft Sie es ausführen):
const transformedBody = resp.body.pipeThrough(esiTransformStream);
return new Response(
transformedBody,
{
status: resp.status,
headers: resp.headers,
},
);
Da das Backend-Dokument von Fastly zwischengespeichert werden kann, können zukünftige Anfragen von einem Cache-HIT profitieren, während bei der Verarbeitung weiterhin die aktualisierte relative Zeit angezeigt wird.
Ein Live-Beispiel hierfür finden Sie in der folgenden Geige:
@fastly/esi ist jetzt auf npm verfügbar und kann zu jedem JavaScript-Programm hinzugefügt werden. Verwenden Sie es natürlich am Edge in Ihren Fastly Compute-Programmen, aber tatsächlich funktioniert es auch außerhalb von Compute, solange Ihre Umgebung die Fetch-API unterstützt. Der vollständige Quellcode ist auf GitHub verfügbar.
Klonen Sie zunächst eine der oben genannten Fiddles und testen Sie sie mit Ihren eigenen Ursprüngen, noch bevor Sie ein Fastly-Konto erstellt haben. Wenn Sie bereit sind, Ihren Dienst in unserem globalen Netzwerk zu veröffentlichen, können Sie sich für eine kostenlose Testversion von Compute anmelden und dann sofort mit der ESI-Bibliothek auf npm loslegen.
Mit Compute ist der Vorsprung programmierbar und modular – wählen und kombinieren Sie die Lösungen, die für Sie am besten funktionieren, oder erstellen Sie sogar Ihre eigenen. Wir sind nicht die Einzigen, die solche Module für Compute bereitstellen können. Jeder kann zum Ökosystem beitragen und davon profitieren. Und wie immer treffen Sie uns im Fastly-Community-Forum und teilen Sie uns mit, was Sie erstellt haben!
Das obige ist der detaillierte Inhalt vonEine modulare Edge Side Includes-Komponente für JavaScript Compute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche Software zum Testen von Laptop-Akkus ist die beste?
So öffnen Sie eine Statusdatei
Was sind die JQuery-Plug-Ins?
Wo ist der Login-Zugang für Gmail-E-Mail?
Was tun, wenn das angegebene Modul nicht gefunden werden kann?
So stellen Sie mit sqlplus eine Verbindung zur Datenbank her
Grenzradius
Wie viel kostet ein Bitcoin in RMB?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
