CN110377274A - 基于Single-Spa的微前端架构系统及开发、部署方法 - Google Patents

基于Single-Spa的微前端架构系统及开发、部署方法 Download PDF

Info

Publication number
CN110377274A
CN110377274A CN201910612394.9A CN201910612394A CN110377274A CN 110377274 A CN110377274 A CN 110377274A CN 201910612394 A CN201910612394 A CN 201910612394A CN 110377274 A CN110377274 A CN 110377274A
Authority
CN
China
Prior art keywords
console
unit
module
micro
slb
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.)
Granted
Application number
CN201910612394.9A
Other languages
English (en)
Other versions
CN110377274B (zh
Inventor
刘轩
赵克鸣
郭徵
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Unicloud Technology Co Ltd
Original Assignee
Unicloud Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Unicloud Technology Co Ltd filed Critical Unicloud Technology Co Ltd
Priority to CN201910612394.9A priority Critical patent/CN110377274B/zh
Publication of CN110377274A publication Critical patent/CN110377274A/zh
Application granted granted Critical
Publication of CN110377274B publication Critical patent/CN110377274B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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的微前端架构系统及开发、部署方法。
背景技术
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 (5)

1.基于Single-Spa的微前端架构系统，其特征在于：包括相互独立的主控制台、SLB控制台以及CDN控制台，所述主控制台与所述SLB控制台之间通过Event Bus进行数据传输，所述SLB控制台与所述CDN控制台之间通过Event Bus进行数据传输，所述主控制台与所述CDN控制台之间通过Event Bus进行数据传输。
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免密登录。
CN201910612394.9A 2019-07-08 2019-07-08 基于Single-Spa的微前端架构系统及开发、部署方法 Active CN110377274B (zh)

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 true CN110377274A (zh) 2019-10-25
CN110377274B 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)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111049889A (zh) * 2019-12-04 2020-04-21 车智互联（北京）科技有限公司 一种静态资源上传方法、装置、集成服务器和系统
CN111176628A (zh) * 2019-12-19 2020-05-19 福建天泉教育科技有限公司 组件化架构下的前端接入方法、存储介质
CN111224873A (zh) * 2020-01-20 2020-06-02 厦门靠谱云股份有限公司 基于Nginx路由分发式的微前端系统及其开发、部署方法
CN112114784A (zh) * 2020-09-21 2020-12-22 广东电网有限责任公司电力科学研究院 一种基于Single-Spa的前端微服务化系统
WO2022135178A1 (zh) * 2020-12-21 2022-06-30 腾讯科技（深圳）有限公司 微前端系统、子应用加载方法、电子设备、计算机程序产品及计算机可读存储介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102354324A (zh) * 2011-09-21 2012-02-15 中国商用飞机有限责任公司 跨音速颤振模型复合材料单梁结构设计及其刚度计算方法
CN104320482A (zh) * 2014-11-04 2015-01-28 中国银行股份有限公司 一种银行柜员前端系统
CN105554160A (zh) * 2016-01-29 2016-05-04 四川长虹电器股份有限公司 一种基于nginx负载均衡的dubbo分布式集群系统架构方法
CN106095408A (zh) * 2016-05-31 2016-11-09 浙江网新恒天软件有限公司 一种数据监控和代码自动生成与部署的系统及方法
US20170034306A1 (en) * 2015-07-30 2017-02-02 Nasdaq, Inc. Software application architecture
CN107211039A (zh) * 2014-12-31 2017-09-26 维达斯凯尔有限公司 用于在网络中递送内容的端到端解决方案的方法和系统
CN107395747A (zh) * 2017-08-21 2017-11-24 同程网络科技股份有限公司 一种基于stf平台的高扩展方法
CN109284472A (zh) * 2018-11-15 2019-01-29 福建省华渔教育科技有限公司 基于webpack的前端网页加载方法、存储介质

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102354324A (zh) * 2011-09-21 2012-02-15 中国商用飞机有限责任公司 跨音速颤振模型复合材料单梁结构设计及其刚度计算方法
CN104320482A (zh) * 2014-11-04 2015-01-28 中国银行股份有限公司 一种银行柜员前端系统
CN107211039A (zh) * 2014-12-31 2017-09-26 维达斯凯尔有限公司 用于在网络中递送内容的端到端解决方案的方法和系统
US20170034306A1 (en) * 2015-07-30 2017-02-02 Nasdaq, Inc. Software application architecture
CN105554160A (zh) * 2016-01-29 2016-05-04 四川长虹电器股份有限公司 一种基于nginx负载均衡的dubbo分布式集群系统架构方法
CN106095408A (zh) * 2016-05-31 2016-11-09 浙江网新恒天软件有限公司 一种数据监控和代码自动生成与部署的系统及方法
CN107395747A (zh) * 2017-08-21 2017-11-24 同程网络科技股份有限公司 一种基于stf平台的高扩展方法
CN109284472A (zh) * 2018-11-15 2019-01-29 福建省华渔教育科技有限公司 基于webpack的前端网页加载方法、存储介质

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
RUPONEN EETU: "The front-end architectural design and implementation of a modularized web portal", 《TREPO》 *
单茹楠: "基于微服务化前端架构的研究与实现", 《中国优秀硕士学位论文全文数据库信息科技辑》 *
小飞侠-2: "前端微服务化解决方案2 - Single-SPA", 《HTTPS://BLOG.CSDN.NET/QQ_26562641/ARTICLE/DETAILS/89876562》 *

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111049889A (zh) * 2019-12-04 2020-04-21 车智互联（北京）科技有限公司 一种静态资源上传方法、装置、集成服务器和系统
CN111049889B (zh) * 2019-12-04 2022-07-08 车智互联（北京）科技有限公司 一种静态资源上传方法、装置、集成服务器和系统
CN111176628A (zh) * 2019-12-19 2020-05-19 福建天泉教育科技有限公司 组件化架构下的前端接入方法、存储介质
CN111176628B (zh) * 2019-12-19 2023-04-18 福建天泉教育科技有限公司 组件化架构下的前端接入方法、存储介质
CN111224873A (zh) * 2020-01-20 2020-06-02 厦门靠谱云股份有限公司 基于Nginx路由分发式的微前端系统及其开发、部署方法
CN112114784A (zh) * 2020-09-21 2020-12-22 广东电网有限责任公司电力科学研究院 一种基于Single-Spa的前端微服务化系统
WO2022135178A1 (zh) * 2020-12-21 2022-06-30 腾讯科技（深圳）有限公司 微前端系统、子应用加载方法、电子设备、计算机程序产品及计算机可读存储介质

