Docker部署Spring Boot + Vue.js项目完整教程（附Gitee源码）_springboot的docker容器怎么集成vue的

Docker部署Spring Boot + Vue.js项目完整教程

部署成功结果展示：

项目源码(带Dockerfile)：

https://gitee.com/etilic/EnglishLearningAssistant_d

前言

本文将详细介绍如何使用Docker容器化部署一个前后端分离的项目，包括Spring Boot后端和Vue.js前端。通过Docker部署可以实现环境隔离、快速部署和跨平台运行。

项目架构

• 后端: Spring Boot + MyBatis-Plus + MySQL
• 前端: Vue.js + Vite
• 部署: Docker + Docker Compose + Nginx

EnglishLearningAssistant/├── ELABackEnd/  # Spring Boot后端│ ├── src/│ │ ├── main/│ │ │ ├── java/│ │ │ │ └── com/mrc/multiroundchatdemo/│ │ │ │ ├── config/ # 配置类│ │ │ │ ├── controller/ # 控制器│ │ │ │ ├── mapper/ # 数据访问层│ │ │ │ ├── models/ # 实体类│ │ │ │ ├── service/ # 业务逻辑层│ │ │ │ └── utils/  # 工具类│ │ │ └── resources/│ │ │ ├── application.properties│ │ │ └── init.sql│ │ └── test/│ ├── Dockerfile│ └── pom.xml├── Frontend/  # Vue3前端│ ├── src/│ │ ├── assets/│ │ ├── components/│ │ ├── App.vue│ │ └── main.js│ ├── public/│ ├── Dockerfile│ ├── nginx.conf│ ├── package.json│ └── vite.config.js├── docker-compose.yml # Docker编排配置└── README.md

环境准备

服务器环境

• Ubuntu/CentOS Linux服务器
• Docker 20.0+
• Docker Compose 2.0+
• MySQL数据库（可选外部或容器内）

安装Docker和Docker Compose

# 安装Dockercurl -fsSL https://get.docker.com | bash -s docker# 启动Docker服务sudo systemctl start dockersudo systemctl enable docker# 安装Docker Composesudo curl -L \"https://github.com/docker/compose/releases/download/v2.20.0/docker-compose-$(uname -s)-$(uname -m)\" -o /usr/local/bin/docker-composesudo chmod +x /usr/local/bin/docker-compose

验证是否安装成功

docker --versiondocker compose version

安装成功的响应：

项目配置

1. 后端配置

修改数据库连接配置

编辑 application.properties：
（将对应信息换成你自己的配置）

spring.application.name=MultiRoundChatDemo# 数据库配置spring.datasource.url=jdbc:mysql://YOUR_SERVER_IP:3306/your_database?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8spring.datasource.username=your_usernamespring.datasource.password=your_passwordspring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver# MyBatis-Plus配置mybatis-plus.mapper-locations=classpath*:/mapper/**/*.xmlmybatis-plus.type-aliases-package=com.mrc.multiroundchatdemo.models.entitiesmybatis-plus.configuration.map-underscore-to-camel-case=truemybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

创建后端Dockerfile

在后端项目根目录创建 Dockerfile：

