微前端和微服务
Micro frontends and micro services
我们有一组微服务,它们都执行特定的功能。为了配置、操作和监控这些服务,我们有一个单一的网络应用程序。这目前仍然是一个整体。
我们的客户部署了微服务,但并非每个客户都需要所有微服务。这意味着 Web 应用程序包含许多客户不使用的功能,必须从视图中隐藏。
我们想分解 Web 应用程序,以便我们可以只部署客户需要或他有许可证的那些 UI 组件。
为此,我们一直在研究微前端。但是,到目前为止,我遇到的 none 个示例涉及多租户和动态组件的主题。
我们的应用程序目前是用 React 编写的。我一直在研究 Next.js、System.JS、Piral 和 Single-SPA 作为我们解决方案的选项,但不确定这些工具是否可以帮助我们实现目标。
那么有没有人知道如何创建容器应用程序来动态加载 UI 已部署微服务后端的组件?
微服务最强大的案例之一是通过强隔离来部署和更改它们,因此:
- 更容易动态部署新的微服务。
- 更容易更改现有的而没有副作用。
- 必要时更容易删除服务。
要在前端应用微服务,我认为查看这 3 点是否也适用对于验证我们从此类架构中受益很重要(因为它不像构建单体那么容易)。
我不认为“微前端”在今天真的很流行,但这里有一些关于如何实现它们的想法:
- 多前端 - 应用程序被分成多个前端,看起来和感觉起来就像是同一个应用程序。
为了确保它们看起来都一样,您需要某种所有前端都使用的库(或者更好 - 一个 CDN,可以存储这些资源,例如 css 以允许动态更改样式)。
- AWS就是一个例子,每个“aws服务”都有自己的前端(看地址就知道了)。 AWS 看起来像一个统一的应用程序,但分为单独维护的微前端。
- 主前端 - 向客户端提供单个应用程序,但此应用程序使用 iframe 嵌入微前端。
再次让每个微前端看起来都一样,你需要某种库。
这种方法比其他方法更适合某些应用程序,因为它具有单一前端的优点。然而这是有代价的,因为 iframe 并不完美
(https://www.ostraining.com/blog/webdesign/against-using-iframes/).
- 我想您可以在没有 iframe 的情况下使用 next.js 实现 Master 前端,但恐怕与方法 #1 相比它相当复杂。
我们有一组微服务,它们都执行特定的功能。为了配置、操作和监控这些服务,我们有一个单一的网络应用程序。这目前仍然是一个整体。
我们的客户部署了微服务,但并非每个客户都需要所有微服务。这意味着 Web 应用程序包含许多客户不使用的功能,必须从视图中隐藏。
我们想分解 Web 应用程序,以便我们可以只部署客户需要或他有许可证的那些 UI 组件。
为此,我们一直在研究微前端。但是,到目前为止,我遇到的 none 个示例涉及多租户和动态组件的主题。
我们的应用程序目前是用 React 编写的。我一直在研究 Next.js、System.JS、Piral 和 Single-SPA 作为我们解决方案的选项,但不确定这些工具是否可以帮助我们实现目标。
那么有没有人知道如何创建容器应用程序来动态加载 UI 已部署微服务后端的组件?
微服务最强大的案例之一是通过强隔离来部署和更改它们,因此:
- 更容易动态部署新的微服务。
- 更容易更改现有的而没有副作用。
- 必要时更容易删除服务。
要在前端应用微服务,我认为查看这 3 点是否也适用对于验证我们从此类架构中受益很重要(因为它不像构建单体那么容易)。
我不认为“微前端”在今天真的很流行,但这里有一些关于如何实现它们的想法:
- 多前端 - 应用程序被分成多个前端,看起来和感觉起来就像是同一个应用程序。 为了确保它们看起来都一样,您需要某种所有前端都使用的库(或者更好 - 一个 CDN,可以存储这些资源,例如 css 以允许动态更改样式)。
- AWS就是一个例子,每个“aws服务”都有自己的前端(看地址就知道了)。 AWS 看起来像一个统一的应用程序,但分为单独维护的微前端。
- 主前端 - 向客户端提供单个应用程序,但此应用程序使用 iframe 嵌入微前端。 再次让每个微前端看起来都一样,你需要某种库。 这种方法比其他方法更适合某些应用程序,因为它具有单一前端的优点。然而这是有代价的,因为 iframe 并不完美 (https://www.ostraining.com/blog/webdesign/against-using-iframes/).
- 我想您可以在没有 iframe 的情况下使用 next.js 实现 Master 前端,但恐怕与方法 #1 相比它相当复杂。