View a markdown version of this page

使用微型前端編寫頁面和檢視 - AWS 方案指引
用戶端合成邊緣合成伺服器端合成

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

使用微型前端編寫頁面和檢視

您可以使用用戶端合成、邊緣合成和伺服器端合成來編寫應用程式的檢視。合成模式在必要的團隊技能、容錯能力、效能和快取行為方面具有不同的特性。

下圖顯示合成如何發生在微型前端架構的用戶端、邊緣和伺服器端層。

在用戶端、邊緣和伺服器端層中具有微型前端的原始伺服器、CDN 和用戶端。

下列各節會討論用戶端、邊緣和伺服器端層。

用戶端合成

在用戶端 （瀏覽器或行動 Web 檢視） 上將微型前端動態載入並附加為文件物件模型 (DOM) 片段。微型前端成品，例如 JavaScript 或 CSS 檔案，可以從內容交付網路 (CDNs) 載入，以減少延遲。用戶端合成需要下列項目：

  • 擁有和維護 shell 應用程式或微型前端架構的團隊，可在瀏覽器中於執行時間啟用探索、載入和轉譯微型前端元件

  • HTML、CSS 和 JavaScript 等前端技術的高技能水準，以及對瀏覽器環境的深入了解

  • 最佳化頁面中載入的 JavaScript 數量，以及避免全域命名空間衝突的紀律

下圖顯示無伺服器用戶端合成的範例 AWS 架構。

Web 應用程式會透過 CloudFront 連線至微型前端探索服務和 Amazon S3。

用戶端合成會透過 shell 應用程式在瀏覽器環境中發生。圖表顯示下列詳細資訊：

  1. 載入 shell 應用程式後，它會向 Amazon CloudFront 發出初始請求，以探索要透過資訊清單端點載入的微型前端。

  2. 資訊清單包含每個微型前端的資訊 （例如，名稱、URL、版本和備用行為）。資訊清單由微型前端探索服務提供。在圖表中，此探索服務由 Amazon API Gateway、 AWS Lambda 函數和 Amazon DynamoDB 表示。shell 應用程式使用資訊清單資訊，請求個別微型前端在指定的配置中編寫頁面。

  3. 每個微型前端套件都由靜態檔案 （例如 JavaScript、CSS 和 HTML) 組成。檔案託管在 Amazon Simple Storage Service (Amazon S3) 儲存貯體中，並透過 CloudFront 提供。

  4. 團隊可以使用他們擁有的部署管道，部署新版本的微型前端並更新資訊清單資訊。

邊緣合成

使用包括 Edge Side (ESI) 或伺服器端 包括原始伺服器前面某些 CDNs和代理程式支援的 (SSI) 等翻譯技術，在透過線路將頁面傳送至用戶端之前編寫頁面。ESI 需要下列項目：

  • 具有 ESI 功能的 CDN，或伺服器端微型前端前方的代理部署。代理實作，例如 HAProxy、Varnish 和 NGINX 支援 SSI。

  • 了解 ESI 和 SSI 實作的使用和限制。

啟動新應用程式的團隊通常不會為其合成模式選擇邊緣合成。不過，此模式可能會為依賴 轉譯的舊版應用程式提供途徑。

伺服器端合成

在頁面快取到邊緣之前，使用原始伺服器編寫頁面。這可以透過 PHP、雅加達伺服器頁面 (JSP) 或範本程式庫等傳統技術來完成，以包含來自微型前端的片段來編寫頁面。您也可以使用在伺服器上執行的 JavaScript 架構，例如 Next.js，在具有伺服器端轉譯 (SSR) 的伺服器上編寫頁面。

在伺服器上轉譯頁面之後，可以在 CDNs上快取頁面，以減少延遲。部署新版本的微型前端時，必須重新轉譯頁面，而且必須更新快取，才能將最新版本交付給客戶。

伺服器端合成需要深入了解伺服器環境，才能建立部署模式、探索伺服器端微型前端和快取管理。

下圖顯示伺服器端合成。

伺服器端合成分為七個步驟。

圖表包含下列元件和程序：

  1. Amazon CloudFront 為應用程式提供唯一的進入點。分佈有兩個原始伺服器：第一個是靜態檔案，第二個是 UI 編寫器。

  2. 靜態檔案託管在 Amazon S3 儲存貯體中。瀏覽器和適用於 HTML 範本的 UI 編寫器會使用它們。

  3. UI composer 會在 中的容器叢集上執行AWS Fargate。透過容器化解決方案，您可以視需要使用串流功能和多執行緒轉譯。

  4. 參數存放區是 的功能 AWS Systems Manager，用來做為基本的微型前端探索系統。此功能提供 UI 編寫器用來擷取要使用之微型前端端點的鍵值存放區。

  5. 通知微型前端會將最佳化 JavaScript 套件存放在 S3 儲存貯體中。這會在用戶端上轉譯，因為它必須對使用者互動做出反應。

  6. 檢閱微型前端是由 Lambda 函數組成，使用者檢閱存放在 DynamoDB 中。檢閱微型前端會在伺服器端完全轉譯，並輸出 HTML 片段。

  7. 產品詳細資訊微型前端是使用 的低程式碼微型前端AWS Step Functions。快速工作流程可以同步叫用，其中包含轉譯 HTML 片段和快取層的邏輯。

如需伺服器端合成的詳細資訊，請參閱部落格文章伺服器端轉譯微型前端 - 架構。