Docker（4）部署企业级前后端分离项目：Vue3 + Java 完整实战

1. 引言在真实的企业开发中将前端 Vue3 项目与后端 Java 项目通过 Docker 进行容器化部署是保障环境一致性、实现快速交付与弹性伸缩的关键环节。本文将从零开始带你完成一套贴近企业实践的部署方案涵盖镜像构建、容器编排、挂载卷、网络通信等核心内容全程使用docker run命令不使用 Docker Compose。2. 整体架构设计在动手之前我们先明确企业级部署的整体架构。一个典型的前后端分离项目通常包含以下组件前端服务Nginx 承载 Vue3 构建后的静态资源并反向代理后端 API。后端服务Java 应用Spring Boot 等提供 RESTful API。数据库MySQL 存储业务数据。缓存Redis 提供缓存与会话管理。所有容器通过自定义网络net-gym互联并通过容器名互相访问。下面是整体架构图Docker 宿主机客户端Redis 容器MySQL 容器Java 容器Nginx 容器http://backend-gym:8088HTTP浏览器 / 移动端静态资源反向代理 /apiSpring Boot 应用业务数据库缓存3. 环境准备3.1 安装 Docker首先确保你的服务器或开发机上已安装 Docker。# 验证 Docker 是否安装成功docker--version如果 Docker 尚未安装可以参考我之前写的《Docker1 Docker 安装全流程从入门到生产实践》里面有 Ubuntu、CentOS 等主流系统的详细安装步骤。建议使用 Ubuntu 24.04 LTS及以上。企业项目中我们通常将部署相关文件与代码仓库分离管理。建议的目录结构如下/usr/local/file/ ├── frontend/ │ └── GymManagementSystem/ # 前端部署目录 │ ├── dist/ # 前端编译产物 │ └── nginx/ │ └── default.conf # Nginx 配置 ├── backend/ │ └── GymManagementSystem/ # 后端部署目录 │ ├── mars-admin.jar # 后端 jar 包 │ └── application-prod.yml # 生产配置 └── mysql/ ├── data/ # MySQL 数据目录 └── conf/ # MySQL 配置目录4. 前端 Vue3 项目部署本章直接使用docker run命令启动 Nginx 容器通过挂载卷将前端编译产物和 Nginx 配置挂载到容器中无需编写 Dockerfile 和构建镜像。4.1 创建所需文件夹mkdir-p/usr/local/file/frontend/GymManagementSystemmkdir-p/usr/local/file/frontend/GymManagementSystem/nginx4.2 上传前端编译产物将前端项目npm run build生成的dist目录上传到/usr/local/file/frontend/GymManagementSystem/下。4.3 编写 Nginx 配置在/usr/local/file/frontend/GymManagementSystem/nginx/目录下创建default.confserver { listen 80; server_name _; root /usr/share/nginx/html; index index.html; # Vue/React history 路由刷新 404 解决方案 location / { try_files $uri $uri/ /index.html; } # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 7d; } # 前后端分离代理后端接口按需开启修改地址 location /api/ { proxy_pass http://backend-gym:8088/; 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; } }4.4 启动 Nginx 容器dockerrun-d\--namenginx-GymManagementSystem\--restartunless-stopped\--networknet-gym\-p8081:80\-v/usr/local/file/frontend/GymManagementSystem/dist:/usr/share/nginx/html:ro\-v/usr/local/file/frontend/GymManagementSystem/nginx/default.conf:/etc/nginx/conf.d/default.conf\nginx说明宿主机8081端口映射到容器80端口访问http://服务器IP:8081即可打开前端页面。5. 后端 Java 项目部署本章直接使用docker run命令启动后端容器通过挂载卷将 jar 包和配置文件挂载到容器中无需编写 Dockerfile 和构建镜像。5.1 创建所需文件夹mkdir-p/usr/local/file/backend/GymManagementSystem/logsmkdir-p/usr/local/file/mysql/data /usr/local/file/mysql/conf5.2 启动 MySQL 容器dockerrun-d\--namemysql-gym\--restartunless-stopped\--networknet-gym\-p3306:3306\-v/usr/local/file/mysql/data:/var/lib/mysql\-v/usr/local/file/mysql/conf:/etc/mysql/conf.d\-eMYSQL_ROOT_PASSWORD123456\-eMYSQL_DATABASEgym_system\mysql:8.05.3 启动 Redis 容器dockerrun-d\--nameredis-gym\--networknet-gym\-p6379:6379\redis:alpine5.4 启动后端项目容器将后端打包好的mars-admin.jar与application-prod.yml上传到/usr/local/file/backend/GymManagementSystem/目录然后启动dockerrun-d\--namebackend-gym\--networknet-gym\-p8080:8088\-eDB_HOSTmysql-gym\-eDB_PORT3306\-eDB_NAMEgym_system\-eDB_USERNAMEroot\-eDB_PASSWORD123456\-eREDIS_HOSTredis-gym\-eREDIS_PORT6379\-v/usr/local/file/backend/GymManagementSystem/mars-admin.jar:/app/app.jar\-v/usr/local/file/backend/GymManagementSystem/application-prod.yml:/app/application-prod.yml\eclipse-temurin:17-jre-alpine\sh-cjava -Xms256m -Xmx512m -Djava.security.egdfile:/dev/./urandom -jar /app/app.jar --spring.profiles.activeprod说明后端容器内部端口为8088映射到宿主机8080。Nginx 通过容器名backend-gym在net-gym网络内访问后端8088端口。7. 启动与验证7.1 启动全部服务按顺序执行以下命令启动全部容器# 1. 创建网络已创建可跳过dockernetwork create net-gym# 2. 启动 MySQLdockerstart mysql-gym# 3. 启动 Redisdockerstart redis-gym# 4. 启动后端dockerstart backend-gym# 5. 启动前端 Nginxdockerstart nginx-GymManagementSystem# 查看所有容器运行状态dockerps7.2 验证服务可用性# 验证前端页面curl-Ihttp://localhost:8081# 验证后端健康检查接口curlhttp://localhost:8080/api/health# 验证 MySQL 连接dockerexec-itmysql-gym mysql-uroot-p-eSELECT 1;# 验证 Redis 连接dockerexec-itredis-gym redis-cliping7.3 常见问题排查问题现象可能原因解决方案前端页面 404Nginx 配置错误检查default.conf的try_files配置后端接口 502服务未启动或网络不通检查docker ps与容器日志docker logs backend-gym数据库连接失败密码不匹配或未初始化检查-e MYSQL_ROOT_PASSWORD与后端DB_PASSWORD是否一致容器间无法通信未加入同一网络确认所有容器都使用--network net-gym8. 数据持久化与备份8.1 挂载卷说明本文方案中以下数据均通过挂载卷持久化到宿主机服务容器路径宿主机路径用途MySQL/var/lib/mysql/usr/local/file/mysql/data数据库文件Redis/data未挂载内存缓存缓存数据后端/app/app.jar/usr/local/file/backend/GymManagementSystem/mars-admin.jar后端 jar 包后端/app/application-prod.yml/usr/local/file/backend/GymManagementSystem/application-prod.yml生产配置Nginx/usr/share/nginx/html/usr/local/file/frontend/GymManagementSystem/dist前端静态资源Nginx/etc/nginx/conf.d/default.conf/usr/local/file/frontend/GymManagementSystem/nginx/default.confNginx 配置提示如需 Redis 持久化可在启动时增加-v /usr/local/file/redis/data:/data挂载参数。11. 滚动更新与回滚11.1 滚动更新企业发布新版本时使用以下流程实现零停机更新# 1. 构建新版本后端镜像如有代码变更dockerbuild-tmyapp-backend:1.1.0.# 2. 停止并删除旧容器dockerstop backend-gymdockerrmbackend-gym# 3. 使用新镜像重新启动容器dockerrun-d\--namebackend-gym\--networknet-gym\-p8080:8088\-eDB_HOSTmysql-gym\-eDB_PORT3306\-eDB_NAMEgym_system\-eDB_USERNAMEroot\-eDB_PASSWORD123456\-eREDIS_HOSTredis-gym\-eREDIS_PORT6379\-v/usr/local/file/backend/GymManagementSystem/mars-admin.jar:/app/app.jar\-v/usr/local/file/backend/GymManagementSystem/application-prod.yml:/app/application-prod.yml\eclipse-temurin:17-jre-alpine\sh-cjava -Xms256m -Xmx512m -Djava.security.egdfile:/dev/./urandom -jar /app/app.jar --spring.profiles.activeprod11.2 快速回滚# 回滚到上一版本重新上传旧 jar 包后重启容器dockerstop backend-gymdockerrmbackend-gym# 重新执行 11.1 中的 docker run 命令即可12. 总结通过本文的完整实践你已经掌握了使用 Docker 命令部署 Vue3 前端与 Java 后端企业级项目的方法。核心要点总结如下自定义网络通过docker network create net-gym实现容器间通过容器名通信。挂载卷持久化保障数据库、上传文件等数据不因容器重建而丢失。环境变量外部化敏感配置与代码分离提升安全性。端口映射宿主机端口与容器端口灵活映射满足不同访问需求。容器生命周期管理掌握docker run、docker start、docker stop、docker rm等核心命令。这套方案可以直接应用于真实的企业项目交付后续可根据业务规模引入 Kubernetes 进行更复杂的编排管理。