微前端和微服务

Micro frontends and micro services

我们有一组微服务,它们都执行特定的功能。为了配置、操作和监控这些服务,我们有一个单一的网络应用程序。这目前仍然是一个整体。

我们的客户部署了微服务,但并非每个客户都需要所有微服务。这意味着 Web 应用程序包含许多客户不使用的功能,必须从视图中隐藏。

我们想分解 Web 应用程序,以便我们可以只部署客户需要或他有许可证的那些 UI 组件。

为此,我们一直在研究微前端。但是,到目前为止,我遇到的 none 个示例涉及多租户和动态组件的主题。

我们的应用程序目前是用 React 编写的。我一直在研究 Next.js、System.JS、Piral 和 Single-SPA 作为我们解决方案的选项,但不确定这些工具是否可以帮助我们实现目标。

那么有没有人知道如何创建容器应用程序来动态加载 UI 已部署微服务后端的组件?

微服务最强大的案例之一是通过强隔离来部署和更改它们,因此:

  1. 更容易动态部署新的微服务。
  2. 更容易更改现有的而没有副作用。
  3. 必要时更容易删除服务。

要在前端应用微服务,我认为查看这 3 点是否也适用对于验证我们从此类架构中受益很重要(因为它不像构建单体那么容易)。

我不认为“微前端”在今天真的很流行,但这里有一些关于如何实现它们的想法:

  1. 多前端 - 应用程序被分成多个前端,看起来和感觉起来就像是同一个应用程序。 为了确保它们看起来都一样,您需要某种所有前端都使用的库(或者更好 - 一个 CDN,可以存储这些资源,例如 css 以允许动态更改样式)。
  • AWS就是一个例子,每个“aws服务”都有自己的前端(看地址就知道了)。 AWS 看起来像一个统一的应用程序,但分为单独维护的微前端。
  1. 主前端 - 向客户端提供单个应用程序,但此应用程序使用 iframe 嵌入微前端。 再次让每个微前端看起来都一样,你需要某种库。 这种方法比其他方法更适合某些应用程序,因为它具有单一前端的优点。然而这是有代价的,因为 iframe 并不完美 (https://www.ostraining.com/blog/webdesign/against-using-iframes/).
  • 我想您可以在没有 iframe 的情况下使用 next.js 实现 Master 前端,但恐怕与方法 #1 相比它相当复杂。