从零到一：RuoYi-Vue-Pro前端项目Docker化部署全攻略
项目地址: https://gitcode.com/yudaocode/ruoyi-vue-pro 开篇：为什么Docker化部署是前端工程的必然选择？
你是否还在为前端项目部署时的环境依赖冲突而头疼？是否经历过"在我电脑上能运行"的经典困境？Docker容器化技术彻底解决了这些问题，通过环境隔离实现"一次构建，到处运行"。本文将以RuoYi-Vue-Pro前端项目为例，提供一套完整的Docker化部署解决方案，从基础配置到高级优化，帮助你在1小时内完成从开发环境到生产环境的无缝迁移。
读完本文你将掌握：
- Docker容器化部署的核心原理与优势
- 前端项目Dockerfile的最佳实践配置
- 多容器协作的docker-compose编排技巧
- 环境变量管理与配置优化方案
- 部署过程中的常见问题解决方案
一、Docker化部署核心概念解析
1.1 容器化部署的技术优势
传统部署方式与Docker部署方式的对比：
| 部署方式 | 环境一致性 | 资源占用 | 部署效率 | 版本控制 | 隔离性 |
|---|---|---|---|---|---|
| 传统部署 | 差 | 高 | 低 | 困难 | 弱 |
| Docker部署 | 强 | 低 | 高 | 容易 | 强 |
1.2 RuoYi-Vue-Pro项目架构与Docker适配性
RuoYi-Vue-Pro作为典型的前后端分离项目，其架构天然适合Docker化部署：
二、准备工作：环境与工具链搭建
2.1 系统环境要求
| 软件 | 最低版本 | 推荐版本 | 作用 |
|---|---|---|---|
| Docker | 20.10.x | 24.0.5+ | 容器运行时环境 |
| Docker Compose | v2.x | v2.20.0+ | 多容器编排工具 |
| Git | 2.x | 2.40.0+ | 代码版本控制 |
| Node.js | 14.x | 16.18.0+ | 前端构建环境 |
2.2 项目代码获取
# 克隆项目仓库
git clone https://gitcode.com/yudaocode/ruoyi-vue-pro.git
cd ruoyi-vue-pro
三、前端项目Docker化实践
3.1 前端Dockerfile编写
创建yudao-ui/yudao-ui-admin-vue3/Dockerfile文件：
# 阶段一：构建阶段
FROM node:16.18.0-alpine as build-stage
WORKDIR /app
COPY package*.json ./
# 使用国内npm镜像加速依赖安装
RUN npm config set registry https://registry.npmmirror.com/ && npm install
COPY . .
RUN npm run build:prod
# 阶段二：生产阶段
FROM nginx:alpine as production-stage
# 复制构建产物到Nginx
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 复制自定义Nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 暴露80端口
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
3.2 Nginx配置优化
创建yudao-ui/yudao-ui-admin-vue3/nginx.conf文件，配置反向代理与性能优化：
server {
listen 80;
server_name localhost;
# 静态资源配置
root /usr/share/nginx/html;
index index.html;
# 前端路由支持
location / {
try_files $uri $uri/ /index.html;
}
# API请求代理
location /prod-api/ {
proxy_pass http://server:48080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# 性能优化配置
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_proxied any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
}
3.3 构建上下文优化
创建.dockerignore文件排除不必要的文件：
node_modules
npm-debug.log
yarn-error.log
.git
.gitignore
.env
.env.local
.env.development
.env.production
.DS_Store
.vscode
.idea
dist
三、多容器协作：docker-compose编排实战
3.1 docker-compose.yml完整配置
version: "3.8"
name: yudao-system
services:
# MySQL数据库服务
mysql:
container_name: yudao-mysql
image: mysql:8.0
restart: unless-stopped
tty: true
ports:
- "3306:3306"
environment:
MYSQL_DATABASE: ${MYSQL_DATABASE:-ruoyi-vue-pro}
MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD:-123456}
volumes:
- mysql:/var/lib/mysql/
- ../../sql/mysql/ruoyi-vue-pro.sql:/docker-entrypoint-initdb.d/ruoyi-vue-pro.sql:ro
networks:
- yudao-network
# Redis缓存服务
redis:
container_name: yudao-redis
image: redis:6.2-alpine
restart: unless-stopped
ports:
- "6379:6379"
volumes:
- redis:/data
networks:
- yudao-network
# 后端API服务
server:
container_name: yudao-server
build:
context: ./yudao-server/
image: yudao-server
restart: unless-stopped
ports:
- "48080:48080"
environment:
SPRING_PROFILES_ACTIVE: local
JAVA_OPTS: ${JAVA_OPTS:- -Xms512m -Xmx512m -Djava.security.egd=file:/dev/./urandom}
ARGS: >
--spring.datasource.dynamic.datasource.master.url=${MASTER_DATASOURCE_URL:-jdbc:mysql://mysql:3306/ruoyi-vue-pro?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true}
--spring.datasource.dynamic.datasource.master.username=${MASTER_DATASOURCE_USERNAME:-root}
--spring.datasource.dynamic.datasource.master.password=${MASTER_DATASOURCE_PASSWORD:-123456}
--spring.redis.host=${REDIS_HOST:-redis}
depends_on:
- mysql
- redis
networks:
- yudao-network
# 前端Web服务
admin:
container_name: yudao-admin
build:
context: ./yudao-ui-admin-vue3
args:
NODE_ENV: ${NODE_ENV:-production}
PUBLIC_PATH: ${PUBLIC_PATH:-/}
VUE_APP_TITLE: ${VUE_APP_TITLE:-芋道管理系统}
VUE_APP_BASE_API: ${VUE_APP_BASE_API:-/prod-api}
image: yudao-admin
restart: unless-stopped
ports:
- "80:80"
depends_on:
- server
networks:
- yudao-network
# 持久化卷配置
volumes:
mysql:
driver: local
redis:
driver: local
# 网络配置
networks:
yudao-network:
driver: bridge
3.2 环境变量管理策略
创建docker.env文件集中管理环境变量：
# MySQL配置
MYSQL_DATABASE=ruoyi-vue-pro
MYSQL_ROOT_PASSWORD=123456
# JVM参数配置
JAVA_OPTS=-Xms512m -Xmx1024m -XX:+UseG1GC -Djava.security.egd=file:/dev/./urandom
# 数据库连接配置
MASTER_DATASOURCE_URL=jdbc:mysql://mysql:3306/ruoyi-vue-pro?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true&nullCatalogMeansCurrent=true
MASTER_DATASOURCE_USERNAME=root
MASTER_DATASOURCE_PASSWORD=123456
REDIS_HOST=redis
# 前端环境变量
NODE_ENV=production
PUBLIC_PATH=/
VUE_APP_TITLE=芋道管理系统
VUE_APP_BASE_API=/prod-api
VUE_APP_TENANT_ENABLE=true
VUE_APP_CAPTCHA_ENABLE=true
四、完整部署流程：从构建到启动
4.1 构建与启动命令详解
# 1. 创建Maven缓存卷(加速依赖下载)
docker volume create --name yudao-maven-repo
# 2. 构建后端应用(仅首次需要)
docker run -it --rm --name yudao-maven \
-v yudao-maven-repo:/root/.m2 \
-v $PWD:/usr/src/mymaven \
-w /usr/src/mymaven \
maven:3.8-openjdk-11 mvn clean package '-Dmaven.test.skip=true'
# 3. 启动所有服务
docker compose --env-file docker.env up -d
# 4. 查看服务状态
docker compose ps
# 5. 查看日志
docker compose logs -f admin # 查看前端服务日志
docker compose logs -f server # 查看后端服务日志
4.2 部署流程图解
五、高级优化：性能调优与安全加固
5.1 Nginx性能优化配置
# 连接数优化
worker_processes auto;
worker_connections 10240;
multi_accept on;
# 事件处理模型
events {
use epoll;
worker_connections 10240;
}
# HTTP配置优化
http {
# 开启gzip压缩
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# 静态资源缓存
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 30d;
add_header Cache-Control "public, max-age=2592000";
}
# 限制请求速率
limit_req_zone $binary_remote_addr zone=req_limit:10m rate=10r/s;
limit_req zone=req_limit burst=20 nodelay;
}
5.2 安全加固措施
- 非root用户运行容器
# 在Dockerfile中添加
RUN addgroup -S appgroup && adduser -S appuser -G appgroup
USER appuser
- 敏感信息管理
# 使用Docker Secrets管理密码(生产环境推荐)
echo "123456" | docker secret create db_password -
- 容器资源限制
# 在docker-compose.yml中添加
deploy:
resources:
limits:
cpus: '0.5'
memory: 512M
reservations:
cpus: '0.2'
memory: 256M
六、问题诊断与解决方案
6.1 常见错误及解决方法
| 错误现象 | 可能原因 | 解决方案 |
|---|---|---|
| 数据库连接失败 | MySQL容器未就绪 | 增加后端服务启动延迟或依赖检查 |
| 前端报404错误 | Nginx配置错误 | 检查Nginx配置中的root路径和路由规则 |
| 内存溢出 | JVM参数配置不当 | 调整-Xms和-Xmx参数，避免超过物理内存 |
| 静态资源加载失败 | 路径配置错误 | 检查PUBLIC_PATH和Nginx的location配置 |
6.2 日志查看与问题定位
# 查看容器状态
docker compose ps
# 查看服务日志(带时间戳)
docker compose logs --timestamps server
# 实时查看日志
docker compose logs -f --tail=100 admin
# 进入容器内部排查
docker exec -it yudao-admin sh
七、生产环境部署最佳实践
7.1 多环境配置管理
/script/docker/
├── docker-compose.yml # 基础编排文件
├── docker.env # 生产环境配置
├── docker.dev.env # 开发环境配置
├── docker.test.env # 测试环境配置
└── config/
├── nginx.prod.conf # 生产环境Nginx配置
└── nginx.dev.conf # 开发环境Nginx配置
启动不同环境：
# 开发环境
docker compose --env-file docker.dev.env up -d
# 生产环境
docker compose --env-file docker.env up -d
7.2 CI/CD集成方案
Jenkinsfile关键配置：
pipeline {
agent any
stages {
stage('Build') {
steps {
sh 'docker run -it --rm -v $PWD:/app -w /app maven:3.8-openjdk-11 mvn clean package -Dmaven.test.skip=true'
}
}
stage('Docker Build') {
steps {
sh 'cd script/docker && docker compose build'
}
}
stage('Deploy') {
steps {
sh 'cd script/docker && docker compose --env-file docker.env up -d'
}
}
stage('Verify') {
steps {
sh 'curl -f http://localhost/api/actuator/health || exit 1'
}
}
}
}
八、总结与展望
8.1 部署方案对比总结
| RuoYi-Vue-Pro部署方式 | 实施难度 | 维护成本 | 扩展性 | 环境一致性 | 推荐指数 |
|---|---|---|---|---|---|
| 传统部署 | 中 | 高 | 低 | 差 | ★★☆☆☆ |
| Docker单机部署 | 低 | 中 | 中 | 好 | ★★★★☆ |
| Docker Swarm集群 | 中 | 中 | 高 | 好 | ★★★★☆ |
| Kubernetes部署 | 高 | 高 | 极高 | 极好 | ★★★☆☆ |
8.2 进阶学习路径
- 容器编排进阶：从Docker Compose到Kubernetes
- 服务网格：引入Istio实现流量管理与服务治理
- 云原生监控：Prometheus + Grafana监控体系搭建
- GitOps：使用ArgoCD实现声明式部署
通过本文介绍的Docker化部署方案，RuoYi-Vue-Pro前端项目可以实现环境隔离、快速部署和版本控制，显著提升开发效率和系统稳定性。无论是中小团队的快速迭代需求，还是企业级应用的稳定性要求，容器化部署都是现代前端工程的最佳实践之一。
附录：常用命令速查表
| 功能 | 命令 |
|---|---|
| 启动所有服务 | docker compose --env-file docker.env up -d |
| 停止所有服务 | docker compose down |
| 重启前端服务 | docker compose restart admin |
| 查看服务日志 | docker compose logs -f server |
| 备份数据库 | docker exec yudao-mysql mysqldump -uroot -p123456 ruoyi-vue-pro > backup.sql |
| 升级服务 | docker compose pull && docker compose up -d |
| 清理未使用资源 | docker system prune -a |
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
