微前端和微服务

Question

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

微服务部署在我们的客户处，但并非所有客户都需要这些微服务。这意味着 Web 应用程序包含许多客户未使用的功能，必须隐藏起来。

我们希望拆分 Web 应用程序，以便我们可以仅部署客户需要或拥有许可证的那些 UI 组件。

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

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

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

Answer 1

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

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 实现主前端，但与方法 #1 相比，恐怕它相当复杂。