Docker Compose 部署 Vue 3 与 Spring Boot

vue3-springboot-demo/
├── frontend/          # Vue3前端项目（Vite构建）
│   ├── Dockerfile     # 前端镜像构建文件
│   ├── package.json   # 前端依赖
│   ├── vite.config.js # Vite配置
│   └── dist/          # 打包后的静态文件（npm run build生成）
├── backend/           # SpringBoot后端项目
│   ├── Dockerfile     # 后端镜像构建文件
│   ├── pom.xml        # Maven依赖
│   └── src/           # 后端源码
└── docker-compose.yml # Compose编排文件（核心）

# 阶段1：构建前端静态文件
FROM node:24-alpine as build-stage
WORKDIR /app
# 复制依赖文件（利用Docker缓存，避免每次都重装依赖）
COPY package*.json ./
# 国内镜像源加速安装
RUN npm install --registry=https://registry.npmmirror.com
# 复制全部源码
COPY . .
# 打包构建（Vite构建生产环境包）
RUN npm run build

# 阶段2：使用Nginx部署静态文件（轻量、高性能）
FROM nginx:alpine as production-stage
# 复制构建好的静态文件到Nginx默认目录
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 自定义Nginx配置（解决Vue Router history模式刷新404 + 接口反向代理）
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 暴露容器内部80端口（仅容器内可见）
EXPOSE 80
# 启动Nginx（前台运行，避免容器退出）
CMD ["nginx", "-g", "daemon off;"]

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # 解决Vue3 Router history模式刷新404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理后端接口（前端请求/api全部转发到后端容器）
    location /api {
        proxy_pass http://backend:8080; # backend是Compose中后端服务名
        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;
    }

    # 静态资源缓存（优化性能）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 7d;
        add_header Cache-Control "public, max-age=604800";
    }
}

# 阶段1：构建SpringBoot项目
FROM maven:3.8.5-openjdk-17 as build-stage
WORKDIR /app
# 复制pom.xml和源码
COPY pom.xml ./
COPY src ./src
# 国内镜像源加速打包（替换为阿里云Maven仓库）
RUN mvn clean package -Dmaven.test.skip=true -Dmaven.repo.local=/root/.m2/repository -s /usr/share/maven/ref/settings-docker.xml

# 阶段2：运行SpringBoot项目（轻量JRE镜像）
FROM openjdk:17-jdk-slim
WORKDIR /app
# 从构建阶段复制打包好的jar包
COPY --from=build-stage /app/target/*.jar app.jar
# 暴露后端端口
EXPOSE 8080
# JVM优化参数（可选）
ENV JAVA_OPTS="-Xms512m -Xmx1024m -Djava.security.egd=file:/dev/./urandom"
# 启动后端服务
ENTRYPOINT ["sh", "-c", "java $JAVA_OPTS -jar app.jar"]

// com.example.demo.controller.HelloController
package com.example.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("/api")
public class HelloController {

    @GetMapping("/hello")
    public Map<String, Object> hello() {
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("message", "Hello from SpringBoot Backend!");
        result.put("data", "Vue3 + SpringBoot 部署成功");
        return result;
    }
}

// com.example.demo.config.CorsConfig
package com.example.demo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://127.0.0.1:8080");
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        config.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/api/**", config);
        return new CorsFilter(source);
    }
}

# 定义服务集合
services:
  # 前端服务
  frontend:
    # 基于前端目录的Dockerfile构建镜像
    build: ./frontend
    # 容器名称（便于管理）
    container_name: vue3-frontend
    # 重启策略：异常崩溃/服务器重启后自动启动（除非手动停止）
    restart: unless-stopped
    # 端口映射：仅绑定回环地址127.0.0.1，主机8080 → 容器80
    # 关键：127.0.0.1限定仅本机可访问，外网无法连接
    ports:
      - "127.0.0.1:8080:80"
    # 依赖后端服务，确保后端先启动
    depends_on:
      - backend
    # 加入自定义网络（前后端容器互通）
    networks:
      - app-network

  # 后端服务
  backend:
    # 基于后端目录的Dockerfile构建镜像
    build: ./backend
    container_name: springboot-backend
    restart: unless-stopped
    # 端口映射：仅绑定回环地址，主机8081 → 容器8080
    ports:
      - "127.0.0.1:8081:8080"
    # 环境变量（可配置数据库地址、端口等）
    environment:
      - SPRING_PROFILES_ACTIVE=prod
      - SERVER_PORT=8080
    # 自定义网络
    networks:
      - app-network

# 自定义桥接网络（隔离外部网络，仅前后端容器互通）
networks:
  app-network:
    driver: bridge

# 首次启动：构建镜像 + 启动容器（后台运行）
docker-compose up -d --build

# 后续启动（无需重新构建镜像）
docker-compose up -d

# 查看容器运行状态
docker-compose ps

# 查看前端日志（排查前端问题）
docker-compose logs -f frontend

# 查看后端日志（排查后端问题）
docker-compose logs -f backend

# 测试后端接口（本机访问）
curl http://127.0.0.1:8081/api/hello

{"code":200,"data":"Vue3 + SpringBoot 部署成功","message":"Hello from SpringBoot Backend!"}

# 停止服务（保留容器，可重启）
docker-compose stop

# 重启服务
docker-compose restart

# 停止并删除容器（保留镜像）
docker-compose down

# 停止并删除容器 + 镜像（彻底清理）
docker-compose down --rmi all

# 查看容器资源占用
docker stats vue3-frontend springboot-backend