モジュール式の Edge Side には、JavaScript Compute 用のコンポーネントが含まれています
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 処理をリクエストごとに実行する選択肢と、互換性のあるデータ型で動作する他のモジュールと処理を組み合わせて適用するオプションを提供しました。任意の順序および/または指定された論理条件でそれらを実行します。
次のターゲット: JavaScript
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 と呼ばれる変換はストリームに直接適用され、メモリとパフォーマンスの問題が軽減されます。これは次のことを意味します:
- 変換を適用する前にアップストリーム応答全体をバッファーする必要はありません。
- トランスフォーマーは、アップストリームの応答をできるだけ早く消費し、ストリームに表示される ESI タグを処理します。トランスフォーマーが各 ESI タグの処理を完了すると、結果はすぐに下流にリリースされるため、最小限のバッファーを保持できます。これにより、クライアントは、ストリーミングされた結果が完全に処理されるまで待つことなく、準備が整ったときにその最初のバイトを受信できるようになります。
さらに、この設計はモジュール式であるため、EsiTransformStream は他のものと一緒に使用できる単なるツールになります。たとえば、圧縮などの他の変換を応答に適用したい場合、応答は完全に標準のインターフェイスであるため、これらの変換ストリームをいくつでもパイプ処理できます。 必要に応じて、リクエスト ヘッダー、パス、レスポンス コンテンツ タイプなどによって、特定のリクエストまたはレスポンスのみに対して ESI を条件付きで有効にすることもできます。
EsiTransformStream をインスタンス化する方法は次のとおりです。
<header>Welcome to the web site</header>
コンストラクターは URL と Headers オブジェクトを受け取り、オプションでいくつかのオプションを 3 番目のパラメーターとして受け取ります。前述したように、ESI の主な機能は、追加のテンプレートをダウンロードして、結果のストリームに含めることです。
- URL は、
- ヘッダーは、テンプレートを取得するための追加リクエストを行うときに使用されます。
- オプションの構成オブジェクトを使用すると、行われたフェッチの動作をオーバーライドしたり、フェッチされたテンプレートの処理方法やカスタム エラー処理などの他のカスタム動作を適用したりできます。
最も単純なケースでは、構成オブジェクトのフェッチ値のみを使用します。これを指定しない場合は、代わりにグローバル フェッチ関数が使用されますが、Compute では、テンプレートを含めるときにフェッチに使用するバックエンドを指定する必要があります (動的バックエンド機能を使用している場合を除く)。上のサンプル スニペットは、グローバル フェッチを呼び出す前に、origin_0 という名前のバックエンドを割り当てます。
それだけです！この簡単なセットアップにより、バックエンドで ESI タグを処理し、コンピューティング アプリケーションで 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:include
- esi:コメント
- esi:削除
- esi:try / esi:attempt / esi:以外
- esi:選択 / esi:いつ / esi:それ以外
- esi:vars
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7889
15
1650
14
1411
52
1302
25
1248
29
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
javascriptの分解：それが何をするのか、なぜそれが重要なのか
Apr 09, 2025 am 12:07 AM
JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
誰がより多くのPythonまたはJavaScriptを支払われますか？
Apr 04, 2025 am 12:09 AM
スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。
JavaScriptは学ぶのが難しいですか？
Apr 03, 2025 am 12:20 AM
JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。
Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？
または：
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？
Apr 04, 2025 pm 05:36 PM
この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。
JavaScriptの進化：現在の傾向と将来の見通し
Apr 10, 2025 am 09:33 AM
JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？
Apr 04, 2025 pm 05:09 PM
同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...
Zustand非同期操作：UseStoreが取得した最新の状態を確保する方法は？
Apr 04, 2025 pm 02:09 PM
Zustand非同期操作のデータの更新問題。 Zustand State Management Libraryを使用する場合、非同期操作を不当にするデータ更新の問題に遭遇することがよくあります。 �...
