Jenkins自动部署前端:


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


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


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


使用Jenkins自动打包部署前端_服务器


第一步 General


使用Jenkins自动打包部署前端_git_02

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

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

使用Jenkins自动打包部署前端_chrome_03

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

使用Jenkins自动打包部署前端_git_04


第二步 源码管理


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

使用Jenkins自动打包部署前端_git_05


第三步 构建环境(构建触发器我没操作,直接走的构建环境)


选择的是第七个

使用Jenkins自动打包部署前端_服务器_06


第四步 构建


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

使用Jenkins自动打包部署前端_服务器_07

这是一个shell,还有另一个shell

紧接着给大家讲一下 我做的这个Jenkins部署在一台服务器,但前端发包是发在另一台服务器的

所以大家看到文章的时候要仔细一点。我是两台服务器。

使用Jenkins自动打包部署前端_chrome_08

这是代码,大家好复制

#环境变量
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 ../

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

所以


第六步 构建后操作


使用Jenkins自动打包部署前端_服务器_09

这是代码,大家好复制

#!/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 "发布完成"


到这就结束了,写文章确实很累哈哈哈,不过很有成就感!!大家有什么不懂得地方评论区见!!希望帮到你们!!!过几天出一章后端的!


使用Jenkins自动打包部署前端_服务器_10



更多内容详见微信公众号:Python研究所

使用Jenkins自动打包部署前端_chrome_11