FROM maven:3.8.4-openjdk-17-slim AS buildWORKDIR /appCOPY pom.xml .RUN mvn dependency:go-offlineCOPY src ./srcRUN mvn clean package -DskipTestsFROM openjdk:17-jdk-slimWORKDIR /appCOPY --from=build /app/target/MultiRoundChatDemo-0.0.1-SNAPSHOT.jar app.jarEXPOSE 8080CMD [\"java\", \"-jar\", \"app.jar\"]

关键点说明：

• 使用多阶段构建减小镜像大小
• 第一阶段用Maven构建项目
• 第二阶段只包含运行时环境和JAR包

2. 前端配置

创建前端Dockerfile

在前端项目根目录创建 Dockerfile：

FROM node:18-alpineWORKDIR /appCOPY package*.json ./RUN npm installCOPY . .RUN chmod +x node_modules/.bin/vite && npm run buildFROM nginx:alpineCOPY --from=0 /app/dist /usr/share/nginx/htmlCOPY nginx.conf /etc/nginx/nginx.confEXPOSE 3000CMD [\"nginx\", \"-g\", \"daemon off;\"]

创建Nginx配置

在前端项目根目录创建 nginx.conf：

events { worker_connections 1024;}http { include /etc/nginx/mime.types; default_type application/octet-stream; server { listen 3000; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://backend:8080/api/; 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; } }}

关键配置说明：

• try_files $uri $uri/ /index.html - 支持Vue Router的History模式
• proxy_pass http://backend:8080/api/ - 将API请求代理到后端服务
• 使用Docker内部服务名 backend 而不是IP地址

3. Docker Compose配置

在项目根目录创建 docker-compose.yml：

services: backend: build: ./ELABackEnd ports: - \"8080:8080\" environment: - SPRING_PROFILES_ACTIVE=prod restart: unless-stopped networks: - app-network frontend: build: ./Frontend ports: - \"3000:3000\" depends_on: - backend restart: unless-stopped networks: - app-networknetworks: app-network: driver: bridge

配置说明：

• depends_on - 确保后端先启动
• networks - 创建内部网络供服务间通信
• restart: unless-stopped - 容器异常退出时自动重启

部署流程

1. 准备数据库

-- 创建数据库CREATE DATABASE your_database CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;-- 创建用户并授权CREATE USER \'your_username\'@\'%\' IDENTIFIED BY \'your_password\';GRANT ALL PRIVILEGES ON your_database.* TO \'your_username\'@\'%\';FLUSH PRIVILEGES;-- 执行初始化脚本SOURCE /path/to/init.sql;

2. 上传项目文件

# 将项目上传到服务器scp -r your-project/ user@server_ip:/path/to/project/

或使用ssh上传：将文件拖动到ssh工具中对应存放项目的目录下

3. 构建和启动服务

进入项目目录，这里需要把”/path/to/project/“改成你的项目根目录（有docker-compose.yml的目录），构建并启动所有服务

# 进入项目目录cd /path/to/project/

# 构建并启动所有服务docker-compose up -d --build

成功部署

4. 验证部署

# 查看服务状态docker-compose ps

查看日志

# 查看日志docker-compose logs -f

测试后端API

# 测试后端APIcurl http://your_server_ip:8080/api/user/login

访问前端：
浏览器打开 http://your_server_ip:3000

点击登录，发现发送请求成功，证明前后端能对上，项目部署成功。

常见问题及解决方案

1. 权限问题

问题: sh: vite: Permission denied

解决方案:

RUN chmod +x node_modules/.bin/vite && npm run build

2. 网络连接问题

问题: 前端无法访问后端API

解决方案:

• 确保nginx配置中使用Docker服务名：http://backend:8080
• 检查docker-compose网络配置
• 确保防火墙开放相应端口

3. 数据库连接问题

问题: 后端无法连接数据库

解决方案:

• 检查数据库服务器是否允许外部连接
• 确认用户权限和密码正确
• 检查防火墙设置

4. 构建缓存问题

问题: 代码更新后容器没有更新

解决方案:

# 清理并重新构建docker-compose downdocker system prune -fdocker-compose up -d --build --force-recreate

生产环境优化

1. 安全配置

# docker-compose.prod.ymlservices: backend: environment: - SPRING_PROFILES_ACTIVE=prod - JAVA_OPTS=-Xmx512m -Xms256m restart: always frontend: restart: always

2. 日志管理

services: backend: logging: driver: \"json-file\" options: max-size: \"10m\" max-file: \"3\"

3. 健康检查

services: backend: healthcheck: test: [\"CMD\", \"curl\", \"-f\", \"http://localhost:8080/actuator/health\"] interval: 30s timeout: 10s retries: 3

常用运维命令

# 查看服务状态docker-compose ps# 查看实时日志docker-compose logs -f [service_name]# 重启服务docker-compose restart [service_name]# 停止所有服务docker-compose down# 更新并重启docker-compose up -d --build# 进入容器docker-compose exec backend bashdocker-compose exec frontend sh# 清理未使用的镜像docker image prune -f

总结

通过Docker容器化部署Spring Boot + Vue.js项目具有以下优势：

1. 环境一致性 - 开发、测试、生产环境完全一致
2. 快速部署 - 一键构建和部署
3. 易于扩展 - 可以轻松进行水平扩展
4. 资源隔离 - 不同项目间互不影响
5. 版本管理 - 可以快速回滚到任意版本

掌握Docker部署技能对于现代Web开发来说是必不可少的，希望本教程能帮助大家快速上手Docker容器化部署。

参考资源

• Docker官方文档
• Docker Compose文档
• Spring Boot Docker指南
• Vue.js部署指南

标签: Docker, Spring Boot, Vue.js, 容器化部署, 前后端分离