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

# 使用微前端撰写页面和视图
<a name="composition-approaches"></a>

您可以使用客户端合成、边缘组合和服务器端合成来组合应用程序的视图。组合模式在必要的团队技能、容错能力、性能和缓存行为方面具有不同的特征。

下图显示了微前端架构的客户端、边缘端和服务器端层的组合是如何发生的。



![\[Origin、CDN 和客户端，在客户端、边缘和服务器端层都有微前端。\]](http://docs.aws.amazon.com/zh_cn/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 应用程序可连接到微前端发现服务和 Amazon S3。 CloudFront\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/micro-frontends-aws/images/serverless-client-side-composition.png)


客户端合成在浏览器环境中通过 shell 应用程序进行。该图显示了以下细节：

1. 加载外壳应用程序后，它会向 [Amazon](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) 发出初始请求 CloudFront，以发现要通过清单终端节点加载的微前端。

1. 清单包含有关每个微前端的信息（例如，名称、URL、版本和后备行为）。清单由微前端发现服务提供。在图中，该发现服务由 Amazon API Gateway（一个 AWS Lambda 函数）和亚马逊 DynamoDB 表示。shell 应用程序使用清单信息请求各个微前端在给定布局中撰写页面。

1. 每个微前端包都由静态文件（例如 JavaScript CSS 和 HTML）组成。这些文件托管在[亚马逊简单存储服务 (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) 存储桶中并通过它提供服务。 CloudFront

1. 团队可以使用他们拥有的部署管道部署其微前端的新版本并更新清单信息。

## 边缘构图
<a name="edge-side-composition"></a>

在通过网络将页面发送给客户端之前，使用某些 CDNs 技术以及源服务器前面的代理支持的 Edge Side Includes (ESI) 或服务器端包含 (SSI) 等嵌入技术来撰写页面。ESI 要求满足以下条件：
+ 具有 ESI 功能的 CDN，或者服务器端微前端前的代理部署。Varnish 和 NGINX 等 HAProxy代理实现支持 SSI。
+ 了解 ESI 和 SSI 实现的使用和局限性。

开始使用新应用程序的团队通常不会为其构图模式选择边缘构图。但是，这种模式可能会为依赖嵌入的遗留应用程序提供一条途径。

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

在页面缓存到边缘之前，使用源服务器来撰写页面。这可以通过传统技术（例如 PHP、Jakarta Server Pages (JSP) 或模板库）来完成，通过包含来自微前端的片段来撰写页面。您还可以使用服务器上运行的 JavaScript 框架（例如 Next.js），在服务器上使用服务器端渲染 (SSR) 来撰写服务器上的页面。

在服务器上呈现页面后，可以对其进行缓存 CDNs 以减少延迟。部署新版本的微前端时，必须重新渲染页面，并且必须更新缓存以向客户提供最新版本。

服务器端组合需要对服务器环境有深入的了解，以建立部署、发现服务器端微前端和缓存管理的模式。

下图显示了服务器端的构成。



![\[分七个步骤完成服务器端组合。\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/micro-frontends-aws/images/server-side-composition.png)


该图包括以下组件和流程：

1. [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) 为该应用程序提供了一个独特的入口点。该发行版有两个来源：第一个用于静态文件，第二个用于用户界面编辑器。

1. 静态文件托管在 [Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) 存储桶中。它们由浏览器和界面编辑器用于 HTML 模板。

1. UI 编辑器在中的容器集群上运行[AWS Fargate](https://docs.aws.amazon.com/AmazonECS/latest/developerguide/AWS_Fargate.html)。借助容器化解决方案，您可以根据需要使用流媒体功能和多线程渲染。

1. [Parameter Store](https://docs.aws.amazon.com/systems-manager/latest/userguide/systems-manager-parameter-store.html)（一种功能）被用作基本的微前端发现系统。 AWS Systems Manager此功能提供了 UI 编辑器使用的键值存储，用于检索要使用的微前端端点。

1. 通知微前端将经过优化的 JavaScript 捆绑包存储在 S3 存储桶中。这会在客户端上呈现，因为它必须对用户交互做出反应。

1. [评论微前端由 Lambda 函数组成，用户评论存储在 [Dynam](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) oDB 中。](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) Express Workflow 可以同步调用，它包含渲染 HTML 片段的逻辑和缓存层。

有关服务器端组合的更多信息，请参阅博客文章[服务器端渲染微前端——架构。](https://aws.amazon.com/blogs/compute/server-side-rendering-micro-frontends-the-architecture/)