Also Published As

Publication number Publication date
CN110377274B (zh) 2023-05-05

Similar Documents

Publication Publication Date Title
CN110377274A (zh) 基于Single-Spa的微前端架构系统及开发、部署方法
CN108319483B (zh) 网页处理方法、装置、终端及存储介质
Merideth et al. Thema: Byzantine-fault-tolerant middleware for web-service applications
JP3839472B2 (ja) オブジェクト指向ルール・ベース・プロトコル・システム
US20080034420A1 (en) System and method of portal customization for a virtual private network device
CN103916378B (zh) 应用系统在云资源池中自动部署的系统和方法
CN112165532A (zh) 节点访问方法、装置、设备及计算机可读存储介质
CN103198130B (zh) 在客户端处实现与网页统一的登录的方法和装置
AU2002319843A1 (en) General and reusable components for defining net-centric application program architectures
EP1428115A2 (en) General and reusable components for defining net-centric application program architectures
CN112114784A (zh) 一种基于Single-Spa的前端微服务化系统
KR20230054474A (ko) 마이크로프론트엔드 시스템, 서브애플리케이션 로딩 방법, 전자 디바이스, 컴퓨터 프로그램 제품 및 컴퓨터로 판독 가능한 저장 매체
US20050193119A1 (en) Method, system and program product for resolving prerequisites for a client device in an open service gateway initiative (OSGi) framework
CN106878333B (zh) 一种第三方认证方法、装置和应用系统服务器
Toshev Learning RabbitMQ
CN103561113B (zh) Web Service接口的生成方法及装置
CN105959278A (zh) 一种调用vpn的方法、设备和系统
CN116599949A (zh) 基于http协议的第三方api协议接入方法及系统
Liu et al. Eucalyptus: a web service-enabled e-infrastructure
US20060047781A1 (en) Method and system for providing remote portal service modules
Cassagnes et al. Kalimucho: software architecture for limited mobile devices
CN104767808B (zh) 一种基于支持ajax的web代理方法
CN112929453A (zh) 一种共享session数据的方法和装置
Jemtrud et al. Eucalyptus: intelligent infrastructure enabled participatory design studio
US11870837B2 (en) Computer-implemented co-browsing method and system for web platform virtualization of web applications using a network proxy and function-wrapping engine

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