View a markdown version of this page

AWS 中的伺服器端轉譯微前端 - AWS 中的伺服器端轉譯微前端

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

AWS 中的伺服器端轉譯微前端

發佈日期:2022 年 9 月 9 日 (圖表歷史記錄)

此架構說明如何 AWS 使用無伺服器方法在 中實作伺服器端轉譯微型前端。每個無伺服器微型前端都會傳回 HTML 片段 (HTML-on-the-wire),而 UI 編譯器會將這些獨立部分拼接在一起,為使用者建立無縫的體驗。

AWS 中的伺服器端轉譯微前端

架構圖顯示使用 Amazon CloudFront、Amazon Simple Storage Service AWS Lambda AWS Step Functions、AWS Fargate 和 Amazon DynamoDB 的伺服器端轉譯微型前端。

下列步驟說明 架構:

  1. Amazon CloudFront 做為兩個原始伺服器的進入點:Amazon Simple Storage Service 儲存貯體和公有 Application Load Balancer。

  2. Amazon S3 儲存貯體包含瀏覽器的所有靜態檔案,例如常見的微型前端相依性、映像和 CSS 檔案。它還包含 UI 編寫器用來將每個微型前端放置在 HTML 頁面上的範本。

  3. UI 編寫器會在 AWS Fargate 叢集上執行,並將不同的微型前端拼接在一起,串流回應以改善效能。使用 Amazon ElastiCache 快取微型前端輸出或整個頁面,以提高效能。

  4. 使用 AWS Systems Manager 參數存放區收集所有微服務端點。它們可以是 HTTP 端點或 Amazon Resource Name (ARNs),可解耦團隊層級相依性。

  5. 無伺服器微型前端使用 AWS LambdaAmazon DynamoDB 來存放資料並轉譯 HTML 片段,以供內嵌在 UI 編寫器範本中。

  6. 對於第三方微型前端,請使用 Amazon API Gateway 來驗證權杖或 API 金鑰,確保您的應用程式只能存取該端點。

  7. 使用 AWS Step Functions Express 作為產生微型前端的低程式碼解決方案。Step Functions 與超過 200 個服務整合,以減少運算、從 DynamoDB 原生擷取資料,並將轉譯委派給 Lambda 函數。

深入閱讀

如需詳細資訊,請參閱下列資源:

圖表歷史記錄

若要收到此參考架構圖的更新通知,請訂閱 RSS 摘要。

變更描述日期

初次出版

首先發佈參考架構圖。

2022 年 9 月 9 日

注意

若要訂閱 RSS 更新,您必須為正在使用的瀏覽器啟用 RSS 外掛程式。