买专利卖专利找龙图腾，真高效！ 查专利查商标用IPTOP,全免费！专利年费监控用IP管家,真方便！

申请/专利权人：紫光云技术有限公司

摘要：本发明提供了一种基于Single‑Spa的微前端架构系统及开发、部署方法，包括相互独立的主控制台、SLB控制台以及CDN控制台，所述主控制台与所述SLB控制台之间通过EventBus进行数据传输，所述SLB控制台与所述CDN控制台之间通过EventBus进行数据传输，所述主控制台与所述CDN控制台之间通过EventBus进行数据传输。本发明具有兼容性强、开发效率高、自动化部署的优点。

主权项：1.基于Single-Spa的微前端架构系统，其特征在于：包括相互独立的主控制台、SLB控制台以及CDN控制台，所述主控制台与所述SLB控制台之间通过EventBus进行数据传输，所述SLB控制台与所述CDN控制台之间通过EventBus进行数据传输，所述主控制台与所述CDN控制台之间通过EventBus进行数据传输；所述主控制台模块或所述SLB控制台模块或所述CDN控制台模块包括浏览器单元、JS单元、webpack单元、页面容器单元、公共单元、Vuex单元、Axios单元以及UI组件库单元；所述Axios单元通过POST或Get或WebSocket调用API接口与服务端进行交互；所述Vuex单元用于进行数据状态管理；所述公共单元用于其他单元提供信息；所述页面容器单元用于承载业务模块；所述webpack将所述页面容器单元打包为app.js，用于开发或测试；所述UI组件库单元用于为页面容器单元提供样式；所述JS单元用于生成各页面的JS模块；所述浏览器单元用于识别HTML、JS、CSS供用户使用。

全文数据：基于Single-Spa的微前端架构系统及开发、部署方法技术领域本发明属于微前端技术领域，尤其是涉及一种基于Single-Spa的微前端架构系统及开发、部署方法。背景技术Single-Spa是一个用于前端微服务化的JavaScript前端解决方案。现有Web前后端分离应用SPA不能很好地扩展和部署，在一个大公司里，单前端团队可能成为一个发展瓶颈，随着时间的推移，各个项目通用公共部分会变得越来越多，使得由独立项目团队所开发的前端层越来越难以维护。其次，由于现有Web前后端分离技术通常使用单一MVVM框架，使得项目对于某种特定前端框架依赖度变高，当平台中需要其他前端框架支持时，此技术便无法在技术兼容性做到很好保障。发明内容有鉴于此，本发明旨在提出一种基于Single-Spa的微前端架构系统及开发、部署方法，以解决上述问题。为达到上述目的，本发明的技术方案是这样实现的：基于Single-Spa的微前端架构系统，包括相互独立的主控制台、SLB控制台以及CDN控制台，所述主控制台与所述SLB控制台之间通过EventBus进行数据传输，所述SLB控制台与所述CDN控制台之间通过EventBus进行数据传输，所述主控制台与所述CDN控制台之间通过EventBus进行数据传输。进一步的，所述主控制台模块或所述SLB控制台模块或所述CDN控制台模块包括浏览器单元、JS单元、webpack单元、页面容器单元、公共单元、Vuex单元、Axios单元以及UI组件库单元；所述Axios单元通过POST或Get或WebSocket调用API接口与服务端进行交互；所述Vuex单元用于进行数据状态管理；所述公共单元用于其他单元提供信息；所述页面容器单元用于承载业务模块；所述webpack将所述页面容器单元打包为app.js，用于开发或测试；所述UI组件库单元用于为页面容器单元提供样式；所述各页面JS模块生成单元用于生成各页面的JS模块；所述浏览器单元用于识别HTML、JS、CSS供用户使用。一种应用所述微前端架构系统的开发方法，包括如下步骤：A1：在服务器中的第一软件项目端口建立Portal模块，用于提供Shell运行环境；A2：在服务器中的第二软件项目端口建立主控制台模块，在服务器中的第三软件项目端口建立SLB控制台模块，在服务器中的第四软件项目端口建立CDN控制台模块；A3：Webpack判断当前访问的URL，提供Proxy代理服务；A4：创建开发请求，Webpack将开发请求转发到相应的端口上。一种应用所述微前端架构系统的部署方法，包括如下步骤：B1：Jenkins拉取相应gitlab分支代码，将静态资源打成tar包，并配置不同的压缩包名；B2：自动化上传所述tar包，上传的目录地址是Nginx代理的一个静态目录；B3：解压部署，替换掉与所述B1对应的同名目录；B4：运行install.sh脚本，用于为微前端门户portal项目生成配置文件，即指向各个控制台的入口文件。进一步的，所述B2还包括在Jenkins中配置ssh免密登录。相对于现有技术，本发明所述的一种基于Single-Spa的微前端架构系统及开发、部署方法具有以下优势：通过Single-Spa为基础可以兼容多种MVVM框架技术的综合框架实施，平台项目可达到：创建在同一页面上使用多个框架而无需刷新页面React，AngularJS，Angular，Ember或其他；使用新框架编写代码，而无需重写现有应用程序；每个独立模块的代码可做到按需加载，不浪费额外资源；延迟加载代码，可有效改善初始加载时间；自动化打包部署，尽可能降低相关人力成本；并且当出现开发遗留系统时，平台可以使用现有框架的新版本或完全不同的框架来开发新功能，single-spa框架此时可以发挥完美兼容作用。附图说明构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：图1为本发明实施例所述的微前端架构系统示意图；图2为本发明实施例所述的子APP架构示意图；图3为本发明实施例所述的微前端架构系统开发方法示意图；图4为本发明实施例所述的微前端架构系统部署方法示意图。具体实施方式下面将参考附图并结合实施例来详细说明本发明。本发明提出一种基于Single-Spa的微前端架构系统，如图1所示，该架构系统包括相互独立的主控制台、SLB控制台以及CDN控制台，SLB控制台指负载均衡控制台，CDN控制台指内容分发网络控制台，前后端分离，后端进行微服务，每个控制台相当于一个独立的子APP，代码托管于不同的仓库，由各自团队独立维护，Portal门户提供一个Shell脚本执行环境，供各个子APP异步加载；各个子APP之间涉及到一些数据的共享，通过全局EventBus来实现，即主控制台与SLB控制台之间通过EventBus事件总线进行数据传输，SLB控制台与CDN控制台之间通过EventBus进行数据传输，主控制台与CDN控制台之间通过EventBus进行数据传输，通过这种方式，很好的将公共部分抽离出来，同时解耦了各个控制台模块，大大提高了开发效率和维护效率。如图2所示，所述主控制台模块或所述SLB控制台模块或所述CDN控制台模块包括浏览器单元、JS单元、webpack单元、页面容器单元、公共单元、Vuex单元、Axios单元以及UI组件库单元；所述Axios单元通过POST请求或Get请求或WebSocket网络套接字调用API接口应用编程接口与服务端进行交互，所述Vuex单元用于进行数据状态管理，所述公共单元用于其他单元提供类库、公共组件、Route路由、配置信息等，所述页面容器单元用于承载首页、会话等模块，所述webpack用于将所述页面容器单元打包为app.js，用于开发或测试；所述UI用户界面组件库单元用于为页面容器单元提供样式；所述各页面JS模块生成单元用于生成首页、会话、商品等JS模块，所述浏览器单元用于识别HTML、JS、CSS供用户使用。如图3所示，本发明还提出一种基于Single-Spa的微前端架构系统的开发方法，包括如下步骤：A1：在服务器中的第一软件项目端口建立Portal模块，用于提供Shell运行环境，例如简历在9000端口；A2：在服务器中的第二软件项目端口建立主控制台模块，在服务器中的第三软件项目端口建立SLB控制台模块，例如建立在9001端口，在服务器中的第四软件项目端口建立CDN控制台模块，例如建立在9002端口；A3：Webpack判断当前访问的URL，提供Proxy代理服务；A4：创建开发请求，Webpack将开发请求转发到相应的端口上。应用上述方法实现多个微前端APP的联调。如图4所述，本发明还提出一种基于Single-Spa的微前端架构系统的部署方法，包括如下步骤：B1：Jenkins拉取相应gitlab分支代码，将静态资源打成tar包，并配置不同的压缩包名；B2：在Jenkins中配置ssh免密登录，在打包步骤完成后，同时自动化上传，上传的目录地址是Nginx代理的一个静态目录；B3：解压部署，替换掉与所述B1对应的同名目录，负载均衡控制台：slb；前端资源理论上不太需要做横向扩展，只要放到最前置的做负载均衡的服务器上，使用Nginx代理静态目录即可，如果做主从节点部署，则需要使用**ansible**做批量部署；B4：运行install.sh脚本，用于为微前端门户portal项目生成配置文件，即指向各个控制台的入口文件。本部署方案实现了动态新增或删除子APP，而不需要修改Portal代码。也就是说，若有新的项目要集成进来，只需要按照该方案上线自己的项目就可以了，不需要更改现有的任何项目。以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

