本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 使用 AWS Amplify、Angular 和模块联合为微前端创建门户
<a name="create-amplify-micro-frontend-portal"></a>

*Milena Godau 和 Pedro Garcia，Amazon Web Services*

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

通过微前端架构，多个团队能够独立处理前端应用程序的不同部分。每个团队都可以开发、构建和部署前端的某个片段，而不会干扰应用程序的其他部分。从最终用户的角度来看，它似乎就是一个单一的、有凝聚力的应用程序。但是，他们正在与由不同团队发布的多个独立应用程序进行交互。

本文档介绍了如何使用 [AWS Amplify](https://docs.amplify.aws/gen1/angular/)、[Angular](https://angular.dev/overview) 前端框架和 [Module Federation](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 应用程序一次只能加载一个微前端。

微前端是以远程模块的形式实施的。Shell 应用程序会延迟加载这些远程模块，因此将微前端初始化推迟到需要时再执行。这种方法通过仅加载必要的模块来优化应用程序性能。这就可以减少初始加载时间，并改善整体用户体验。此外，您可以通过 webpack 配置文件（**webpack.config.js**），跨模块共享常见的依赖项。这种做法可以促进代码重复使用，减少重复并简化捆绑过程。

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

**先决条件**
+ 活跃的 AWS 账户
+ Node.js and npm，[已安装](https://nodejs.org/en/download/)
+ Amplify CLI，[已安装](https://docs.amplify.aws/gen1/angular/tools/cli/)
+ Angular CLI，[已安装](https://angular.io/cli)
+ 使用@@ [权限](https://docs.aws.amazon.com/service-authorization/latest/reference/list_awsamplify.html) AWS Amplify
+ 熟悉 Angular

**产品版本**
+ Angular CLI 版本 13.1.2 或更高版本
+ @angular-architects/module-federation 版本 14.0.1 或更高版本
+ webpack 版本 5.4.0 或更高版本
+ AWS Amplify 第 1 代

**限制**

微前端架构是一种构建具有弹性的可扩展 Web 应用程序的强大方法。但是，在采用这种方法之前，请务必了解以下潜在挑战：
+ **集成** – 与整体式前端相比，其中一个关键挑战是复杂性可能会增加。编排多个微前端、处理它们之间的通信以及管理共享依赖项可能会更加复杂。此外，微前端之间的通信可能会产生性能开销。这种通信会增加延迟并降低性能。这一问题需要通过高效消息收发机制和数据共享策略来解决。
+ **代码重复** – 由于每个微前端都是独立开发的，因此通用功能或共享库可能存在代码重复风险。这可能会增加应用程序的总体大小，并带来维护挑战。
+ **协调和管理** – 跨多个微前端协调开发和部署流程可能具有挑战性。在分布式架构中，确保版本控制一致、管理依赖项以及维护组件之间的兼容性变得更为重要。建立明确的治理、指导原则以及自动测试和部署管道，对于实现无缝协作和交付至关重要。
+ **测试** – 测试微前端架构可能比测试整体式前端更为复杂。它需要付出额外的努力和专门的测试策略来执行跨组件集成测试和 end-to-end测试，并验证跨多个微前端的一致用户体验。

在承诺使用微前端方法之前，我们建议您先查看 “[了解和实现微](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html)前端”。 AWS

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

在微前端架构中，每个团队都可独立开发和部署功能。下图显示了多个 DevOps 团队如何协同工作。门户团队开发 Shell 应用程序。Shell 应用程序则可充当容器，它检索、显示和集成其他团队发布的微前端应用程序。 DevOps 您用于发布 AWS Amplify shell 应用程序和微前端应用程序。

![\[将多个微前端发布到 Shell 应用程序，而用户可通过 Web 门户访问该应用程序。\]](http://docs.aws.amazon.com/zh_cn/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 应用程序。当用户导航时，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/) 可帮助您将独立编译和部署的代码（例如微前端或插件）加载到应用程序中。

**代码存储库**

此模式的代码可在[微前端门户中使用 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>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 创建 Shell 应用程序。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/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_cn/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 应用程序开发人员 | 
| 定义路由。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/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_cn/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_cn/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_cn/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 应用程序开发人员 | 

### 创建微前端应用程序
<a name="create-the-micro-frontend-application"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 创建微前端。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/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_cn/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_cn/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_cn/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_cn/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 应用程序开发人员 | 

### 在本地运行应用程序
<a name="run-the-applications-locally"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 运行 `mfe1` 应用程序。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/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_cn/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>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 创建模块和组件。 | 在 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_cn/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 应用程序开发人员 | 
| 设置默认路由路径。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 应用程序开发人员 | 
| 创建函数以加载微前端。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 应用程序开发人员 | 
| 测试错误处理。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 应用程序开发人员 | 

### 使用以下方法部署应用程序 AWS Amplify
<a name="deploy-the-applications-by-using-amplifylong"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 部署微前端。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/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_cn/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_cn/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | AWS 应用程序开发人员 DevOps | 
| 在 Shell 应用程序上创建重写规则。 | Angular 外壳应用程序配置为使用 HTML5 路由。如果用户执行硬刷新，Amplify 会尝试从当前 URL 加载页面。这便会生成 403 错误。为避免这种情况，您可以在 Amplify 控制台中添加一条重写规则。要创建重写规则，请执行以下步骤：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/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_cn/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 应用程序开发人员 | 

### 清理 资源
<a name="clean-up-resources"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 删除应用程序。 | 如果您不再需要 Shell 和微前端应用程序，请将其删除。这有助于防止对您未使用的资源产生费用。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/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 错误 | 如果您在尝试访问本地微前端（例如 `http://localhost:4200/mfe1`）时出现 404 错误，请检查以下内容：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 

## 附加信息
<a name="create-amplify-micro-frontend-portal-additional"></a>

**AWS 文档**
+ [在 AWS（AWS 规范性指导）上理解和实现微前端](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html)
+ [Amplify CLI](https://docs.amplify.aws/gen1/angular/tools/cli/)（Amplify 文档）
+ [Amplify Hosting](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)（Amplify 文档）

**其他参考资料**
+ [Module Federation](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)