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

# 使用微型前端編寫頁面和檢視
<a name="composition-approaches"></a>

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

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



![\[在用戶端、邊緣和伺服器端層中具有微型前端的原始伺服器、CDN 和用戶端。\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/micro-frontends-aws/images/client-side-edge-side-server-side.png)


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

## 用戶端合成
<a name="client-side-composition"></a>

在用戶端 （瀏覽器或行動 Web 檢視） 上將微型前端動態載入並附加為文件物件模型 (DOM) 片段。微型前端成品，例如 JavaScript 或 CSS 檔案，可以從內容交付網路 (CDNs) 載入，以減少延遲。用戶端合成需要下列項目：
+ 擁有和維護 shell 應用程式或微型前端架構的團隊，可在瀏覽器中於執行時間啟用探索、載入和轉譯微型前端元件
+ HTML、CSS 和 JavaScript 等前端技術的高技能水準，以及對瀏覽器環境的深入了解
+ 最佳化頁面中載入的 JavaScript 數量，以及避免全域命名空間衝突的紀律

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



![\[Web 應用程式會透過 CloudFront 連線至微型前端探索服務和 Amazon S3。\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/micro-frontends-aws/images/serverless-client-side-composition.png)


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

1. 載入 shell 應用程式後，它會向 [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) 發出初始請求，以探索要透過資訊清單端點載入的微型前端。

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

1. 每個微型前端套件都由靜態檔案 （例如 JavaScript、CSS 和 HTML) 組成。檔案託管在 [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) 儲存貯體中，並透過 CloudFront 提供。

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

## 邊緣合成
<a name="edge-side-composition"></a>

使用包括 Edge Side (ESI) 或伺服器端 包括原始伺服器前面某些 CDNs和代理程式支援的 (SSI) 等翻譯技術，在透過線路將頁面傳送至用戶端之前編寫頁面。ESI 需要下列項目：
+ 具有 ESI 功能的 CDN，或伺服器端微型前端前方的代理部署。代理實作，例如 HAProxy、Varnish 和 NGINX 支援 SSI。
+ 了解 ESI 和 SSI 實作的使用和限制。

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

## 伺服器端合成
<a name="server-side-composition"></a>

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

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

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

下圖顯示伺服器端合成。



![\[伺服器端合成分為七個步驟。\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/micro-frontends-aws/images/server-side-composition.png)


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

1. [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) 為應用程式提供唯一的進入點。分佈有兩個原始伺服器：第一個是靜態檔案，第二個是 UI 編寫器。

1. 靜態檔案託管在 [Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) 儲存貯體中。瀏覽器和適用於 HTML 範本的 UI 編寫器會使用它們。

1. UI composer 會在 中的容器叢集上執行[AWS Fargate](https://docs.aws.amazon.com/AmazonECS/latest/developerguide/AWS_Fargate.html)。透過容器化解決方案，您可以視需要使用串流功能和多執行緒轉譯。

1. [參數存放區](https://docs.aws.amazon.com/systems-manager/latest/userguide/systems-manager-parameter-store.html)是 的功能 AWS Systems Manager，用來做為基本的微型前端探索系統。此功能提供 UI 編寫器用來擷取要使用之微型前端端點的鍵值存放區。

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

1. 檢閱微型前端是由 [Lambda](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) 函數組成，使用者檢閱存放在 [DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html) 中。檢閱微型前端會在伺服器端完全轉譯，並輸出 HTML 片段。

1. 產品詳細資訊微型前端是使用 的低程式碼微型前端[AWS Step Functions](https://docs.aws.amazon.com/step-functions/latest/dg/welcome.html)。快速工作流程可以同步叫用，其中包含轉譯 HTML 片段和快取層的邏輯。

如需伺服器端合成的詳細資訊，請參閱部落格文章[伺服器端轉譯微型前端 - 架構](https://aws.amazon.com/blogs/compute/server-side-rendering-micro-frontends-the-architecture/)。