一种基于微前端的系统集成及部署方法、系统、设备与流程

本技术涉及系统部署，具体而言，涉及一种基于微前端的系统集成及部署方法、系统、设备。

背景技术：

1、微前端技术的核心思想是将单体前端拆分为多个独立开发、部署的子应用模块，通过主应用动态集成。

2、传统微前端部署方案主要包括iframe嵌入方案和mpm包引入方案。其中，iframe嵌入方案是通过iframe标签嵌入子应用，但受限于跨域通信与样式隔离问题，且无法实现主子应用间状态同步；mpm包引入方案是将子应用打包为npm模块，主应用以依赖形式引入，但需频繁全量构建，子应用无法独立部署，导致版本更新滞后与部署效率低下。

3、此外，还有利用框架化工具（如single-spa、qiankun、module federation等），通过主应用与子应用的协同工作实现功能整合。但其在隔离性、权限控制、资源一致性与扩展性等方面存在不足。

4、因此，亟需一种能够解决现有微前端架构在隔离性、权限控制、资源一致性与扩展性方面的不足，同时规避传统集成方式（如iframe、npm包引入）的跨域问题、性能瓶颈与部署依赖，实现更安全、高效、可维护的微前端系统的部署方法。

技术实现思路

1、本技术的目的在于提供一种基于微前端的系统集成及部署方法、系统、设备，其能够解决现有微前端架构在隔离性、权限控制、资源一致性与扩展性方面的不足，同时规避传统集成方式（如iframe、npm包引入）的跨域问题、性能瓶颈与部署依赖，实现更安全、高效、可维护的进行微前端系统的部署。

2、本技术是这样实现的：

3、第一方面，本技术提供一种基于微前端的系统集成及部署方法，包括以下步骤：通过微前端框架创建一个主应用作为目标系统的入口，注册多个不同技术栈的子应用并配置沙箱隔离；响应于用户在主应用完成登录操作，通过主应用获取并根据获取的用户的身份认证信息生成权限上下文数据，并通过事件总线或全局状态管理机制将用户上下文数据广播至各子应用，所述权限上下文数据携带有身份标志、会话令牌和功能权限；响应于子应用接收到权限上下文数据，通过子应用根据权限上下文数据加载或禁用预定资源、及展示或隐藏预定界面元素；响应于子应用的构建操作，根据私有npm仓库加载对应组件资源，并集成到子应用，得到子应用构建产物；将主应用与子应用构建产物封装为docker镜像，并以nginx作为统一网关进行请求分发，部署至目标容器化环境。

4、在一些实现方式中，所述注册多个不同技术栈的子应用并配置沙箱隔离，包括：主应用初始化时执行registermicroapps()注册多个子应用，将子应用元信息加载到主应用中，所述子应用元信息包括名称、入口地址和激活规则；通过调用微前端框架的strictstyleisolation参数为每个子应用创建独立的shadow dom容器，或，通过experimentalstyleisolation参数为css样式添加唯一作用域前缀；启动微前端引擎start()监听路由变化，以通过popstate事件监听器和hashchange事件监听器检测url是否命中子应用激活规则，匹配成功则执行子应用的加载与挂载。

5、在一些实现方式中，所述通过主应用获取并根据获取的用户的身份认证信息生成权限上下文数据，包括：通过主应用将用户凭证发送至认证服务进行身份校验，以在认证成功后接收用户的身份认证信息，所述身份认证信息包括用户标识、角色和权限；以及通过主应用将接收的用户的身份认证信息进行解析转换权限上下文数据。

6、在一些实现方式中，所述通过子应用根据权限上下文数据加载或禁用预定资源、及展示或隐藏预定界面元素，包括：子应用根据接收的权限上下文数据，提取与当前子应用相关的权限信息，动态确定加载或禁用预定资源、及展示或隐藏预定界面元素，其中，通过条件渲染、路由守卫或按钮禁用方式阻止加载无权访问的模块或资源。

7、在一些实现方式中，所述子应用通过事件监听机制接收权限上下文数据并写入自身状态管理容器。

8、在一些实现方式中，所述根据私有npm仓库加载对应组件资源，并集成到子应用，包括：根据子应用的package.json文件中携带的依赖的私有npm仓库版本信息及配置，从私有npm仓库加载对应组件资源并变异至子应用构建产物。

9、在一些实现方式中，所述以nginx作为统一网关进行请求分发，包括：以nginx作为统一网关，通过配置location路由规则，将访问请求按照路径转发至对应子应用，并设置缓存策略与跨域控制头。

10、在一些实现方式中，所述部署至目标容器化环境包括通过docker或kubernetes进行部署，以使得支持多子应用并发访问、自动扩缩容、高可用副本及滚动更新。

11、第二方面，本技术提供一种基于微前端的系统集成及部署系统，其包括：第一部署模块，被配置为：通过微前端框架创建一个主应用作为目标系统的入口，注册多个不同技术栈的子应用并配置沙箱隔离；第二部署模块，被配置为：响应于用户在主应用完成登录操作，通过主应用获取并根据获取的用户的身份认证信息生成权限上下文数据，并通过事件总线或全局状态管理机制将用户上下文数据广播至各子应用，所述权限上下文数据携带有身份标志、会话令牌和功能权限；第三部署模块，被配置为：响应于子应用接收到权限上下文数据，通过子应用根据权限上下文数据加载或禁用预定资源、及展示或隐藏预定界面元素；第四部署模块，被配置为：响应于子应用的构建操作，根据私有npm仓库加载对应组件资源，并集成到子应用，得到子应用构建产物；第五部署模块，被配置为：将主应用与子应用构建产物封装为docker镜像，并以nginx作为统一网关进行请求分发，部署至目标容器化环境。

12、第三方面，本技术提供一种电子设备，其包括存储器，用于存储一个或多个程序；处理器；当上述一个或多个程序被上述处理器执行时，实现如上述第一方面中任一项所述的方法。

13、第四方面，本技术提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述第一方面中任一项所述的方法。

14、第五方面，本技术提供了一种计算机程序产品，包括计算机程序指令，所述计算机程序指令在被处理器执行时实现如上述第一方面中任一项所述的方法。

15、相对于现有技术，本技术至少具有如下优点或有益效果：

16、本技术提出了一种基于微前端的系统集成及部署方法，通过“沙箱隔离强化→权限实时同步→组件版本固化→容器化高效部署”的技术链条，构建了一套安全、高效、可扩展的微前端系统部署方法。其首先通过沙箱隔离机制，防止子应用间样式冲突与全局变量污染，减少运行时错误风险。接着，权限上下文数据集中生成与广播，可以减少子应用权限逻辑冗余，提升开发效率。然后，子应用基于权限数据动态调整资源加载与界面展示，可以确保权限更新实时生效，增强系统安全性。再然后，通过私有npm仓库确保子应用使用统一版本的组件资源，避免样式冲突与功能兼容性问题。并且可以简化构建流程，减少因依赖版本差异导致的维护成本。最后，通过docker镜像封装与nginx网关分发支持自动扩缩容与滚动更新，应对高并发场景。该统一网关可以降低部署复杂度，并支持灰度发布与故障隔离，提升系统可用性与弹性。