模組化邊緣端包含 JavaScript 運算元件

2022 年夏天，我的隊友 Kailan 為 Fastly Compute 開發了 Rust 箱，實現了 Edge Side Includes (ESI) 模板語言的子集，並發表了一篇關於它。這篇文章很重要，不僅因為我們發布了一個有用的庫，還因為它很好地說明了計算可以為我們帶來什麼：具有模組化功能的可編程邊緣。現在 JavaScript 在 Compute 上普遍可用已有一年多了，我們是時候為 JavaScript 用戶提供類似的解決方案了。 Fastly 的 JavaScript ESI 程式庫現已在 npm 上提供，讓您可以為應用程式添加強大的 ESI 處理。

---

可程式性和模組化

近十年來，Fastly 的 CDN 一直支援 Edge Side Includes (ESI)，這是一種模板語言，透過解釋 HTML 原始碼中的特殊標籤來運作。它圍繞著標籤 展開，該標籤指示邊緣伺服器取得另一個文件並將其內聯到流中。

index.html

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

header.html

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

輸出

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

Content

當計算進入場景時，邊緣景觀主要在兩個方面發生了變化：可編程性和模組化。

在我們對 Rust 的平台支援穩定後不久，我們發布了一個實現 ESI 的 Rust 包，並添加了可編程性。現在您可以使用程式碼配置如何建立其他後端請求以及如何處理回應片段。您甚至可以對並非來自後端伺服器的文件執行 ESI 處理。這種可編程性將其與我們在 VCL 中提供的 ESI 支援區分開來，後者僅限於我們提供的固定功能集。

同時，這種方法是高度模組化的，使程式設計師可以選擇在每個請求的基礎上執行此ESI 處理，並可以選擇將處理與使用相容資料類型的其他模組結合起來，並應用它們按照指定的任何順序和/或邏輯條件。

下一個目標：JavaScript

與我們的 Rust 版本類似，我們希望這個 JavaScript 函式庫是可程式化的。 Fastly 的 JavaScript 支援始終包含 Fetch API 及其配套的 Streams API。 Streams API 的一個實用功能是 TransformStream 接口，它允許透過物件「輸送」資料以應用轉換，這對於 ESI 來說是完美的。透過將 ESI 處理器實現為 TransformStream 的實現，我們能夠將其直接放入用 JavaScript 編寫的快速計算應用程式中。

您可以透過以下方式進行串流：

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

我們將其稱為 EsiTransformStream 的轉換直接應用於流，從而減輕了記憶體和效能問題。這意味著：

• 在應用轉換之前無需緩衝整個上游響應。
• 變壓器會盡快消耗上游響應，並處理流程中顯示的 ESI 標籤。當轉換器完成處理每個 ESI 標籤時，結果會立即發佈到下游，因此我們能夠保留盡可能小的緩衝區。這允許客戶端在準備就緒時接收串流結果的第一個字節，而不必等待它被完全處理。

此外，這種設計是模組化的，使 EsiTransformStream 成為您可以與其他東西一起使用的另一個工具。例如，您可能希望對回應套用其他轉換（例如壓縮），並且可以透過任意數量的這些轉換流傳送回應，因為它是完全標準的介面。 如果您願意，您甚至可以有條件地僅針對某些請求或回應啟用 ESI，例如透過請求標頭、路徑或回應內容類型。

以下是實例化 EsiTransformStream 的方法：

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

建構子接受一個 URL 和一個 Headers 對象，並且可以選擇接受一些選項作為第三個參數。如前所述，ESI 的主要功能是下載附加模板，以包含到結果流中。遇到 標籤使用 fetch 作為檢索模板的底層機制，這些參數的主要目的是配置這些 fetch 呼叫：

• URL用於解析的src中的相對路徑標籤。
• 在發出額外請求來取得範本時使用標頭。
• 可選的配置物件可用於覆寫所進行的獲取的行為，並應用其他自訂行為，例如如何處理取得的範本以及自訂錯誤處理。

在最簡單的情況下，您將僅使用配置物件的取得值。如果您不提供它，那麼它會使用全域獲取函數，但在計算中，您將需要它來指定一個後端，以供在包含模板時使用的獲取（除非您使用動態後端功能）。上面的範例片段在呼叫全域取得之前分配名為 origin_0 的後端。

就是這樣！透過這個簡單的設置，您可以擁有一個服務 ESI 標籤的後端和一個處理它們的計算應用程式。這是您可以運行的完整範例：

