一种基于容器化部署的微前端自动发布方法、装置、设备及介质与流程

1.本技术涉及前端应用技术领域，尤其是涉及到一种基于容器化部署的微前端自动发布方法、装置、设备及介质。


背景技术：

2.saas产品特点需要适应各种用户需求，模块化是必然趋势，应运而生的微前端技术的优势在于可以实现简单、松耦合的代码库、独立部署、实现了多技术栈并存的能力，尤其适用于渐进式重构中架构升级。
3.但是与此同时，众多的微前端子应用在开发部署过程中也带来了很多问题：多个微前端复用多个子应用时，环境部署发布的手工配置时间成本，随着子应用路由成倍增加而增加，同时，子应用自身配置的静态资源也必须加以区分，而在后端访问的接口服务时，又要求能够访问一个统一的服务地址，导致现有技术中，微前端子应用的发布、运维要进行手工配置，过程非常的繁琐，且因子应用的频繁更新，导致重复性工作，出错后也不好排查故障。


技术实现要素：

4.有鉴于此，本技术提供了一种基于容器化部署的微前端自动发布方法、装置、设备及介质，实现应用部署过程中的自动化，解决了人工进行部署配置导致重复性工作量的技术问题。
5.根据本技术的第一方面，提供了一种基于容器化部署的微前端自动发布方法，包括：
6.从服务器上拉取前端代码；
7.获取与所述前端代码对应的部署地址及后端服务地址；
8.通过第一shell脚本对前端代码进行编译，并根据所述部署地址及所述后端服务地址，将静态资源地址替换为所述部署地址，将接口地址替换为所述后端服务地址；
9.将编译后的前端代码进行部署发布。
10.根据本技术的第二方面，提供了一种基于机器学习的页面缓存装置，包括：
11.拉取模块，用于从服务器上拉取前端代码；
12.获取模块，用于获取与所述前端代码对应的部署地址及后端服务地址；
13.编译模块，用于通过第一shell脚本对前端代码进行编译，并根据所述部署地址及所述后端服务地址，将静态资源地址替换为所述部署地址，将接口地址替换为所述后端服务地址；
14.发布模块，用于将编译后的前端代码进行部署发布。
15.根据本技术的第三方面，提供了一种计算机设备，包括存储器、处理器以及存储在存储器中并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述基于容器
化部署的微前端自动发布方法的步骤。
16.根据本技术的第四方面，提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序被处理器执行时实现上述基于容器化部署的微前端自动发布方法的步骤。
17.借由上述技术方案，本技术提供的一种基于容器化部署的微前端自动发布方法、装置、设备及介质，首先，通过从服务器上拉取前端代码，获取与所述前端代码对应的部署地址及后端服务地址，通过第一shell脚本对前端代码进行编译，并根据部署地址及后端服务地址，将静态资源地址替换为部署地址，将接口地址替换为后端服务地址，将编译后的前端代码进行部署发布。实现了前端代码的自动化部署，提升了开发效率，降低人工成本。
18.上述说明仅是本技术技术方案的概述，为了能够更清楚了解本技术的技术手段，并可依照说明书的内容予以实施，并且为了让本技术的上述和其它目的、特征和优点能够更明显易懂，以下特列举本技术的具体实施方式。
附图说明
19.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
20.图1示出了本发明实施例中提供的一种基于容器化部署的微前端自动发布方法应用场景的示意图；
21.图2示出了本发明实施例中提供的一种基于容器化部署的微前端自动发布方法流程示意图；
22.图3示出了本发明实施例中提供的一种基于容器化部署的微前端自动发布方法流程示意图；
23.图4示出了本发明实施例中提供的一种基于容器化部署的微前端自动发布装置示意图。
具体实施方式
24.下文中将参考附图并结合实施例来详细说明本技术。需要说明的是，在不冲突的情况下，本技术中的实施例及实施例中的特征可以相互组合。
25.如图1所示，为本发明实施例中提供的一种基于容器化部署的微前端自动发布方法应用场景的示意图，本发明实施例在应用过程中通过持续集成(ci/cd)平台中的jenkins工具执行本发明实施例中提供的种基于容器化部署的微前端自动发布方法，通过从服务器上拉取前端代码，获取与所述前端代码对应的部署地址及后端服务地址，通过第一shell脚本对前端代码进行编译，并根据部署地址及后端服务地址，将静态资源地址替换为部署地址，将接口地址替换为后端服务地址，将编译后的前端代码进行部署发布，如图1所示，可将编译后的代码打包为docker镜像上传至内网的私有仓库harbor(harbor是由vmware公司中国团队为企业用户设计的registry server开源项目，包括了权限管理(rbac)、ldap、审计、管理界面、自我注册、ha等企业必需的功能，同时针对中国用户的特点，设计镜像复制和中文支持等功能)，然后，通过kubectl拉取镜像到k8s容器集群中运行，响应客户端发起请求，请求通过ingress进行路由转发到与应用对应的service提供后端服务并下载前端的静态
资源文件，其中，下载前端的静态资源文件的地址与提供后端服务有可能不一样。通过jenkins执行本实施例提供的方法实现了前端代码的自动化部署，提升了开发效率，降低人工成本。特别地，当前端代码为微前端时，子应用放入到基座中后，静态资源会默认走主应用地址去访问，但是主应用又没有这些静态资源文件，其结果将产生404错误，影响应用的部署发布，通过本发明实施例提供的方法自动化实现微应用静态资源文件地址的替换为绝对地址即自动将webpack的vue.config.js文件中的publicpath配置设置成一个绝对地址的url。
26.为了更加清晰的描述本发明实施例中提供的一种基于容器化部署的微前端自动发布方法，如图2所示，包括：
27.步骤201、从服务器上拉取前端代码；
28.其中，可通过git pull方式从代码仓库中拉取代码，jenkins流程中设置自动代码拉取的相关参数和地址。
29.步骤202、获取与前端代码对应的部署地址及后端服务地址；
30.其中，需要从特定的配置文件或数据库中获取与前端代码对应的部署地址及后端服务地址，前端代码部署的地址与后端服务地址可一样，也可以不一样，根据具体需求确定。
31.步骤203、通过第一shell脚本对前端代码进行编译，并根据部署地址及后端服务地址，将静态资源地址替换为部署地址，将接口地址替换为所述后端服务地址；
32.其中，步骤203具体可以包括：
33.步骤203-1、通过webpack钩子函数触发所述第一shell脚本执行；
34.步骤203-2、以部署地址及所述后端服务地址作为第一shell脚本的执行参数；
35.其中，通过shell脚本对publicpath中的地址进行替换为前端代码的部署地址，相应的webpack的vue.config.js文件如下。
[0036][0037][0038]
需要特别说明的是，本实施例仅以vue代码的部署过程为例说明，对于react、angular、微前端qiankun等框架的执行过程类似，在此不再赘述。
[0039]
步骤203-3、第一shell脚本根据部署地址及后端服务地址，将静态资源地址替换为部署地址，将接口地址替换为后端服务地址。
[0040]
步骤204、将编译后的前端代码进行部署发布。
[0041]
其中，可将编译好的代码自动上传至服务器的特定空间中，并重启后端服务、nignx网关服务等关联服务。
[0042]
本发明实施例提供的一种基于容器化部署的微前端自动发布方法，首先，通过从服务器上拉取前端代码，获取与所述前端代码对应的部署地址及后端服务地址，通过第一shell脚本对前端代码进行编译，并根据部署地址及后端服务地址，将静态资源地址替换为部署地址，将接口地址替换为后端服务地址，将编译后的前端代码进行部署发布。实现了前端代码的自动化部署，提升了开发效率，降低人工成本。
[0043]
进一步地，当本发明实施例的方法应用与k8s环境下部署时，如图3所示，包括：
[0044]
步骤301、从服务器上拉取前端代码；
[0045]
步骤302、获取与前端代码对应的部署地址及后端服务地址；
[0046]
步骤303、通过第一shell脚本对前端代码进行编译，并根据部署地址及后端服务地址，将静态资源地址替换为所述部署地址，将接口地址替换为后端服务地址；
[0047]
步骤304、根据所述前端代码对应的服务，通过第二shell脚本对ingress-nginx的配置文件进行设置，以生成ingress的转发规则；
[0048]
其中，通过jenkins触发第二shell脚本执行，并判断所述前端代码的部署环境，其中，部署环境包括k8s容器集群。
[0049]
步骤305、将编译后的前端代码打包为镜像并部署至k8s容器集群中，并启动镜像对应的容器运行。
[0050]
进一步地，作为图2和图3方法的具体实现，本技术实施例中提供了一种基于容器化部署的微前端自动发布装置，如图4所示，该装置包括：
[0051]
拉取模块410，用于从服务器上拉取前端代码；
[0052]
获取模块420，用于获取与所述前端代码对应的部署地址及后端服务地址；
[0053]
编译模块430，用于通过第一shell脚本对前端代码进行编译，并根据所述部署地址及所述后端服务地址，将静态资源地址替换为所述部署地址，将接口地址替换为所述后端服务地址；
[0054]
发布模块440，用于将编译后的前端代码进行部署发布。
[0055]
本发明实施例提供的一种基于容器化部署的微前端自动发布装置，通过从服务器上拉取前端代码，获取与所述前端代码对应的部署地址及后端服务地址，通过第一shell脚本对前端代码进行编译，并根据部署地址及后端服务地址，将静态资源地址替换为部署地址，将接口地址替换为后端服务地址，将编译后的前端代码进行部署发布。实现了前端代码的自动化部署，提升了开发效率，降低人工成本。
[0056]
本技术实施例中提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：
[0057]
从服务器上拉取前端代码；
[0058]
获取与所述前端代码对应的部署地址及后端服务地址；
[0059]
通过第一shell脚本对前端代码进行编译，并根据所述部署地址及所述后端服务地址，将静态资源地址替换为所述部署地址，将接口地址替换为所述后端服务地址；
[0060]
将编译后的前端代码进行部署发布。
[0061]
本技术实施例中提供了一种计算机可读存储介质，其上存储有计算机程序，计算
机程序被处理器执行时实现以下步骤：
[0062]
从服务器上拉取前端代码；
[0063]
获取与所述前端代码对应的部署地址及后端服务地址；
[0064]
通过第一shell脚本对前端代码进行编译，并根据所述部署地址及所述后端服务地址，将静态资源地址替换为所述部署地址，将接口地址替换为所述后端服务地址；
[0065]
将编译后的前端代码进行部署发布。
[0066]
需要说明的是，上述关于计算机可读存储介质或计算机设备所能实现的功能或步骤，可对应参阅前述方法实施例中，服务端侧以及客户端侧的相关描述，为避免重复，这里不再一一描述。
[0067]
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本技术所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限，ram以多种形式可得，诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双数据率sdram(ddrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。
[0068]
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
[0069]
以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

技术特征：
1.一种基于容器化部署的微前端自动发布方法，其特征在于，包括：从服务器上拉取前端代码；获取与所述前端代码对应的部署地址及后端服务地址；通过第一shell脚本对前端代码进行编译，并根据所述部署地址及所述后端服务地址，将静态资源地址替换为所述部署地址，将接口地址替换为所述后端服务地址；将编译后的前端代码进行部署发布。2.根据权利要求1所述的方法，其特征在于，将编译后的前端代码进行部署发布的步骤，包括：将编译后的前端代码打包为镜像并部署至k8s容器集群中，并启动镜像对应的容器运行。3.根据权利要求2所述的方法，其特征在于，所述将编译后的前端代码进行部署发布的步骤之前，包括：根据所述前端代码对应的服务，通过第二shell脚本对ingress-nginx的配置文件进行设置，以生成ingress的转发规则。4.根据权利要求2所述的方法，其特征在于，所述通过第一shell脚本对前端代码进行编译，并根据所述部署地址及所述后端服务地址，将静态资源地址替换为所述部署地址，将接口地址替换为所述后端服务地址的步骤，包括：通过webpack钩子函数触发所述第一shell脚本执行；以所述部署地址及所述后端服务地址作为所述第一shell脚本的执行参数；所述第一shell脚本根据所述部署地址及所述后端服务地址，将静态资源地址替换为所述部署地址，将接口地址替换为所述后端服务地址。5.根据权利要求3所述的方法，其特征在于，根据所述前端代码对应的服务，通过第二shell脚本对ingress-nginx的配置文件进行设置，以生成ingress的转发规则的步骤之前，包括：通过jenkins触发所述第二shell脚本执行，并判断所述前端代码的部署环境，其中，所述部署环境包括k8s容器集群。6.根据权利要求1至3中任意一项所述的方法，其特征在于，通过jenkins运行所述方法的前端代码的编译及部署流程。7.根据权利要求1至3中任意一项所述的方法，其特征在于，所述前端代码为微前端代码。8.一种基于容器化部署的微前端自动发布装置，其特征在于，包括：拉取模块，用于从服务器上拉取前端代码；获取模块，用于获取与所述前端代码对应的部署地址及后端服务地址；编译模块，用于通过第一shell脚本对前端代码进行编译，并根据所述部署地址及所述后端服务地址，将静态资源地址替换为所述部署地址，将接口地址替换为所述后端服务地址；发布模块，用于将编译后的前端代码进行部署发布。9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至
7中任一项所述基于容器化部署的微前端自动发布方法的步骤。10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述基于容器化部署的微前端自动发布方法的步骤。

技术总结
本发明涉及前端应用技术领域，公开了一种基于容器化部署的微前端自动发布方法、装置、设备及介质，首先，通过从服务器上拉取前端代码，获取与所述前端代码对应的部署地址及后端服务地址，通过第一SHELL脚本对前端代码进行编译，并根据部署地址及后端服务地址，将静态资源地址替换为部署地址，将接口地址替换为后端服务地址，将编译后的前端代码进行部署发布。实现了前端代码的自动化部署，提升了开发效率，降低人工成本。降低人工成本。降低人工成本。


技术研发人员：宋岩强 白剑波 李青龙
受保护的技术使用者：智慧星光（安徽）科技有限公司
技术研发日：2023.02.03
技术公布日：2023/7/22