Eine modulare Edge Side Includes-Komponente für JavaScript Compute

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.

---

Programmierbarkeit und Modularität

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 , das den Edge-Server anweist, ein anderes Dokument abzurufen und es in den Stream einzubinden.

index.html

<include src="./header.html"></include>
<main>
Content
</main>

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.

Nächstes Ziel: JavaScript

Ä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:

<include src="./header.html"></include>
<main>
Content
</main>

Die Transformation, die wir EsiTransformStream nennen, wird direkt auf den Stream angewendet, wodurch Speicher- und Leistungsprobleme entfallen. Das bedeutet:

• Es ist nicht erforderlich, die gesamte Upstream-Antwort zu puffern, bevor die Transformation angewendet wird.
• Der Transformer verbraucht die Upstream-Antwort so schnell wie möglich und verarbeitet ESI-Tags, sobald sie im Stream angezeigt werden. Sobald der Transformator die Verarbeitung jedes ESI-Tags abgeschlossen hat, werden die Ergebnisse sofort nachgelagert freigegeben, sodass wir den kleinstmöglichen Puffer vorhalten können. Dadurch kann der Client das erste Byte des gestreamten Ergebnisses empfangen, sobald es bereit ist, ohne auf die vollständige Verarbeitung warten zu müssen.

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 Tag verwendet fetch als zugrunde liegenden Mechanismus zum Abrufen einer Vorlage, und der Hauptzweck dieser Parameter besteht darin, diese Abrufaufrufe zu konfigurieren:

• Die URL wird verwendet, um relative Pfade im Quellcode von aufzulösen. Tags.
• Die Header werden verwendet, wenn zusätzliche Anfragen zum Abrufen der Vorlagen gestellt werden.
• Das optionale Konfigurationsobjekt kann verwendet werden, um das Verhalten des durchgeführten Abrufs zu überschreiben und um anderes benutzerdefiniertes Verhalten anzuwenden, z. B. die Art und Weise, wie die abgerufene Vorlage verarbeitet wird, und eine benutzerdefinierte Fehlerbehandlung.

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:

fiddle.fastly.dev

Unterstützung für ESI-Funktionen

Diese Implementierung bietet mehr ESI-Funktionen als andere, die wir in der Vergangenheit zur Verfügung gestellt haben.

Fehlerbehandlung

Manchmal wird eine Datei, auf die von einem Das Abrufen des Tags schlägt möglicherweise fehl, da es nicht vorhanden ist oder einen Serverfehler verursacht. In diesen Fällen ist es möglich, den Fehler zu ignorieren, indem man das Attribut onerror="continue" hinzufügt.

<include src="./header.html"></include>
<main>
Content
</main>

Wenn /templates/header.html einen Fehler verursacht, ignoriert der ESI-Prozessor den Fehler stillschweigend und ersetzt das gesamte Tag mit einer leeren Zeichenfolge.

Es ist auch möglich, eine strukturiertere Fehlerbehandlung zu verwenden, indem ein Block, der so aussieht:

<header>Welcome to the web site</header>

Der ESI-Prozessor führt zunächst den Inhalt von aus. Wenn ein esi:include-Tag einen Fehler verursacht, führt der ESI-Prozessor den Inhalt von aus.

Es ist wichtig zu beachten, dass das gesamte Der Block wird durch den gesamten -Block ersetzt. blockieren, wenn es erfolgreich ist oder das wenn ein Fehler vorliegt. Wenn im obigen Beispiel /templates/header.html einen Fehler verursacht, führt dies auch dazu, dass der Text „Hauptkopfzeile“ nicht in der Ausgabe erscheint. Es ist nur der Text „Alternativer Header“ enthalten. Weitere Einzelheiten finden Sie in der ESI-Sprachspezifikation.

Bedingungen

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 Block durchläuft es den Blöcken und überprüft die in ihren Testattributen festgelegten Ausdrücke. Der Prozessor führt den ersten esi:when-Block aus, in dem der Ausdruck als wahr ausgewertet wird. Wenn keiner der Ausdrücke „true“ ergibt, wird optional der Block „esi:otherwise“ ausgeführt, sofern dieser bereitgestellt wird. Das gesamte Der Block wird durch die Gesamtheit des -Blocks ersetzt. oder Block, der ausgeführt wird.

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.

Liste der unterstützten Tags und Funktionen

Diese Implementierung unterstützt die folgenden Tags der ESI-Sprachspezifikation.

• esi:include
• esi:comment
• esi:remove
• esi:try / esi:attempt / esi:exclusive
• esi:choose / esi:when / esi:otherwise
• esi:vars

Das Tag ist in der Spezifikation als optional definiert und in dieser Implementierung nicht enthalten.

ESI-Variablen werden in den Attributen von ESI-Tags unterstützt und ESI-Ausdrücke werden im Testattribut von unterstützt. Darüber hinaus ist das Kommentar wird unterstützt.

Individuelles Verhalten bedeutet endlose Möglichkeiten

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:

<include src="./header.html"></include>
<main>
Content
</main>

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:

fiddle.fastly.dev

Machen Sie eine Spritztour!

@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!