权利要求：1.基于Single-Spa的微前端架构系统，其特征在于：包括相互独立的主控制台、SLB控制台以及CDN控制台，所述主控制台与所述SLB控制台之间通过EventBus进行数据传输，所述SLB控制台与所述CDN控制台之间通过EventBus进行数据传输，所述主控制台与所述CDN控制台之间通过EventBus进行数据传输。2.根据权利要求1所述的基于Single-Spa的微前端架构系统，其特征在于：所述主控制台模块或所述SLB控制台模块或所述CDN控制台模块包括浏览器单元、JS单元、webpack单元、页面容器单元、公共单元、Vuex单元、Axios单元以及UI组件库单元；所述Axios单元通过POST或Get或WebSocket调用API接口与服务端进行交互；所述Vuex单元用于进行数据状态管理；所述公共单元用于其他单元提供信息；所述页面容器单元用于承载业务模块；所述webpack将所述页面容器单元打包为app.js，用于开发或测试；所述UI组件库单元用于为页面容器单元提供样式；所述各页面JS模块生成单元用于生成各页面的JS模块；所述浏览器单元用于识别HTML、JS、CSS供用户使用。3.一种应用如权利要求1所述的微前端架构系统的开发方法，其特征在于：包括如下步骤：A1：在服务器中的第一软件项目端口建立Portal模块，用于提供Shell运行环境；A2：在服务器中的第二软件项目端口建立主控制台模块，在服务器中的第三软件项目端口建立SLB控制台模块，在服务器中的第四软件项目端口建立CDN控制台模块；A3：Webpack判断当前访问的URL，提供Proxy代理服务；A4：创建开发请求，Webpack将开发请求转发到相应的端口上。4.一种应用如权利要求1所述的微前端架构系统的部署方法，其特征在于：包括如下步骤：B1：Jenkins拉取相应gitlab分支代码，将静态资源打成tar包，并配置不同的压缩包名；B2：自动化上传所述tar包，上传的目录地址是Nginx代理的一个静态目录；B3：解压部署，替换掉与所述B1对应的同名目录；B4：运行install.sh脚本，用于为微前端门户portal项目生成配置文件，即指向各个控制台的入口文件。5.根据权利要求4所述的部署方法，其特征在于：所述B2还包括在Jenkins中配置ssh免密登录。

百度查询： 紫光云技术有限公司 基于Single-Spa的微前端架构系统及开发、部署方法