Jenkins+Gitlab实现Vue项目自动化部署

Jenkins+Gitlab实现Vue项目自动化部署

1.Jenkins操作

1.1创建项目

1.1.1新建Jenkins项目,填写项目信息,点击左下方确定

Jenkins+Gitlab实现Vue项目自动化部署_第1张图片
Jenkins+Gitlab实现Vue项目自动化部署_第2张图片

1.2进入配置项

1.2.1 General

书写相关项目描述
Jenkins+Gitlab实现Vue项目自动化部署_第3张图片

1.2.2源码管理

选择Git还是svn进行代码管理
Jenkins+Gitlab实现Vue项目自动化部署_第4张图片本项目采用Gitlab,选择Git,并且填写凭据信息
Jenkins+Gitlab实现Vue项目自动化部署_第5张图片
Jenkins+Gitlab实现Vue项目自动化部署_第6张图片
输入仓库地址后出现错误
Jenkins+Gitlab实现Vue项目自动化部署_第7张图片
点击Credentials 的下拉选择添加的凭据用户名报错消失
Jenkins+Gitlab实现Vue项目自动化部署_第8张图片

1.2.3构建环境

Jenkins+Gitlab实现Vue项目自动化部署_第9张图片
Jenkins+Gitlab实现Vue项目自动化部署_第10张图片
npm install —>下载工作区npm包
rm -rf ./dist/* —>删除dist目录下的所有文件,dist目录即为当前jenkins工作区打包后的文件。
npm run build —>执行打包命令
Jenkins+Gitlab实现Vue项目自动化部署_第11张图片
Jenkins+Gitlab实现Vue项目自动化部署_第12张图片

1.2.5构建后操作(根据是否需要进行配置)

Jenkins+Gitlab实现Vue项目自动化部署_第13张图片
rm -rf /usr/local/nginx/html/test
清理nginx下前端打包文件(上次发布)
cp -r /usr/local/test/dist/ /usr/local/nginx/html/test
从自动部署路径复制内容到nginx下的运行位置

1.3点击保存返回项目

1.3.1点击立即构建

Jenkins+Gitlab实现Vue项目自动化部署_第14张图片
出现蓝色标识表示构建成功
Jenkins+Gitlab实现Vue项目自动化部署_第15张图片
如果出现红色标识,点击控制台输出,首次使用可能原因是为下载node插件
Jenkins+Gitlab实现Vue项目自动化部署_第16张图片

1.4报错解决

1.4.1安装node插件

Jenkins+Gitlab实现Vue项目自动化部署_第17张图片
Jenkins+Gitlab实现Vue项目自动化部署_第18张图片

你可能感兴趣的:(vue,gitlab)