Docker与Jenkins实现RuoYi-Vue前后端分离项目的CI/CD全流程自动化
在现代软件开发中，持续集成与持续交付（CI/CD）已经成为提升研发效率、保障代码质量的关键环节。RuoYi-Vue作为一款广泛使用的基于Spring Boot和Vue.js的前后端分离框架，其部署涉及后端Java项目的编译打包、前端Vue项目的构建以及Nginx的配置。传统的手动部署方式不仅耗时，而且容易出错。本文将详细介绍如何利用Docker容器化技术与Jenkins自动化构建工具，实现RuoYi-Vue项目的全流程自动化部署。
一、 环境准备
在开始之前，需要确保服务器已经安装并配置好以下基础环境：
操作系统：CentOS 7 或 Ubuntu 20.04
Docker：用于构建镜像和运行容器
Jenkins：通过Docker部署，负责流水线调度
Git：用于拉取代码仓库
Maven：后端Java项目构建工具
Node.js：前端Vue项目构建工具
此外，需要提前准备好MySQL和Redis的Docker容器，或者确保RuoYi-Vue项目能够连接到现有的数据库和缓存服务。
二、 RuoYi-Vue项目结构分析
RuoYi-Vue采用标准的前后端分离架构：
后端（ruoyi-admin）：基于Spring Boot，最终打包为可执行的JAR文件。
前端（ruoyi-ui）：基于Vue.js，通过
npm run build:prod命令构建生成静态文件目录dist。
自动化部署的核心思路是：Jenkins从Git拉取代码，分别触发后端和前端的构建脚本，将构建产物打包成Docker镜像，最后通过Docker Compose或直接运行Docker容器来完成部署。
三、 后端项目的CI/CD配置
1. 编写后端Dockerfile
在ruoyi-admin模块的根目录下创建Dockerfile文件，用于构建后端服务的Docker镜像。
# 基础镜像使用Java 8 FROM openjdk:8-jdk-alpine # 作者信息 MAINTAINER ipipp # 在宿主机的/var/log/ruoyi目录下挂载日志 VOLUME /var/log/ruoyi # 将构建好的jar包添加到容器中并重命名 ADD ruoyi-admin.jar app.jar # 暴露后端服务端口 EXPOSE 8080 # 启动命令 ENTRYPOINT ["java", "-jar", "/app.jar"]
注意：在编写Dockerfile时，必须确保ADD指令指向的JAR包名称与Maven打包后的实际名称一致。
2. 后端Jenkins Pipeline脚本
在Jenkins中配置后端构建流水线。以下是一个典型的Jenkinsfile脚本片段，用于拉取代码、Maven打包、构建镜像并运行容器。
pipeline {
agent any
stages {
stage('拉取后端代码') {
steps {
git branch: 'master', url: 'https://www.ipipp.com/your-repo/ruoyi-vue.git'
}
}
stage('Maven构建') {
steps {
sh 'mvn clean package -DskipTests'
}
}
stage('构建后端Docker镜像') {
steps {
sh 'docker build -t ruoyi-backend:latest ./ruoyi-admin'
}
}
stage('部署后端容器') {
steps {
sh '''
docker stop ruoyi-backend || true
docker rm ruoyi-backend || true
docker run -d --name ruoyi-backend -p 8080:8080 ruoyi-backend:latest
'''
}
}
}
}四、 前端项目的CI/CD配置
1. 编写前端Nginx配置文件
前端项目通常需要Nginx作为Web服务器来托管静态文件并进行反向代理。在ruoyi-ui目录下创建nginx.conf文件。
server {
listen 80;
server_name localhost;
charset utf-8;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://ruoyi-backend:8080/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}此处的proxy_pass地址使用了Docker容器间的服务名ruoyi-backend，因此需要确保前端和后端容器在同一个Docker网络中。
2. 编写前端Dockerfile
在ruoyi-ui目录下创建Dockerfile，采用多阶段构建或直接基于Nginx镜像。这里使用直接基于Nginx镜像的方式，前提是Jenkins已经使用Node.js构建了dist目录。
FROM nginx:alpine MAINTAINER ipipp # 将前端构建产物复制到Nginx的静态文件目录 COPY dist/ /usr/share/nginx/html/ # 覆盖默认的Nginx配置文件 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露端口 EXPOSE 80
3. 前端Jenkins Pipeline脚本
前端流水线需要先安装依赖并构建，然后再打包Docker镜像。
pipeline {
agent any
stages {
stage('拉取前端代码') {
steps {
git branch: 'master', url: 'https://www.ipipp.com/your-repo/ruoyi-vue.git'
}
}
stage('安装依赖并构建') {
steps {
dir('ruoyi-ui') {
sh 'npm install'
sh 'npm run build:prod'
}
}
}
stage('构建前端Docker镜像') {
steps {
dir('ruoyi-ui') {
sh 'docker build -t ruoyi-frontend:latest .'
}
}
}
stage('部署前端容器') {
steps {
sh '''
docker stop ruoyi-frontend || true
docker rm ruoyi-frontend || true
docker run -d --name ruoyi-frontend -p 80:80 ruoyi-frontend:latest
'''
}
}
}
}五、 Jenkins全流程Pipeline整合
为了实现真正的自动化，可以将前端和后端的部署整合到一个Jenkinsfile中，并配置Docker网络以实现容器间通信。
pipeline {
agent any
environment {
BACKEND_IMAGE = 'ruoyi-backend:latest'
FRONTEND_IMAGE = 'ruoyi-frontend:latest'
NETWORK_NAME = 'ruoyi-net'
}
stages {
stage('初始化Docker网络') {
steps {
sh 'docker network create ${NETWORK_NAME} || true'
}
}
stage('拉取代码') {
steps {
git branch: 'master', url: 'https://www.ipipp.com/your-repo/ruoyi-vue.git'
}
}
stage('构建后端') {
steps {
sh 'mvn clean package -DskipTests'
sh 'docker build -t ${BACKEND_IMAGE} ./ruoyi-admin'
}
}
stage('部署后端') {
steps {
sh '''
docker stop ruoyi-backend || true
docker rm ruoyi-backend || true
docker run -d --name ruoyi-backend --network ${NETWORK_NAME} ${BACKEND_IMAGE}
'''
}
}
stage('构建前端') {
steps {
dir('ruoyi-ui') {
sh 'npm install'
sh 'npm run build:prod'
sh 'docker build -t ${FRONTEND_IMAGE} .'
}
}
}
stage('部署前端') {
steps {
sh '''
docker stop ruoyi-frontend || true
docker rm ruoyi-frontend || true
docker run -d --name ruoyi-frontend --network ${NETWORK_NAME} -p 80:80 ${FRONTEND_IMAGE}
'''
}
}
}
post {
always {
cleanWs()
}
}
}六、 总结
通过Docker与Jenkins的深度结合，我们实现了RuoYi-Vue前后端分离项目从代码拉取、编译构建、镜像打包到容器部署的全流程自动化。采用Docker网络通信解决了前后端容器间的调用问题，而Jenkins Pipeline则以代码的形式定义了整个部署流程，使得部署过程变得可追溯、可重复。这种CI/CD实践不仅极大降低了运维成本，也显著提升了团队的交付效率与软件发布质量。