CN110377274B - 基于Single-Spa的微前端架构系统及开发、部署方法 - Google Patents
基于Single-Spa的微前端架构系统及开发、部署方法 Download PDFInfo
- Publication number
- CN110377274B CN110377274B CN201910612394.9A CN201910612394A CN110377274B CN 110377274 B CN110377274 B CN 110377274B CN 201910612394 A CN201910612394 A CN 201910612394A CN 110377274 B CN110377274 B CN 110377274B
- Authority
- CN
- China
- Prior art keywords
- control console
- unit
- module
- slb
- server
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
- G06F8/447—Target code generation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D30/00—Reducing energy consumption in communication networks
- Y02D30/50—Reducing energy consumption in communication networks in wire-line communication networks, e.g. low power modes or reduced link rate
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Computing Systems (AREA)
- Stored Programmes (AREA)
Abstract
本发明提供了一种基于Single‑Spa的微前端架构系统及开发、部署方法,包括相互独立的主控制台、SLB控制台以及CDN控制台,所述主控制台与所述SLB控制台之间通过Event Bus进行数据传输,所述SLB控制台与所述CDN控制台之间通过Event Bus进行数据传输,所述主控制台与所述CDN控制台之间通过Event Bus进行数据传输。本发明具有兼容性强、开发效率高、自动化部署的优点。
Description
技术领域
本发明属于微前端技术领域,尤其是涉及一种基于Single-Spa的微前端架构系统及开发、部署方法。
背景技术
Single-Spa是一个用于前端微服务化的JavaScript前端解决方案。现有Web前后端分离应用(SPA)不能很好地扩展和部署,在一个大公司里,单前端团队可能成为一个发展瓶颈,随着时间的推移,各个项目通用公共部分会变得越来越多,使得由独立项目团队所开发的前端层越来越难以维护。其次,由于现有Web前后端分离技术通常使用单一MVVM框架,使得项目对于某种特定前端框架依赖度变高,当平台中需要其他前端框架支持时,此技术便无法在技术兼容性做到很好保障。
发明内容
有鉴于此,本发明旨在提出一种基于Single-Spa的微前端架构系统及开发、部署方法,以解决上述问题。
为达到上述目的,本发明的技术方案是这样实现的:
基于Single-Spa的微前端架构系统,包括相互独立的主控制台、SLB控制台以及CDN控制台,所述主控制台与所述SLB控制台之间通过Event Bus进行数据传输,所述SLB控制台与所述CDN控制台之间通过Event Bus进行数据传输,所述主控制台与所述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控制台之间通过Event Bus进行数据传输,主控制台与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代码。也就是说,若有新的项目要集成进来,只需要按照该方案上线自己的项目就可以了,不需要更改现有的任何项目。
以上所述仅为本发明的较佳实施例而已,并不用以限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
Claims (4)
1.基于Single-Spa的微前端架构系统,其特征在于:包括相互独立的主控制台、SLB控制台以及CDN控制台,所述主控制台与所述SLB控制台之间通过EventBus进行数据传输,所述SLB控制台与所述CDN控制台之间通过EventBus进行数据传输,所述主控制台与所述CDN控制台之间通过Event Bus进行数据传输;
所述主控制台模块或所述SLB控制台模块或所述CDN控制台模块包括浏览器单元、JS单元、webpack单元、页面容器单元、公共单元、Vuex单元、Axios单元以及UI组件库单元;
所述Axios单元通过POST或Get或WebSocket调用API接口与服务端进行交互;
所述Vuex单元用于进行数据状态管理;
所述公共单元用于其他单元提供信息;
所述页面容器单元用于承载业务模块;
所述webpack将所述页面容器单元打包为app.js,用于开发或测试;
所述UI组件库单元用于为页面容器单元提供样式;
所述JS单元用于生成各页面的JS模块;
所述浏览器单元用于识别HTML、JS、CSS供用户使用。
2.一种应用如权利要求1所述的微前端架构系统的开发方法,其特征在于:包括如下步骤:
A1:在服务器中的第一软件项目端口建立Portal模块,用于提供Shell运行环境;
A2:在服务器中的第二软件项目端口建立主控制台模块,在服务器中的第三软件项目端口建立SLB控制台模块,在服务器中的第四软件项目端口建立CDN控制台模块;
A3:Webpack判断当前访问的URL,提供Proxy代理服务;
A4:创建开发请求,Webpack将开发请求转发到相应的端口上。
3.一种应用如权利要求1所述的微前端架构系统的部署方法,其特征在于:包括如下步骤:
B1:Jenkins拉取相应gitlab分支代码,将静态资源打成tar包,并配置不同的压缩包名;
B2:自动化上传所述tar包,上传的目录地址是Nginx代理的一个静态目录;
B3:解压部署,替换掉与所述B1对应的同名目录;
B4:运行install.sh脚本,用于为微前端门户portal项目生成配置文件,即指向各个控制台的入口文件。
4.根据权利要求3所述的部署方法,其特征在于:所述B2还包括在Jenkins中配置ssh免密登录。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910612394.9A CN110377274B (zh) | 2019-07-08 | 2019-07-08 | 基于Single-Spa的微前端架构系统及开发、部署方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910612394.9A CN110377274B (zh) | 2019-07-08 | 2019-07-08 | 基于Single-Spa的微前端架构系统及开发、部署方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN110377274A CN110377274A (zh) | 2019-10-25 |
CN110377274B true CN110377274B (zh) | 2023-05-05 |
Family
ID=68252362
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201910612394.9A Active CN110377274B (zh) | 2019-07-08 | 2019-07-08 | 基于Single-Spa的微前端架构系统及开发、部署方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110377274B (zh) |
Families Citing this family (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111049889B (zh) * | 2019-12-04 | 2022-07-08 | 车智互联(北京)科技有限公司 | 一种静态资源上传方法、装置、集成服务器和系统 |
CN111176628B (zh) * | 2019-12-19 | 2023-04-18 | 福建天泉教育科技有限公司 | 组件化架构下的前端接入方法、存储介质 |
CN111224873B (zh) * | 2020-01-20 | 2021-01-01 | 厦门靠谱云股份有限公司 | 基于Nginx路由分发式的微前端系统及其开发、部署方法 |
CN112114784A (zh) * | 2020-09-21 | 2020-12-22 | 广东电网有限责任公司电力科学研究院 | 一种基于Single-Spa的前端微服务化系统 |
CN114647518A (zh) * | 2020-12-21 | 2022-06-21 | 腾讯科技(深圳)有限公司 | 微前端系统、子应用加载方法及计算机可读存储介质 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102354324A (zh) * | 2011-09-21 | 2012-02-15 | 中国商用飞机有限责任公司 | 跨音速颤振模型复合材料单梁结构设计及其刚度计算方法 |
CN104320482A (zh) * | 2014-11-04 | 2015-01-28 | 中国银行股份有限公司 | 一种银行柜员前端系统 |
CN106095408A (zh) * | 2016-05-31 | 2016-11-09 | 浙江网新恒天软件有限公司 | 一种数据监控和代码自动生成与部署的系统及方法 |
Family Cites Families (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10148727B2 (en) * | 2014-12-31 | 2018-12-04 | Vidscale Services, Inc. | Methods and systems for an end-to-end solution to deliver content in a network |
US20170034306A1 (en) * | 2015-07-30 | 2017-02-02 | Nasdaq, Inc. | Software application architecture |
CN105554160A (zh) * | 2016-01-29 | 2016-05-04 | 四川长虹电器股份有限公司 | 一种基于nginx负载均衡的dubbo分布式集群系统架构方法 |
CN107395747B (zh) * | 2017-08-21 | 2020-05-22 | 同程网络科技股份有限公司 | 一种基于stf平台的高扩展方法 |
CN109284472B (zh) * | 2018-11-15 | 2022-06-07 | 福建省华渔教育科技有限公司 | 基于webpack的前端网页加载方法、存储介质 |
-
2019
- 2019-07-08 CN CN201910612394.9A patent/CN110377274B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102354324A (zh) * | 2011-09-21 | 2012-02-15 | 中国商用飞机有限责任公司 | 跨音速颤振模型复合材料单梁结构设计及其刚度计算方法 |
CN104320482A (zh) * | 2014-11-04 | 2015-01-28 | 中国银行股份有限公司 | 一种银行柜员前端系统 |
CN106095408A (zh) * | 2016-05-31 | 2016-11-09 | 浙江网新恒天软件有限公司 | 一种数据监控和代码自动生成与部署的系统及方法 |
Also Published As
Publication number | Publication date |
---|---|
CN110377274A (zh) | 2019-10-25 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110377274B (zh) | 基于Single-Spa的微前端架构系统及开发、部署方法 | |
US10872127B2 (en) | Method and system of providing for cross-device operations between user devices | |
CN111290753B (zh) | 前端开发环境的搭建方法、装置、设备及存储介质 | |
CN112114784A (zh) | 一种基于Single-Spa的前端微服务化系统 | |
US7587447B2 (en) | Systems, methods and computer programs for implementing and accessing web services | |
CN110262902B (zh) | 信息处理方法及系统、介质和计算设备 | |
US7742476B2 (en) | Synchronous peer to peer deployed application propagation for large clusters | |
US20130326487A1 (en) | Emulating cloud functioning of applications locally | |
CN101132413B (zh) | 基于Web应用的ActiveX组件的复用方法 | |
CN112165532A (zh) | 节点访问方法、装置、设备及计算机可读存储介质 | |
CN110580183A (zh) | 一种移动应用组件化实现方法 | |
CN109597604B (zh) | 基于iOS平台的APP模块化开发方法、装置和设备 | |
CN112995269B (zh) | 数据处理方法、计算机设备以及可读存储介质 | |
CN112035217A (zh) | 集群的处理方法、装置、电子设备及计算机可读存储介质 | |
CN105530277A (zh) | 一种设备间协同工作的方法及设备 | |
Sadjadi et al. | Using transparent shaping and web services to support self-management of composite systems | |
CN112698930B (zh) | 一种获取服务器标识的方法、装置、设备及介质 | |
Toshev | Learning RabbitMQ | |
CN103917951B (zh) | 应用调用的方法及操作系统、浏览器 | |
CN106844763A (zh) | 一种对互联网媒体文件进行修改式展现的方法及其装置 | |
An et al. | Design and implementation of a dynamic protocol framework | |
CN115794093A (zh) | 一种基于多应用融合的微前端实现方法 | |
Uribarren et al. | Middleware for distributed services and mobile applications | |
CN116775056A (zh) | Dds集群仿真的方法、装置、电子设备及介质 | |
Mi et al. | Research on mobile web applications end to end technology |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |