Jenkins自动部署前端:
公司要是环境多了,发个后端和前端要累死,再加上可能有时候还是连的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 "发布完成"