【微前端架构】AWS 上的微前端架构

微服务架构的特点是独立服务，这些服务专注于特定的业务功能，并由小型、自包含的团队维护。微服务架构经常用于在 AWS 上开发的 Web 应用程序，这是有充分理由的。它们提供了许多众所周知的好处，例如开发敏捷性、技术自由、有针对性的部署等等。尽管微服务很受欢迎，但许多前端应用程序仍然以单体风格构建。例如，他们有一个与所有后端微服务交互的大型代码库，并由一大群开发人员维护。

图 1. 带有单体前端的微服务后端

什么是微前端？

微前端架构将微服务开发原则引入前端应用程序。在微前端架构中，开发团队独立构建和部署“子”前端应用程序。这些应用程序由“父”前端应用程序组合而成，该前端应用程序充当容器来检索、显示和集成各种子应用程序。在此父/子模型中，用户与看似单个应用程序的交互。实际上，他们正在与由不同团队发布的多个独立应用程序进行交互。

图 2. 带有微前端的微服务后端

微前端的好处

与单体前端相比，微前端具有以下优势：

微前端挑战

相反，微前端提出了以下挑战：

构建微前端

微前端架构模式最困难的挑战是将子应用程序与父应用程序集成。优先考虑用户体验对于任何前端应用程序都至关重要。在微前端的上下文中，这意味着确保用户可以在父应用程序中从一个子应用程序无缝导航到另一个子应用程序。我们希望避免破坏性行为，例如页面刷新或多次登录。在最基本的定义中，父/子集成涉及父应用程序在加载父应用程序时动态检索和呈现子应用程序。渲染子应用程序取决于子应用程序的构建方式，这可以通过多种方式完成。两种最流行的父/子集成方法是：

将每个子应用程序构建为 Web 组件。

将每个子应用程序作为独立模块导入。这些模块要么声明一个函数来呈现自身，要么由父应用程序动态导入（例如使用模块联合）。

将子应用注册为 Web 组件：

将子应用注册为模块：

下图显示了一个基于 AWS 构建的示例微前端架构。

3. Micro- on AWS

在此示例中，每个服务团队都在运行一个单独的、相同的堆栈来构建他们的应用程序。他们使用 AWS 开发人员工具并使用 将应用程序部署到 (S3)。CI/CD 管道使用共享组件，例如 CSS 库、API 包装器或存储在 AWS 中的自定义模块。这有助于提高父应用程序和子应用程序之间的一致性。

当您检索父应用程序时，它应该会提示您登录身份提供程序并检索 JWT。在此示例中，身份提供商是 用户池。成功登录后，父应用程序从 检索子应用程序并将它们呈现在父应用程序中。或者，当您导航到特定路线时，父应用程序可以选择按需呈现子应用程序。子应用程序不应要求您再次登录到 用户池。应将它们配置为使用父应用程序获取的 JWT，或者从 静默检索新的 JWT。

结论

微前端架构为前端应用程序引入了微服务开发的许多熟悉的好处。微前端架构还允许您管理小型独立组件，从而简化构建复杂前端应用程序的过程。

本文

讨论：知识星球【首席架构师圈】或者加微信小号【】或者加QQ群【】

公众号

【】

【超级架构师】

精彩图文详解架构方法论，架构实践，技术原理，技术趋势。