jenkins自动化部署微前端项目(一)-欢迎使用zwight个人网站系统
×

jenkins自动化部署微前端项目(一)

简单配置自动化部署    

为方便微前端部署的打包流程,特引入jenkins实现自动化部署,jenkins依据配置自动从用户指定的git远程仓库中拉取代码,并按配置执行打包部署等动作,单页面应用部署过程主要流程为(此处不对jenkins的安装和插件的选用做过多的介绍):

    1、jenkins配置项目远程git仓库,实现构建时自动拉取对应仓库分支代码

    2、编写构建时所需要的使用到的shell代码,例如安装环境,执行打包等命令(单个shell命令块中的命令按顺序执行,前一指令未完成不会执行后面的指令)

    3、可使用构建后操作将shell命令打包之后的文件部署到所需服务器的项目位置(若部署服务器和jenkins在一起也可以使用shell命令移动部署文件进行部署)

微前端项目配置自动化部署

以上流程为单页面或其他项目的大概部署流程,本文主要记录的是微前端如何按需进行构建打包的流程。

一、构建过程中jenkins所使用的的主要插件

        1、Git:git插件主要用于获取git远程仓库的代码,同步到服务器中,测试时代码被同步到服务器的地址为

   /var/lib/jenkins/workspace
  2、Extended Choice Parameter:该插件为参数化构建过程中使用到的插件,目前只使用到该插件的Base Parameter Types的功能,插件大概使用的方式参考下图

微信截图_20210520180046.png


        3、布尔值参数:主要用于控制项目构建时是否需要执行安装npm命令,提供构建可选择需求

微信截图_20210521112936.png


        4、GIT:主要用于配置项目代码远程仓库地址和用户认证信息,构建时jenkins使用配置的信息去拉取对应的代码

微信截图_20210521113152.png

    

二、利用构建过程中所需要使用到的插件配置好所需参数之后在构建步骤添加执行shell命令,shell命令主要是利用参数化构建过程中设置好的参数进行项目中主应用和子应用的配置和打包,以及部署到项目部署环境。shell命令中首先获取到用户构建开始所选择的微前端所有主包和子包在项目中的路径字符串,并将其分割成数组,之后循环数组对每个子项目执行打包部署流程,打包过程中判断用户是否勾选了执行npm install指令,若未勾选则跳过该指令,主要是每次构建都安装一遍npm这样的操作既无任何意义,也会拖慢构建时间,具体执行代码参考如下:

#!/bin/bash
source /etc/profile
OLD_IFS="$IFS"
IFS=","
arr=($mutiParams)
IFS="$OLD_IFS"
for i in ${arr[@]}
do
    cd $WORKSPACE/$i
    rm -rf dist
    if [ $isRunInstall ]
    then
       npm install
    fi
    npm run build
    rm -rf /home/jenkins/$i
    mkdir -p /home/jenkins/$i
    mv dist/* /home/jenkins/$i
done

参考代码的移动打包好的文件是需要使用在当前服务器,若需要部署到非jenkins所在的服务器则需要使用其他shell指令进行移动.

当前共有 123 条留言

最新
最热
最早