文章目录
- 1. 开始
- 1.1 需求与环境架构
- 2. 配置环境
- 2.1 配置 Jenkins 中配置 node
- 2.2 nginx 配置
- 3.创建任务
- 3.1 创建任务
- 3.2 general
- 3.3 源码管理
- 3.4 构建触发器
- 3.5 构建环境
- 3.6 构建
- 3.7 构建后发布
1. 开始
1.1 需求与环境架构
在上一篇文章中已经介绍了如何配置Jenkins 自动化部署spring boot 项目,那我们也希望能够自动化部署前端项目
那么,我们的架构基于 Jenkins + vue +gitee +nginx 自动部署前端vue 项目,需要实现的功能如下:
- 当代码提交到gitee ,触发Jenkins构建
- Jenkins 配置好node 环境 打包vue项目
- 把生成的dist 文件打包发送到 前端项目的服务器
- nginx 作为前端服务器
2. 配置环境
2.1 配置 Jenkins 中配置 node
- 首先安装 node 插件,安装好插件才能在配置中配置node 路径及安装
- 安装
配置管理 -> 全局工具配置 -> 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服务器命令
我这里其实都是这一台服务器
这里几个参数:
- 相对项目下的路径
- 移除前缀文件夹,保留
- 远程的路径
- 执行的命令
可以看到 , 最终得到的是 在
系统配置中的路径+第三步中的远程路径 +文件名
到这里就可以构建出,这样的效果,然后在web 服务器上将路径指向这个即可
