问题标签 [micro-frontend]

我正在尝试创建一个小项目来实现微前端文章之后的微前端架构。我正在为每个 MFE（微前端）创建多个存储库，并为应用程序使用 Redux。我有以下架构：

1. Frame- 一个集中的（主）存储库，负责根据路由（我正在使用connected-react-router）呈现主应用程序部分和 MFE。它初始化 Redux 存储并添加一个injectReducer函数来动态添加减速器，如redux文档中的代码拆分中所述。框架获取特定 MFE 的清单并呈现它。该框架还有一些用于身份验证的 redux 数据。
2. MFEs- 这些是单独的功能应用程序，并按帧呈现。

现在我有一个问题，我想在injectReducer我的 MFE 中使用函数来动态添加减速器来存储。为此，我需要访问store由框架创建的同一实例。如this answer中所述，理想的方法是导出创建的商店实例并使用它，但是我们如何在多个存储库中共享相同的商店实例？

在阅读有关微前端的文献时，我总是看到前端是由不同团队开发的微前端组成的。每个微前端至少有一个后端。我没有看到后端相互通信。那正确吗？他们是否以这种方式分开，以至于他们可以完全生活而无需后端之间的任何通信？

我正在测试演示：https ://github.com/marconi1992/ara-nuxtjs-demo

将 props 更改为 Nuxt.js 时，有没有办法动态更改“nova 组件”中的 props？或者其他方式在 Nuxt.js 和 Nova 组件之间进行动态通信？

Nuxt 组件：

Nova 组件（Vue）：

在我的项目中，我们遵循微前端架构，其中 HTML 页面是通过合并多个 Web 组件来构建的。这会将多个 HTML 文件组合成一个 HTML 文件。这样一来，我们就有出现语法无效的损坏 HTML 代码的风险。

为了在运行时组合多个动态生成的 HTML 页面，我们使用 nginx 反向代理。

我想要一个可以帮助识别此类情况并提供适当帮助以减轻这种情况的工具。

让我知道是否有任何漂亮的工具或其他东西

例如：这是我的主页：

Resource.html 页面：

footer.html 页面：

请记下<!--#include virtual="/commons/inc/resources" -->和<!--# include virtual="/commons/inc/footer" -->标签。有resources.html和footer.html页面，这些标签被nginx解析，nginx会分别用resources.html和footer.html的内容替换这些标签。

我想要一个可以验证最终结果的工具，即 nginx 在解析所有<!--#include virtual....-->标签后生成的 html 页面。

我正在使用单水疗角框架的微前端方法工作。我有一个根容器应用程序，它在 4200 端口和 2 个微应用程序说 app1 @5201 和 app2 @ 4201 端口运行。我没有遇到 app2 的任何问题，它按照微前端方法完美运行。

