2022 年の夏、私のチームメイトの Kailan は Fastly Compute 用の Rust クレートに取り組み、Edge Side include (ESI) テンプレート言語のサブセットを実装し、次のブログ投稿を公開しました。それ。この記事が重要だったのは、私たちが便利なライブラリをリリースしたというだけではなく、コンピューティングがもたらすもの、つまりモジュラー機能を備えたプログラマブル エッジを見事に示したものだったからです。そして、JavaScript が Compute で一般的に利用可能になってから 1 年以上が経過したため、JavaScript ユーザー向けに同様のソリューションを用意する時期が来ました。 Fastly の JavaScript 用 ESI ライブラリは npm で利用できるようになり、アプリケーションに強力な ESI 処理を追加できます。
Fastly の CDN は、ほぼ 10 年にわたり、HTML ソース内の特別なタグを解釈することで機能するテンプレート言語である Edge Side include (ESI) をサポートしてきました。これはタグ
index.html
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
header.html
<header>Welcome to the web site</header>
出力
<header>Welcome to the web site</header>Content
コンピューティングが登場すると、エッジの状況は主にプログラマビリティとモジュール性の 2 つの点で変化しました。
Rust のプラットフォーム サポートが安定してからすぐに、ESI を実装し、プログラマビリティを追加した Rust 用のクレートを公開しました。コードを使用して、追加のバックエンド要求を構築する方法と、応答フラグメントを処理する方法を構成できるようになりました。バックエンド サーバーから発信されていないドキュメントに対して ESI 処理を実行することもできます。このプログラマビリティにより、提供する機能の固定セットに限定されていた VCL の ESI サポートとは区別されました。
同時に、このアプローチは高度にモジュール化されており、プログラマはこの ESI 処理をリクエストごとに実行する選択肢と、互換性のあるデータ型で動作する他のモジュールと処理を組み合わせて適用するオプションを提供しました。任意の順序および/または指定された論理条件でそれらを実行します。
Rust リリースと同様に、この JavaScript ライブラリをプログラム可能にする必要がありました。 Fastly の JavaScript サポートには、Fetch API とその付属の Streams API が常に組み込まれています。 Streams API の便利な機能の 1 つは TransformStream インターフェイスです。これにより、ESI に最適な変換を適用するためにオブジェクトを介してデータを「パイプ」することができます。 ESI プロセッサを TransformStream の実装として実装することで、JavaScript で書かれた Fastly Compute アプリケーションに ESI プロセッサを適合させることができました。
ストリーミング方法は次のとおりです:
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
EsiTransformStream と呼ばれる変換はストリームに直接適用され、メモリとパフォーマンスの問題が軽減されます。これは次のことを意味します:
さらに、この設計はモジュール式であるため、EsiTransformStream は他のものと一緒に使用できる単なるツールになります。たとえば、圧縮などの他の変換を応答に適用したい場合、応答は完全に標準のインターフェイスであるため、これらの変換ストリームをいくつでもパイプ処理できます。 必要に応じて、リクエスト ヘッダー、パス、レスポンス コンテンツ タイプなどによって、特定のリクエストまたはレスポンスのみに対して ESI を条件付きで有効にすることもできます。
EsiTransformStream をインスタンス化する方法は次のとおりです。
<header>Welcome to the web site</header>
コンストラクターは URL と Headers オブジェクトを受け取り、オプションでいくつかのオプションを 3 番目のパラメーターとして受け取ります。前述したように、ESI の主な機能は、追加のテンプレートをダウンロードして、結果のストリームに含めることです。
最も単純なケースでは、構成オブジェクトのフェッチ値のみを使用します。これを指定しない場合は、代わりにグローバル フェッチ関数が使用されますが、Compute では、テンプレートを含めるときにフェッチに使用するバックエンドを指定する必要があります (動的バックエンド機能を使用している場合を除く)。上のサンプル スニペットは、グローバル フェッチを呼び出す前に、origin_0 という名前のバックエンドを割り当てます。
それだけです！この簡単なセットアップにより、バックエンドで ESI タグを処理し、コンピューティング アプリケーションで ESI タグを処理することができます。実行できる完全な例は次のとおりです:
この実装では、これまでに利用可能にした他の機能よりも多くの ESI 機能が提供されます。
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
/templates/header.html でエラーが発生した場合、ESI プロセッサはエラーを無視し、
<header>Welcome to the web site</header>
ESI プロセッサは最初に
ESI では、変数に対して実行時チェックを実行することにより、条件付き実行も可能です。以下はそのようなチェックの例です:
<header>Welcome to the web site</header>Content
プロセッサが
プロセッサは、主にリクエスト Cookie に基づく、限られた変数セットを利用可能にします。上の例では、「group」という名前の HTTP Cookie の値がチェックされます。私たちの実装は ESI 言語仕様に基づいています。詳細については、それを参照してください。
この実装は、ESI 言語仕様の次のタグをサポートします。
ESI 変数は ESI タグの属性でサポートされ、ESI 式は
この機能セットだけでも十分興奮できますが、プログラム可能であることの本当にエキサイティングな部分は、さらに多くのことが可能になることです。 ESI の主な用途はテンプレートの導入ですが、ESI でできることはそれだけではありません。以下に例を示します。
文書内にマークアップされたタイムスタンプがあり、表示時に相対日付として表示したいとします (「2 日前」など)。これを行う方法はたくさんありますが、パフォーマンスとメモリへの影響を最大限に高めるには、ストリーム内で検索/置換を実行するのが最適です。この ESI ライブラリのプログラミングは、実際にこれを行うための優れたオプションとして使用できます。
次のような形式で特別に作成された ESI タグを使用して、バックエンド ドキュメントでエンコードされるタイムスタンプを定義できます。
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
たとえば、次のスニペットは太平洋時間の 2024 年 1 月 1 日の午前 0 時を表すことができます。
<header>Welcome to the web site</header>
次に、その URL パターンを検出したときに合成置換ドキュメントを提供するように EsiTransformStream を設定します。
<header>Welcome to the web site</header>Content
プロセッサが上記のサンプル スニペットに遭遇すると、次のような結果が出力されます (実行する日数に応じて異なります)。
const transformedBody = resp.body.pipeThrough(esiTransformStream);
return new Response(
transformedBody,
{
status: resp.status,
headers: resp.headers,
},
);
バックエンド ドキュメントは Fastly によってキャッシュ可能であるため、処理では更新された相対時間を表示し続けながら、今後のリクエストはキャッシュ ヒットの恩恵を受けることができます。
この実際の例については、次のフィドルを参照してください。
@fastly/esi が npm で利用できるようになり、あらゆる JavaScript プログラムに追加できるようになりました。もちろん、Fastly Compute プログラムのエッジで使用しますが、実際には、環境がフェッチ API をサポートしている限り、Compute の外部でも機能します。完全なソース コードは GitHub で入手できます。
Fastly アカウントを作成する前であっても、上記の Fiddle のいずれかを複製し、独自のオリジンでテストすることから始めます。弊社のグローバル ネットワークでサービスを公開する準備ができたら、Compute の無料トライアルにサインアップして、npm の ESI ライブラリをすぐに使い始めることができます。
コンピューティングを使用すると、エッジはプログラム可能かつモジュール式になります。最適なソリューションを選択して組み合わせたり、独自のソリューションを構築したりすることもできます。 Compute 用にこのようなモジュールを提供できるのは当社だけではありません。誰もがエコシステムに貢献し、そこから得ることができます。そしていつものように、Fastly コミュニティ フォーラムでお会いして、あなたが何を構築しているのか教えてください!
以上がモジュール式の Edge Side には、JavaScript Compute 用のコンポーネントが含まれていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
