使用Jenkins自动打包部署前端

此文转载自：https://blog.csdn.net/m0_46379371/article/details/113349835

公司要是环境多了，发个后端和前端要累死，再加上可能有时候还是连的vpn之类的，那上传更慢！所以配置一个Jenkins非常有必要，至于Jenkins安装什么的大家自行–度娘

注意: 我这篇文章具体的还是讲一下Jenkins部署项目的脚本整个流程,大家最好配置好自己的jenkins在来配置项目。

整体的下来如下图: 这六步---------------------相对来说我的这个比较简单就是发包的功能Jenkins更为复杂的配置大家下去若有兴趣可以一起交流！

第一步 General

注意: 我们使用的是GitLab。在上图中打马赛克的地方 GitLab Connection 这个呢是你配置好gitlab才有的。

紧接着下面就是 Git参数这一栏，填写前端分支！！

再然后就是选项参数，支持是否发布或回滚

第二步源码管理

写上自己前端的git地址选择好用户。

第三步构建环境（构建触发器我没操作，直接走的构建环境）

选择的是第七个

第四步构建

图中路径写的是服务器git中的地址

这是一个shell，还有另一个shell
紧接着给大家讲一下我做的这个Jenkins部署在一台服务器，但前端发包是发在另一台服务器的
所以大家看到文章的时候要仔细一点。我是两台服务器。

这是代码，大家好复制

#环境变量
echo $PATH
#node版本号
node -v
#npm版本号
npm -v

#进入jenkins workspace的项目目录
echo ${WORKSPACE}
cd ${WORKSPACE}

#这里是下载chromedriver 没有这个会报错
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

#镜像选择淘宝的镜像
#npm config set registry=http://registry.npm.taobao.org
#如果上面配置正确这个命令会有字符串response
#npm info underscore

#下载依赖包
npm install
#开始打包
npm run build-8800

#进入到打包目录
cd dist
#删除上次打包生成的压缩文件
rm -rf *.tar.gz
#把生成的项目打包成压缩包方便传输到远程服务器
tar -zcvf `date +%Y%m%d%H%M%S`.tar.gz *
#回到上层工作目录
cd ../

上面咱们说过我是两台服务器我要把包放在另一台
所以

第六步构建后操作

这是代码，大家好复制

#!/bin/bash

#进入远程服务器的目录
cd /usr/share/nginx/html/nx
echo `pwd`

#创建备份文件夹
mkdir backup

#删除旧的解压文件
rm -rf static/ index.html

#找到新的压缩包
new_dist=`ls -ltr *.tar.gz | awk '{print $NF}' |tail -1`
echo $new_dist

#解压到文件夹
tar -zxvf $new_dist -C ./

#备份打包文件
back_dist=$new_dist
mv $new_dist ./backup/$back_dist

#发布完成
echo "发布完成"