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

# 使用、 AWS Amplify Angular 和 Module Federation 建立微型前端的入口網站
<a name="create-amplify-micro-frontend-portal"></a>

*Milena Godau 和 Pedro Garcia，Amazon Web Services*

## 總結
<a name="create-amplify-micro-frontend-portal-summary"></a>

微型前端架構可讓多個團隊獨立處理前端應用程式的不同部分。每個團隊都可以開發、建置和部署前端的片段，而不會干擾應用程式的其他部分。從最終使用者的角度來看，它似乎是一個單一且具凝聚力的應用程式。不過，他們正在與數個由不同團隊發佈的獨立應用程式互動。

本文件說明如何使用 [AWS Amplify](https://docs.amplify.aws/gen1/angular/)、[角度](https://angular.dev/overview)前端架構和[模組聯合來](https://webpack.js.org/concepts/module-federation/)建立微型前端架構。在此模式中，微型前端在用戶端由 shell （或*父*系） 應用程式組合。shell 應用程式充當擷取、顯示和整合微型前端的容器。shell 應用程式會處理全域路由，這會載入不同的微型前端。[@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) 外掛程式整合 Module Federation 與 Angular。您可以使用 部署 shell 應用程式和微型前端 AWS Amplify。最終使用者透過 Web 入口網站存取應用程式。

入口網站會垂直分割。這表示微型前端是整個檢視或檢視群組，而不是相同檢視的一部分。因此，殼層應用程式一次只會載入一個微型前端。

微型前端會實作為遠端模組。shell 應用程式會延遲載入這些遠端模組，將微前端初始化延遲到需要為止。此方法透過僅載入必要的模組來最佳化應用程式效能。這可減少初始載入時間，並改善整體使用者體驗。此外，您可以透過 webpack 組態檔案 (**webpack.config.js**) 跨模組共用常見的相依性。此實務可提升程式碼重複使用、減少重複，並簡化綁定程序。

## 先決條件和限制
<a name="create-amplify-micro-frontend-portal-prereqs"></a>

**先決條件**
+ 作用中 AWS 帳戶
+ Node.js 和 npm，[已安裝](https://nodejs.org/en/download/)
+ Amplify CLI，[已安裝](https://docs.amplify.aws/gen1/angular/tools/cli/)
+ 角 CLI，[已安裝](https://angular.io/cli)
+ 使用 [的許可](https://docs.aws.amazon.com/service-authorization/latest/reference/list_awsamplify.html) AWS Amplify
+ 熟悉角度

**產品版本**
+ 角度 CLI 13.1.2 版或更新版本
+ @angular-architects/module-federation 14.0.1 版或更新版本
+ Webpack 5.4.0 版或更新版本
+ AWS Amplify 第 1 代

**限制**

微型前端架構是一種強大的方法來建置可擴展性和彈性的 Web 應用程式。不過，在採用此方法之前，請務必了解下列潛在挑戰：
+ **整合** – 其中一個主要挑戰是相較於單體前端，潛在的複雜性增加。協調多個微型前端、處理它們之間的通訊和管理共用相依性可能更為複雜。此外，可能會有與微型前端之間的通訊相關聯的效能額外負荷。此通訊可以增加延遲並降低效能。這需要透過有效的傳訊機制和資料共用策略來解決。
+ **程式碼重複 –** 由於每個微型前端都是獨立開發的，因此存在複製常見功能或共用程式庫程式碼的風險。這可能會增加整體應用程式大小，並帶來維護挑戰。
+ **協調和管理** – 協調跨多個微型前端的開發和部署程序可能具有挑戰性。確保一致的版本控制、管理相依性，以及維護元件之間的相容性在分散式架構中變得更加重要。建立明確的控管、指導方針和自動化測試和部署管道，對於無縫協作和交付至關重要。
+ **測試** – 測試微型前端架構可能比測試單體前端更複雜。它需要額外的工作量和專門的測試策略，以執行跨元件整合測試和end-to-end測試，並驗證多個微型前端的一致使用者體驗。

在承諾微前端方法之前，我們建議您檢閱[了解和實作微前端 AWS](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html)。

## Architecture
<a name="create-amplify-micro-frontend-portal-architecture"></a>

在微型前端架構中，每個團隊都會獨立開發和部署功能。下圖顯示多個 DevOps 團隊如何一起運作。入口網站團隊開發 shell 應用程式。shell 應用程式充當容器。它會擷取、顯示和整合由其他 DevOps 團隊發佈的微型前端應用程式。您可以使用 AWS Amplify 來發佈 shell 應用程式和微型前端應用程式。

![\[將多個微型前端發佈至使用者透過 Web 入口網站存取的 shell 應用程式。\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/images/pattern-img/ddf82a69-bf1b-4ad1-8e60-3dd375699936/images/cf045bf1-11ea-46d9-93cb-3c603122450d.png)


架構圖顯示下列工作流程：

1. 入口網站團隊會開發和維護 shell 應用程式。shell 應用程式會協調微型前端的整合和轉譯，以構成整體入口網站。

1. 團隊 A 和 B 開發和維護整合到入口網站的一或多個微型前端或功能。每個團隊可以在各自的微型前端獨立工作。

1. 最終使用者使用 Amazon Cognito 進行身分驗證。

1. 最終使用者存取入口網站，並載入 shell 應用程式。當使用者導覽時，殼層應用程式會處理路由，並擷取請求的微型前端，並載入其套件。

## 工具
<a name="create-amplify-micro-frontend-portal-tools"></a>

**AWS 服務**
+ [AWS Amplify](https://docs.amplify.aws/angular/start/) 是一組專用工具和功能，可協助前端 Web 和行動開發人員快速建置完整堆疊的應用程式 AWS。在此模式中，您可以使用 Amplify CLI 部署 Amplify 微型前端應用程式。
+ [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) 是一種開放原始碼工具，可協助您 AWS 服務 透過命令列 shell 中的命令與 互動。

**其他工具**
+ [@angular-architects/module-federation](https://github.com/angular-architects/module-federation-plugin) 是整合 Angular 與 Module Federation 的外掛程式。
+ [Angular](https://angular.dev/overview) 是一種開放原始碼 Web 應用程式架構，用於建置現代、可擴展且可測試的單一頁面應用程式。它遵循可促進程式碼重複使用和維護的模組化和元件型架構。
+ [Node.js](https://nodejs.org/en/docs/) 是一種事件驅動的 JavaScript 執行期環境，專為建置可擴展的網路應用程式而設計。
+ [npm](https://docs.npmjs.com/about-npm) 是在 Node.js 環境中執行的軟體登錄檔，用於共用或借用套件和管理私有套件的部署。
+ [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/) 可協助您將獨立編譯和部署的程式碼載入應用程式，例如微型前端或外掛程式。

**程式碼儲存庫**

此模式的程式碼可在 [Micro-frontend 入口網站中使用 Angular 和 Module Federation](https://github.com/aws-samples/angular-module-federation-mfe) GitHub 儲存庫。此儲存庫包含下列兩個資料夾：
+ `shell-app` 包含 shell 應用程式的程式碼。
+ `feature1-app` 包含範例微型前端。shell 應用程式會擷取此微型前端，並將其顯示為入口網站應用程式中的頁面。

## 最佳實務
<a name="create-amplify-micro-frontend-portal-best-practices"></a>

微型前端架構提供許多優勢，但也會帶來複雜性。以下是順暢開發、高品質程式碼和良好使用者體驗的一些最佳實務：
+ **規劃和溝通** – 為了簡化協同合作，請投資前期規劃、設計和明確的溝通管道。
+ **設計一致性** – 使用設計系統、樣式指南和元件程式庫，跨微型前端強制執行一致的視覺化樣式。這可提供有凝聚力的使用者體驗並加速開發。
+ **相依性管理** – 由於微型前端獨立發展，請採用標準化合約和版本控制策略，以有效管理相依性並防止相容性問題。
+ **微型前端架構** – 若要啟用獨立開發和部署，每個微型前端都應對封裝功能負有明確且明確的責任。
+ **整合和通訊** – 為了促進順暢整合並將衝突降至最低，請定義微型前端之間的明確合約和通訊協定，包括 APIs、事件和共用資料模型。
+ **測試和品質保證** – 實作微型前端的測試自動化和持續整合管道。這可改善整體品質、減少手動測試工作，並驗證微型前端互動之間的功能。
+ **效能最佳化** –** **持續監控效能指標並追蹤微型前端之間的相依性。這可協助您識別瓶頸並維持最佳應用程式效能。為此使用效能監控和相依性分析工具。
+ **開發人員體驗** – 透過提供清晰的文件、工具和範例，專注於開發人員體驗。這可協助您簡化開發並加入新的團隊成員。

## 史詩
<a name="create-amplify-micro-frontend-portal-epics"></a>

### 建立 shell 應用程式
<a name="create-the-shell-application"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 建立 shell 應用程式。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 安裝 外掛程式。 | 在 Angular CLI 中，輸入下列命令來安裝 [@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) 外掛程式：<pre>ng add @angular-architects/module-federation --project shell --port 4200</pre> | 應用程式開發人員 | 
| 新增微型前端 URL 做為環境變數。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 定義路由。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 宣告`mfe1`模組。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 準備微前端的預先載入。 | 預先載入微型前端有助於 Webpack 正確交涉共用程式庫和套件。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 調整 HTML 內容。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 

### 建立微型前端應用程式
<a name="create-the-micro-frontend-application"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 建立微型前端。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 安裝 外掛程式。 | 輸入下列命令來安裝 @angular-architects/module-federation 外掛程式：<pre>ng add @angular-architects/module-federation --project mfe1 --port 5000</pre> | 應用程式開發人員 | 
| 建立模組和元件。 | 輸入下列命令來建立模組和元件，並將其匯出為遠端項目模組：<pre>ng g module mfe1 --routing<br />ng g c mfe1</pre> | 應用程式開發人員 | 
| 設定預設路由路徑。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 新增`mfe1`路由。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 編輯 **webpack.config.js** 檔案。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 調整 HTML 內容。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 

### 在本機執行應用程式
<a name="run-the-applications-locally"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 執行`mfe1`應用程式。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 執行 shell 應用程式。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 

### 重構 shell 應用程式以處理微前端載入錯誤
<a name="refactor-the-shell-application-to-handle-a-micro-frontend-loading-error"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 建立模組和元件。 | 在 shell 應用程式的根資料夾中，輸入下列命令來建立錯誤頁面的模組和元件：<pre>ng g module error-page --routing<br />ng g c error-page</pre> | 應用程式開發人員 | 
| 調整 HTML 內容。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 設定預設路由路徑。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 建立 函數以載入微型前端。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 
| 測試錯誤處理。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 

### 使用 部署應用程式 AWS Amplify
<a name="deploy-the-applications-by-using-amplifylong"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 部署微型前端。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員、AWS DevOps | 
| 部署 shell 應用程式。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員、應用程式擁有者 | 
| 啟用 CORS。 | 由於 shell 和微型前端應用程式是獨立託管在不同網域上，因此您必須在微型前端上啟用跨來源資源共用 (CORS)。這可讓 shell 應用程式從不同的原始伺服器載入內容。若要啟用 CORS，您可以新增自訂標頭。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員、AWS DevOps | 
| 在 shell 應用程式中建立重寫規則。 | 角度 shell 應用程式設定為使用 HTML5 路由。如果使用者執行硬重新整理，Amplify 會嘗試從目前的 URL 載入頁面。這會產生 403 錯誤。若要避免這種情況，您可以在 Amplify 主控台中新增重寫規則。若要建立重寫規則，請遵循下列步驟：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員、AWS DevOps | 
| 測試 Web 入口網站。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 應用程式開發人員 | 

### 清除資源
<a name="clean-up-resources"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 刪除應用程式。 | 如果您不再需要 shell 和微型前端應用程式，請將其刪除。這有助於避免您未使用之資源的費用。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 一般 AWS | 

## 疑難排解
<a name="create-amplify-micro-frontend-portal-troubleshooting"></a>


| 問題 | 解決方案 | 
| --- | --- | 
| 執行 `amplify init`命令時沒有可用的 AWS 設定檔 | 如果您沒有設定 AWS 設定檔，您仍然可以繼續執行 `amplify init`命令。不過，當系統提示您輸入身分驗證方法時，您需要選取 `AWS access keys`選項。準備好您的 AWS 存取金鑰和私密金鑰。或者，您可以為 設定具名設定檔 AWS CLI。如需說明，請參閱 AWS CLI 文件中的[組態和登入資料檔案設定](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html)。 | 
| 載入遠端項目時發生錯誤 | 如果您在 Shell 應用程式的 **main.ts** 檔案中載入遠端項目時發生錯誤，請確定已正確設定`environment.mfe1URL`變數。此變數的值應該是微型前端的 URL。 | 
| 存取微型前端時發生錯誤 404 | 如果您在嘗試存取本機微型前端時收到 404 錯誤，例如在 `http://localhost:4200/mfe1`，請檢查下列項目：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 

## 其他資訊
<a name="create-amplify-micro-frontend-portal-additional"></a>

**AWS 文件**
+ [了解和實作 上的微型前端 AWS](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html)(AWS 方案指引）
+ [Amplify CLI](https://docs.amplify.aws/gen1/angular/tools/cli/) (Amplify 文件）
+ [Amplify 託管](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) (Amplify 文件）

**其他參考**
+ [模組聯合](https://webpack.js.org/concepts/module-federation/)
+ [Node.js](https://nodejs.org/en/)
+ [角度](https://angular.io/)
+ [@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation)