1. 项目概述
最近在部署一个前后端分离项目时,我选择了Docker作为部署方案。这种部署方式不仅简化了环境配置,还提高了系统的可移植性。本文将详细介绍如何使用Docker部署基于Spring Boot和Vue.js的前后端分离项目,以若依(RuoYi)框架为例。
这个方案适用于任何基于Spring Boot和Vue.js开发的项目,无论你是个人开发者还是企业团队,都可以参考这个部署流程。通过Docker容器化部署,我们可以实现:
- 环境隔离:每个服务运行在独立的容器中
- 快速部署:一键启动所有服务
- 资源隔离:避免服务间相互影响
- 易于扩展:可以方便地增加实例数量
2. 环境准备
2.1 基础环境要求
在开始部署前,需要确保以下环境已经准备就绪:
- Linux服务器:本文以CentOS 7为例,需要具备root权限
- Docker环境:版本建议18.06+
- 开发工具:
- JDK 8
- Maven 3.6+
- Node.js 12+
- Vue CLI 4+
提示:如果是在Windows下开发,可以使用WSL2来运行Linux环境,这样能保持开发和生产环境的一致性。
2.2 Docker安装与配置
对于尚未安装Docker的环境,可以按照以下步骤安装:
bash复制# 卸载旧版本
sudo yum remove docker \
docker-client \
docker-client-latest \
docker-common \
docker-latest \
docker-latest-logrotate \
docker-logrotate \
docker-engine
# 安装必要工具
sudo yum install -y yum-utils
# 设置仓库
sudo yum-config-manager \
--add-repo \
https://download.docker.com/linux/centos/docker-ce.repo
# 安装Docker引擎
sudo yum install docker-ce docker-ce-cli containerd.io
# 启动Docker
sudo systemctl start docker
# 设置开机自启
sudo systemctl enable docker
# 验证安装
sudo docker run hello-world
安装完成后,建议配置Docker镜像加速器以提高拉取镜像的速度:
bash复制sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
"registry-mirrors": ["https://your-mirror.mirror.aliyuncs.com"]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker
3. 项目结构解析
3.1 若依项目简介
若依(RuoYi)是一个基于Spring Boot和Vue.js的前后端分离权限管理系统。它采用了现代化的技术栈,包括:
- 后端:Spring Boot + MyBatis + Redis
- 前端:Vue.js + Element UI
- 数据库:MySQL
项目结构分为两部分:
ruoyi-admin:后端服务ruoyi-ui:前端项目
3.2 代码获取与准备
从Gitee克隆项目代码:
bash复制git clone https://gitee.com/y_project/RuoYi-Vue.git
或者直接下载ZIP包并解压:
bash复制wget https://gitee.com/y_project/RuoYi-Vue/repository/archive/master.zip -O RuoYi-Vue.zip
unzip RuoYi-Vue.zip
解压后目录结构如下:
code复制RuoYi-Vue/
├── ruoyi-admin # 后端项目
├── ruoyi-common # 通用模块
├── ruoyi-framework # 框架核心
├── ruoyi-generator # 代码生成
└── ruoyi-ui # 前端项目
4. 数据库部署
4.1 创建Docker网络
首先创建一个自定义网络,用于容器间通信:
bash复制docker network create rynet
这个网络将用于连接MySQL、Redis、后端和前端容器。
4.2 MySQL容器部署
4.2.1 启动MySQL容器
使用以下命令启动MySQL 8.0容器:
bash复制docker run -d -p 3306:3306 \
-v /app/myconf:/etc/mysql/conf.d \
-v /app/mydata:/var/lib/mysql \
-e MYSQL_ROOT_PASSWORD=password \
--network rynet \
--name mysqldb \
mysql:8.0.39-debian
参数说明:
-v /app/myconf:/etc/mysql/conf.d:挂载配置文件目录-v /app/mydata:/var/lib/mysql:挂载数据目录-e MYSQL_ROOT_PASSWORD=password:设置root密码--network rynet:加入自定义网络--name mysqldb:容器名称
4.2.2 数据库初始化
- 创建数据库:
sql复制CREATE DATABASE ryvue;
- 导入初始数据:
bash复制# 将SQL文件复制到容器中
docker cp ry_20240629.sql mysqldb:/tmp/
# 进入容器执行导入
docker exec -it mysqldb bash
mysql -uroot -ppassword ryvue < /tmp/ry_20240629.sql
或者使用MySQL客户端工具如Navicat直接导入SQL文件。
5. Redis部署
5.1 启动Redis容器
bash复制docker run -d -p 6379:6379 \
--name myredis \
-v /app/redis/conf:/usr/local/etc/redis \
-v /app/redis/data:/data \
--network rynet \
redis
5.2 配置检查
确保后端项目的application.yml中Redis配置正确:
yaml复制redis:
host: myredis
port: 6379
password:
database: 0
这里使用容器名myredis作为主机名,因为所有容器都在同一个自定义网络中,可以通过容器名互相访问。
6. 后端服务部署
6.1 项目打包
在开发环境中,使用Maven打包后端项目:
bash复制cd ruoyi-admin
mvn clean package
打包完成后,会在target目录下生成ruoyi-admin.jar文件。
6.2 Docker镜像构建
6.2.1 创建Dockerfile
dockerfile复制FROM openjdk:8
LABEL author=yourname
COPY ruoyi-admin.jar /ruoyi-admin.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","/ruoyi-admin.jar"]
6.2.2 构建镜像
bash复制docker build -t ruoyiadmin:v1 .
6.3 运行后端容器
bash复制docker run -d -p 8080:8080 \
--name backend \
--network rynet \
-v /app/admindata/uploadPath:/ruoyi/uploadPath \
ruoyiadmin:v1
参数说明:
-v /app/admindata/uploadPath:/ruoyi/uploadPath:挂载上传文件目录--network rynet:加入自定义网络--name backend:容器名称,前端将通过这个名称访问后端服务
7. 前端服务部署
7.1 项目构建
在前端项目目录下执行:
bash复制cd ruoyi-ui
npm install
npm run build:prod
构建完成后会生成dist目录,包含所有静态资源。
7.2 Nginx配置
7.2.1 直接运行容器方式
bash复制docker run -d -p 80:80 \
-v /path/to/dist:/usr/share/nginx/html \
-v ryngconf:/etc/nginx \
--name rynginx \
--network rynet \
nginx
然后需要修改Nginx配置:
nginx复制worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
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://backend:8080/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
重新加载配置:
bash复制docker exec rynginx nginx -s reload
7.2.2 构建自定义镜像方式
- 创建Dockerfile:
dockerfile复制FROM nginx
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
- 构建镜像:
bash复制docker build -t ruoyifront:v1 .
- 运行容器:
bash复制docker run -d -p 80:80 \
--name rynginx1 \
--network rynet \
ruoyifront:v1
8. 系统验证
完成所有部署后,可以通过浏览器访问服务器IP地址:
code复制http://your-server-ip
应该能看到登录界面,输入默认账号密码(admin/admin123)即可进入系统。
9. 常见问题与解决方案
9.1 验证码不显示
可能原因:
- 后端服务未正确启动
- Nginx配置中
/prod-api/代理设置不正确 - 网络连接问题
解决方案:
- 检查后端容器日志:
docker logs backend - 验证Nginx配置是否正确代理到后端
- 确保所有容器都在同一个网络中
9.2 数据库连接失败
可能原因:
- MySQL容器未正常运行
- 数据库配置错误
- 网络问题
解决方案:
- 检查MySQL容器状态:
docker ps - 验证
application-druid.yml中的数据库配置 - 确保使用容器名作为主机名(如
mysqldb)
9.3 静态资源加载失败
可能原因:
- Nginx配置错误
- 文件权限问题
- 路径映射不正确
解决方案:
- 检查Nginx错误日志:
docker exec rynginx cat /var/log/nginx/error.log - 确保挂载的目录有正确权限
- 验证
dist目录是否包含所有必要文件
10. 优化建议
10.1 使用Docker Compose
为了简化部署流程,可以使用Docker Compose来管理所有服务。创建docker-compose.yml文件:
yaml复制version: '3'
services:
mysql:
image: mysql:8.0.39-debian
container_name: mysqldb
ports:
- "3306:3306"
volumes:
- /app/myconf:/etc/mysql/conf.d
- /app/mydata:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: password
networks:
- rynet
redis:
image: redis
container_name: myredis
ports:
- "6379:6379"
volumes:
- /app/redis/conf:/usr/local/etc/redis
- /app/redis/data:/data
networks:
- rynet
backend:
build: ./ruoyi-admin
container_name: backend
ports:
- "8080:8080"
volumes:
- /app/admindata/uploadPath:/ruoyi/uploadPath
depends_on:
- mysql
- redis
networks:
- rynet
frontend:
build: ./ruoyi-ui
container_name: rynginx
ports:
- "80:80"
depends_on:
- backend
networks:
- rynet
networks:
rynet:
driver: bridge
然后使用以下命令启动所有服务:
bash复制docker-compose up -d
10.2 性能优化
-
Nginx优化:
- 启用gzip压缩
- 配置缓存策略
- 调整worker进程数
-
JVM优化:
- 调整堆内存大小
- 选择合适的GC算法
-
MySQL优化:
- 调整InnoDB缓冲池大小
- 优化查询语句
10.3 监控与日志
- 使用
docker stats监控容器资源使用情况 - 配置日志轮转,避免日志文件过大
- 考虑使用Prometheus+Grafana搭建监控系统
11. 扩展思考
11.1 CI/CD集成
可以将这个部署流程集成到CI/CD流水线中,实现自动化构建和部署。例如使用Jenkins或GitHub Actions:
- 代码提交触发构建
- 运行测试
- 构建Docker镜像
- 推送镜像到仓库
- 部署到服务器
11.2 高可用方案
对于生产环境,可以考虑以下高可用方案:
- 后端服务多实例部署,配合Nginx负载均衡
- MySQL主从复制
- Redis集群
- 前端CDN加速
11.3 安全加固
- 使用HTTPS加密通信
- 配置防火墙规则
- 定期更新Docker镜像
- 使用非root用户运行容器
在实际部署过程中,我发现使用Docker部署前后端分离项目确实带来了很多便利,特别是在环境一致性和快速部署方面。不过也需要注意容器间的网络通信和资源配置问题。建议在正式上线前进行充分的测试和性能评估。