时间戳

首页 > 解决方案 > 微前端和微服务

reactjs - 微前端和微服务

问题描述

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

微服务部署在我们的客户处，但并非每个客户都需要它们。这意味着 Web 应用程序包含许多客户未使用的功能，必须隐藏在视图之外。

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

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

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

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

标签： reactjsmicroservicesmicro-frontend

解决方案

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

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

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

我不认为“微前端”今天真的是一件事，但这里有一些关于如何实现它们的想法：

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

推荐阅读