小提琴.fastly.dev

支援 ESI 功能

此實作提供了比我們過去提供的其他功能更多的 ESI 功能。

錯誤處理

有時， 引用的文件會被引用。標籤可能由於不存在或導致伺服器錯誤而無法取得。在這些情況下可以透過新增屬性 onerror="continue" 來忽略錯誤。

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

如果 /templates/header.html 導致錯誤，ESI 處理器會默默地忽略該錯誤並替換整個 。帶有有空字串的標籤。

也可以透過使用 來使用更結構化的錯誤處理。塊，看起來像這樣：

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

ESI 處理器首先執行 的內容。如果 esi:include 標記導致錯誤，則 ESI 處理器會執行 .

的內容

要注意的是，整個 是塊被整個 取代。如果成功或 則阻止如果有錯誤。在上面的範例中，如果/templates/header.html 導致錯誤，那麼這也會導致文字"Main header" 不會出現在輸出中；只包含文字「替代標題」。有關更多詳細信息，請參閱 ESI 語言規範。

條件句

ESI 還允許透過對變數執行運行時檢查來進行條件執行。以下是此類檢查的範例：

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

Content

當處理器遇到 時區塊，它貫穿 ;區塊，檢查其測試屬性中設定的表達式。處理器執行第一個 esi:when 區塊，其中表達式的計算結果為 true。如果沒有一個表達式的計算結果為 true，那麼它將選擇執行 esi:otherwise 區塊（如果提供）。整個區塊被替換為 中的整個區塊。或執行的區塊。

處理器提供一組有限的變量，這些變量主要基於請求 cookie。在上面的範例中，檢查名為「group」的 HTTP cookie 的值。我們的實作是基於ESI語言規範；請參閱它以了解更多詳細資訊。

支援的標籤和功能列表

此實作支援 ESI 語言規範的以下標籤。

• ESI：包括
• esi：評論
• esi:刪除
• esi：試試 / esi：試試 / esi：例外
• ESI:選擇 / ESI:何時 / ESI:否則
• esi:vars

;標籤在規格中定義為可選，且不包含在此實作中。

ESI 標籤的屬性支援 ESI 變量， 的 test 屬性支援 ESI 表達式。另外，支持評論。

自訂行為意味著無限的可能性

雖然功能集足以令人興奮，但可編程的真正令人興奮的部分是更多的事情是可能的。引入模板是 ESI 的主要用途，但這絕不是它能做的全部。這是一個例子。

假設您在文件中標記了一個時間戳，您希望在顯示時​​將其表示為相對日期，例如「2 天前」。執行此操作的方法有很多，但為了獲得最佳性能和記憶體影響，最好在流中執行查找/替換。對此 ESI 庫進行程式設計實際上可以作為實現此目的的一個不錯的選擇。

我們可以使用特製的 ES​​I 標籤定義要在後端文件中編碼的時間戳，格式如下：

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

例如，此程式碼片段可以代表太平洋時間 2024 年 1 月 1 日午夜：

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

現在，設定 EsiTransformStream 以在看到該 URL 模式時提供合成替換文件：

<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 進行緩存，因此未來的請求可以從快取 HIT 中受益，同時處理將繼續顯示更新的相對時間。

有關此範例的實例，請查看以下小提琴：

小提琴.fastly.dev

拿它來旋轉一下吧！

@fastly/esi 現已在 npm 上提供，可新增至任何 JavaScript 程式。當然，在 Fastly Compute 程式的邊緣使用它，但事實上，只要您的環境支援 fetch API，它甚至可以在 Compute 之外工作。完整的源代碼可在 GitHub 上取得。

甚至在建立 Fastly 帳戶之前，就可以開始複製上面的任何一個 Fiddle，並用您自己的來源測試它們。當您準備好在我們的全球網路上發布服務時，您可以註冊 Compute 的免費試用版，然後立即開始使用 npm 上的 ESI 庫。

透過計算，邊緣是可編程和模組化的 - 選擇並組合最適合您的解決方案，甚至構建您自己的解決方案。我們並不是唯一能夠為計算提供此類模組的公司。任何人都可以為生態系統做出貢獻並從中受益。而且，一如既往，在 Fastly 社群論壇上與我們見面，讓我們知道您一直在建立什麼！

以上是模組化邊緣端包含 JavaScript 運算元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！