前端自动化部署基于jenkins和gitlab

一个项目的三个环节，开发环境，测试环境，生产环境，然后每次 npm 打包ftp去拖是不是很麻烦，只想一次提交git后不同环境就能够根据不同环境的对应的分支进行打包，代码发布。
jenkins和gitlab配合起来的确是特别爽
首先在安装了jenkins的服务器上配置node环境

1、wget https://npm.taobao.org/mirrors/node/v8.11.3/node-v8.11.3-linux-x64.tar.xz
2、tar -xvf node-v8.11.3-linux-x64.tar.xz
3、npm config set prefix “/usr/local/node-v8.11.3-linux-x64/node_global”
4、npm config set cache “/usr/local/node-v8.11.3-linux-x64/node_cache”
5、npm config set registry https://registry.npm.taobao.org
6、npm install vue-cli -g

然后genkins需要先安装git插件，下载地址
http://updates.jenkins-ci.org/download/plugins/gitlab-plugin/
这里安装它
这里写图片描述
然后新建任务

输入项目名字，选择第一个自由风格的软件项目、
这里写图片描述

源码管理，gitlab上的仓库地址url
这里写图片描述
如图片中提示报错，应该填写的是url哦
http://192.168.0.11/front-test/front-test.git
在安装jenkins的服务器上查看git是否安装
git –version

没有者安装
全局工具里配置git

添加 Credentials

这里写图片描述
输入gitlab 登录帐号密码

选择分支

构建里填写shell ，npm 打包命令
这里写图片描述

echo $PATH
node -v
npm -v 
npm install
npm run build
cd /var/lib/jenkins/workspace/frontend-test/dist
tar -zcvf dist.tar.gz *

打包后需要把代码到dev服务器
填写如下
这里写图片描述

Source files 打包后的资源文件
Remote directory 远程目录即dev的上要放的项目目录
Exec command 在dev上要执行的sh脚本，解压删除等

配置Remote directory路径和开发服务地址
系统管理—系统设置
这里写图片描述

这里写图片描述

然后保存点击立即构建
这里写图片描述

但是呢会报错
这里写图片描述

修改一下执行shell对文件的删除进行判断

echo $PATH
if [ -f "/var/lib/jenkins/workspace/frontend-test/dist/dist.tar.gz" ]; then
    rm /var/lib/jenkins/workspace/frontend-test/dist/dist.tar.gz
    echo "删除dist-tar"
fi
node -v
npm -v 
npm install
npm run build
cd /var/lib/jenkins/workspace/frontend-test/dist
tar -zcvf /var/lib/jenkins/workspace/frontend-test/dist/dist.tar.gz *

如图
这里写图片描述
同时修改开发服上sh命令

cd /var/www/html/
pwd 
ls -l

if [ -f "index.html" ]; then
    rm index.html
fi

if [ -d "static/" ]; then
    rm -rf static
fi

if [ -f "dist.tar.gz" ]; then
    tar -xzvf dist.tar.gz
    rm dist.tar.gz
fi

然后点击构建
控制台结尾输出
这里写图片描述

前端自动化部署基于jenkins和gitlab

猜你喜欢