[收藏备忘系列] Jenkins+nginx+gitee 持续部署vue 应用教程

1. 开始

1.1 需求与环境架构

在上一篇文章中已经介绍了如何配置Jenkins 自动化部署spring boot 项目,那我们也希望能够自动化部署前端项目

如果不知道基础Jenkins操作 可以看上一篇一步一步构建spring boot 自动部署的

那么,我们的架构基于 Jenkins + vue +gitee +nginx 自动部署前端vue 项目,需要实现的功能如下:

1. 当代码提交到gitee ,触发Jenkins构建
2. Jenkins 配置好node 环境 打包vue项目
3. 把生成的dist 文件打包发送到 前端项目的服务器
4. nginx 作为前端服务器

2. 配置环境

2.1 配置 Jenkins 中配置 node

1. 首先安装 node 插件,安装好插件才能在配置中配置node 路径及安装

2. 安装 配置管理 -> 全局工具配置 -> NodeJS

这里可以看下你应用使用的是什么版本的,最好一致,避免后续麻烦

2.2 nginx 配置

nginx 安装没什么好讲的, 直接看官方文档 http://nginx.org/en/linux_packages.html#RHEL-CentOS

这里已经列的很清楚了 ,分几步就可以搞定

然后,在配置文件中/etc/nginx/nginx.conf配置一下你的路径

例如这样直接配置到你的Jenkins 任务空间的打包目录下 ,这样你就不用打包发送了,你也可以自由发挥(如果你对nginx 熟悉)

3.创建任务

3.1 创建任务

同样是选择自由风格restful

3.2 general

填下基本信息

3.3 源码管理

输入你的git地址 , 如果不提交,不处理,只是拉取代码就不需要添加凭据

3.4 构建触发器

这边也是使用webhook

http://47.102.129.69:8888/gitee-project/mini-erp-web
这个路径在gitee 中配置 ,提交gitee 时 gitee 会通知我们这个地址(配置步骤在下面)

点击,生成密码

然后在gitee项目中配置一下这条通知管理 -> webhook

http://47.102.129.69:8888/gitee-project/mini-erp-web
这里填入刚才Jenkins 上面的地址 与 密码

这里可以选择事件通知

3.5 构建环境

这里勾选nodejs 环境变量给Jenkins ,让后续步骤直接用就可以

3.6 构建

这里直接使用 shell 执行

这里设置了代理(npm真慢)
我的项目创建的时候结构有问题,所以要cd 一下,一般不用cd 直接默认就是在项目路径

# 设置代理
npm config set registry https://registry.npm.taobao.org  
# 正常不用,我这个项目创建层级有问题
cd mini-erp
# 安装依赖
npm install  
# 把之前的构建删掉
rm -rf dist
# 开始构建 , 这个可以看你项目的构建命令 , 不一定都是一样的
node build/build.js
# 进入构建目录
cd dist
# 打包
tar -zcvf mini-erp-web.tar.gz *

3.7 构建后发布

需要发布需要 安装 ssh 插件 Publish Over SSH

然后在 系统管理 -> 系统配置

然后在Jenkins 流程中写入发布到web服务器命令

我这里其实都是这一台服务器

这里几个参数:

1. 相对项目下的路径
2. 移除前缀文件夹,保留
3. 远程的路径
4. 执行的命令

可以看到 , 最终得到的是 在系统配置中的路径+第三步中的远程路径 +文件名

到这里就可以构建出,这样的效果,然后在web 服务器上将路径指向这个即可