在 app1 中，我有一个登录组件和仪表板组件。所以当我点击app1时，它首先点击登录组件（所需的流程：它必须检查用户配置文件并进行身份验证，并根据结果导航到仪表板组件）。为了在 app1 中检查此用户配置文件，我正在使用应用程序服务器（运行 @8443 端口）运行后端服务，并且代理在代理 config.json 中配置如下：{“/app1/*”：{“目标”：“http ://localhost:8443/", "secure": false } } 并且在 app1 中的 npm start 期间，它会从包 .json 中获取此语句（--proxy-config proxy.conf.json），这就是我们配置代理的方式用于 app1 中的后端服务。

现在，来到微前端，当我从根容器点击 app1 时，我得到一个拒绝访问的图像而不是仪表板。在内部，它点击了 app1 的登录组件，当我看到网络选项卡时，它点击了状态为 200k 的用户配置文件方法，但响应是整个 html（无论我在根容器的 index.html 中给出了什么）和访问被拒绝的图像被调用和渲染。它没有击中后端服务器本身。

但是当我点击 http://localhost:5201/app1/app1/app1-user-profile 时，我可以在浏览器中看到所需的响应。所以当我从其他应用程序路由时，是什么阻止我获取 app1 的仪表板/4200 端口？

谁能在这方面指导我？我是否还需要在根容器和其他微应用中配置代理设置？single-spa 可以帮助我进行此代理配置吗？

Im interested in talking to anybody who has migrated or started to migrate a monolith using the Micro Front End Architecture.

The monolith Im looking to migrate is a single page application based upon a in house built framework.

Which approach did you take? Iframes, WebComponents etc?

Which tools/libraries did you use to help this process?

我正在创建一个微前端应用程序。我在 Angular 中有一个容器应用程序。当我将子应用程序的选择器注入到容器应用程序中时，它正在工作。但是当我点击 URL 时，我需要单独运行子应用程序。通过在 bootstrap (bootstrap: [AppComponent]) 中指定 Appcomponent 成为可能。但是在使用微前端时，我们使用 entryComponent。当我试图同时使用两者时，会发生冲突。有什么方法可以让我独立运行每个应用程序并且仍然具有微 UI 概念的能力？

我目前正在寻找有关如何将单独的应用程序加载到其中的角度解决方案。就像是：

applicationA将applicationB在路线上加载/appb并且也能够做到appb/subroute。

这样做的最终目标是让多个团队可以分别开发多个应用程序，并且当发生更改时applicationA，应用程序A调用的所有应用程序都不需要重新部署。

我正在看这篇文章，让我非常接近：https ://medium.com/angular-in-depth/building-extensible-dynamic-pluggable-enterprise-application-with-angular-aed8979faba5 。但是，我无法让它与子路由一起运行，并且构建在一组模块之上，而不是应用程序之上。

最后，来自 Manfred Steyer 的一篇文章，https: //www.angulararchitects.io/aktuelles/dynamic-module-federation-with-angular/ ，这是我真正想要的，但是，这是建立在“下一个”技术之上的那些尚未成熟的版本，既不是 Angular 版本，也不是它的路线图（我认为）。

问题：有没有人构建了这种解决方案，我可以从中得到一些指示？

我正在关注几篇关于如何使用 React 实现简单的微前端方法的文章（此处和此处，请参阅问题底部的示例存储库）。

当两个应用程序（根应用程序和子应用程序）在各自的开发服务器中运行时，它可以完美运行。但是，当我将构建工件部署到真正的 Web 服务器时，它不起作用。这是根应用程序中的重要代码：

当我单击为微应用加载 main.js 的按钮时，它可以正常工作，直到它调用renderMicroFrontend上述内容为止。然后我在浏览器中收到此错误： Uncaught TypeError: window[("render" + t)] is not a function

这是因为它找不到加载应该打开的微前端的函数window。当我在开发服务器中运行这两个应用程序时，我有正确的功能window并且它可以工作。当我按照相同的步骤将两个应用程序部署到真实服务器（运行后npm run build）时，我没有 renderMicroApp在我的.windowwebpackJsonpmicro-app

我发现这是由于 webpack 文档中 webpack 中的 output.library 选项（和/或相关选项）造成的：

输出.jsonp函数。string = 'webpackJsonp' 仅在 target 设置为 'web' 时使用，它使用 JSONP 加载按需块。如果使用 output.library 选项，库名称会自动与 output.jsonpFunction 的值连接。

我基本上希望加载和评估捆绑/脚本，以便该renderMicroApp功能在窗口上可用，但我不知道我需要哪些 webpack 设置才能使其工作，因为有很多不同的选项排列。

作为参考，我在微应用（atop react-app-rewired）中使用了以下配置覆盖：

在我的 index.tsx （在微型应用程序中）中，我在窗口上公开了该功能：

一些示例回购：

• https://github.com/rehrumesh/react-microfrontend-container
• https://github.com/rehrumesh/react-microfrontend-container-cats-app.git
• https://github.com/rehrumesh/react-microfrontend-container-dogs-app

我在 Direflow 反应应用程序中加载本地 woff 字体时遇到问题

这是我的示例代码

仍然无法使用字体请建议使用材料 UI 的 direflow 反应应用程序