Jenkins--H5 front前端自动化部署（Jenkins服务在Linux系统）

由于此次H5前端项目是多子项的前端项目，所以用到多参数构建。

下面先看一下构建页面如下：

 

 

 

接下来开始参数配置和脚本编写：

一、参数配置

git参数

 

 

 

 

子项参数，需要用到插件Extended Choice Parameter，可在Jenkins插件中心下载安装

 

 

环境参数

 

 

服务器参数

 

 

项目部署所在的目录参数

 

 

 

二、源码管理

 

 

 

三、构建步骤

构建依赖以及编译打包，使用shell脚本完成

 

 以下是完整脚本：

#!/bin/sh -l
# 项目名
pro_name=$JOB_BASE_NAME;
# 获得需要打包的子项
str=$Choiceiterms;
echo 参数Choiceiterms：$str
if [ "$str" == "" ];then
echo Error:参数Choiceiterms您没有选择，没有可编译打包的子项!!!
exit 1
fi
# 将拉下的代码与本地代码合并
git rebase origin/$GITBranch;

# 以,分隔符进行分割
dirs_arr=${str//,/ };

# 更换淘宝源
npm config set registry https://registry.npm.taobao.org ;

# 判断上次新建build文件是否存在，存在则删掉其中的内容
if [ -d "$pro_name" ];then
    echo "$pro_name 文件夹存在，删除文件夹里的内容";
    rm -rf $pro_name/*;
else
    echo "$pro_name 文件夹不存在，新建";
    mkdir $pro_name;
fi;

# 判断上次新建的压缩包是否存在，存在删除掉
if [ -f "$pro_name.tar" ];then
    echo "$pro_name.tar 存在，删除";
    rm -f "$pro_name.tar";
else
    echo "$pro_name.tar 不存在";
fi;

    
# 循环进入每个目录分别进行编译
for  i in ${dirs_arr[*]};
 do 
    echo "现在进行的是$i子项";
    cd $i;
    
    # 截取获取-后面的内容
    #i=${i#*-};   
    
    # 下载依赖包
    echo npm install
    npm install;
   

    
     # 若是测试环境，则按照test进行编译，生产环境按照prod编译
    if [ "$env" = "test" ];then    
        echo "构建测试环境包，运行npm run build:test";
        npm run build:test;
        
    elif [ "$env" = "prod" ];then    
        echo "构建生产环境包，运行npm run build:prod";
        npm run build:prod        
        
    else 
        echo "不支持该方式";
    fi;
    
    echo "创建$i 对应文件夹";
    mkdir $i;

    # 将build文件夹移到子项目文件夹
    echo "将build 文件夹移到$i子项文件夹中";
    echo | pwd;
    cp -r build/* $i/;
    
    # 将子项文件夹移动到$JOB_BASE_NAME文件夹中
    echo "将build 后$i子项文件夹移动到项目$pro_name文件夹";
    cp -r $i ../$pro_name/ ;
    
    # 返回项目根目录  
    cd ..;
   
 done
 # 将存放build的文件夹压缩
 echo 创建压缩包$pro_name.tar
tar -czvf $pro_name.tar $pro_name ;

四、构建后步骤

 

推送到服务并且替换原来的包

 

 完整脚本如下：

#!/bin/bash
# 输出当前目录
echo | pwd;
# 获得项目目录
pro_name=$JOB_BASE_NAME;
#复制压缩文件到指定目录/images/ums-front
cp $pro_name.tar $ProDir
echo 跳到项目目录cd $ProDir
cd $ProDir;
echo 解压缩文件$pro_name.tar
tar -zxvf  $pro_name.tar;
pwd;
# 复制要替换的子项内容出来
cp -rf $pro_name/*  .;
# 删除压缩包
rm -rf $pro_name.tar;
rm -rf $pro_name;

完成。~