使用Gitee+Jenkins+Docker完成前后端分离项目的CI/CD

Gitee Webhook配置

Webhook配置

URL的格式为 http://[username]:[password或者jenkins的api_token]@www.yupaits.com:8080/generic-webhook-trigger/invoke 。

webhook请求提交的数据参考码云平台帮助文档。

Jenkins插件安装、环境配置

必需插件

Jenkins需要安装以下插件：

Generic Webhook Trigger Plugin
Git Plugin
NodeJS Plugin

全局环境

Jenkins需要配置以下全局工具：

JDK
Git
Maven
NodeJS

Jenkins任务配置

General

任务配置-General

源码管理

任务配置-源码管理

填写Gitee代码仓库地址，选择需要构建的分支。

构建触发器

任务配置-构建触发器

任务配置-构建触发器1

配置触发器参数和触发过滤条件。这里选择了分支名称和项目名称作为构建时的过滤条件。Expression里的$是webhook请求中的请求体JSON数据对象，而Variable中的ref则是Jenkins触发器的变量名，在Optional filter中可以通过$ref来引用该变量。

构建环境

任务配置-构建环境

由于Todo-Tomato项目里有基于vue-loader的前端SPA，所以构建时需要nodejs和npm环境。

构建

任务配置-构建

构建分三步：构建前执行脚本；maven构建；构建后执行脚本。

构建前脚本：停止相关docker容器；安装npm依赖；npm构建；dist文件夹移入后台Spring Boot项目的resources/public资源文件目录下。

#!/bin/bash
docker stop todo-tomato
cd /var/lib/jenkins/workspace/TodoTomato/todo-tomato-web
npm install
npm run build
mkdir -p ../todo-tomato-server/src/main/resources/public
rm -rf ../todo-tomato-server/src/main/resources/public/**
cp -rf dist/** ../todo-tomato-server/src/main/resources/public

构建后脚本：将构建生成的Jar包和DockerFile移入目标文件夹；停止相关docker容器并删除相关docker镜像；构建docker镜像；运行基于docker镜像的容器。

#!/bin/bash
mkdir -p /var/lib/jenkins/workspace/TodoTomato/todo-tomato-server/target/docker
cd /var/lib/jenkins/workspace/TodoTomato/todo-tomato-server/target
cp -f todo-tomato-server-*.jar docker
cp -f ../src/main/docker/DockerFile docker
cd docker
docker stop todo-tomato
docker rm todo-tomato
docker rmi yupaits/todo-tomato:latest
docker build -f DockerFile -t yupaits/todo-tomato:latest .
docker run -d -p 6060:6060 --restart always --name todo-tomato -v /root/todo-tomato/logs:/root/logs yupaits/todo-tomato:latest