Docker Compose 一键部署前后端分离项目（Vue3 + SpringBoot3 + MySQL）

前言：本地开发没问题，一上线就崩？服务器配置记不住？每次部署都要折腾半天？本文教你用 Docker Compose 一键部署 前后端分离项目，前端 Vue3、后端 SpringBoot3、数据库 MySQL，全部容器化，一条命令搞定！

一、为什么要用 Docker Compose？

二、项目结构

my-project/
├── backend/ # SpringBoot 后端
│ ├── src/
│ ├── pom.xml
│ └── Dockerfile
├── frontend/ # Vue3 前端
│ ├── src/
│ ├── package.json
│ ├── nginx.conf
│ └── Dockerfile
├── docker-compose.yml # Docker Compose 配置
└── README.md

三、后端 SpringBoot 配置

3.1 编写 Dockerfile

backend/Dockerfile：

# 多阶段构建，最终镜像只包含运行时
FROM maven:3.9-eclipse-temurin-17 AS builder

# 设置工作目录
WORKDIR /app

# 复制 pom.xml 并下载依赖（利用 Docker 缓存）
COPY pom.xml .
RUN mvn dependency:go-offline

# 复制源代码
COPY src ./src

# 打包
RUN mvn clean package -DskipTests

# 运行时镜像
FROM eclipse-temurin:17-jre

WORKDIR /app

# 从构建阶段复制 jar 包
COPY –from=builder /app/target/*.jar app.jar

# 暴露端口
EXPOSE 8080

# 启动应用
ENTRYPOINT [\”java\”, \”-jar\”, \”app.jar\”]

3.2 修改 application.yml

backend/src/main/resources/application.yml：

server:
port: 8080

spring:
datasource:
url: jdbc:mysql://mysql:3306/mydb?useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: rootpassword
driver-class-name: com.mysql.cj.jdbc.Driver
jpa:
hibernate:
ddl-auto: update
show-sql: true

注意：数据库地址改为 mysql（服务名），而不是 localhost

四、前端 Vue3 配置

4.1 编写 Dockerfile

frontend/Dockerfile：

# 构建阶段
FROM node:20-alpine AS builder

WORKDIR /app

# 复制 package.json 并安装依赖
COPY package.json pnpm-lock.yaml* ./
RUN npm install -g pnpm && pnpm install

# 复制源代码
COPY . .

# 构建生产版本
RUN pnpm build

# 运行时镜像（使用 Nginx）
FROM nginx:alpine

# 复制构建产物到 Nginx
COPY –from=builder /app/dist /usr/share/nginx/html

# 复制 Nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD [\”nginx\”, \”-g\”, \”daemon off;\”]

4.2 Nginx 配置

frontend/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 /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

4.3 Vite 配置（生产环境）

frontend/vite.config.ts：

export default defineConfig({

base: \’/\’, // 部署路径
server: {

port: