Docker部署Spring Boot与Vue项目的完整指南

1. 为什么选择Docker部署Spring Boot + Vue项目？

在当今的互联网开发中，前后端分离架构已经成为主流模式。Spring Boot作为Java生态中最流行的后端框架，与Vue这一前端框架的组合，被广泛应用于企业级应用开发。而Docker作为容器化技术的代表，为这种架构的部署带来了革命性的便利。

传统部署方式中，我们需要在服务器上手动安装JDK、Nginx、Node.js等运行环境，配置复杂且容易出错。我曾经在一个客户项目中，因为服务器环境差异导致部署失败，花了整整两天时间排查环境问题。而Docker通过容器化技术，将应用及其依赖打包成一个标准化的单元，实现了"一次构建，到处运行"的承诺。

具体到Spring Boot + Vue项目，Docker部署的优势主要体现在：

• 环境一致性：开发、测试、生产环境完全一致，避免"在我机器上能跑"的问题
• 隔离性：前后端服务相互隔离，资源分配更合理
• 可扩展性：可以轻松实现水平扩展和负载均衡
• 版本控制：每个Docker镜像都有明确版本，方便回滚

2. 项目结构与部署方案设计

2.1 典型项目结构分析

一个标准的Spring Boot + Vue前后端分离项目通常具有以下目录结构：

code复制project-root/
├── backend/          # Spring Boot项目
│   ├── src/
│   ├── pom.xml
│   └── Dockerfile
├── frontend/         # Vue项目
│   ├── public/
│   ├── src/
│   ├── package.json
│   └── Dockerfile
├── docker-compose.yml # 容器编排配置
└── README.md

这种结构清晰分离了前后端代码，便于团队协作和独立部署。在实际项目中，我建议保持这种结构，即使项目规模扩大也能保持良好的可维护性。

2.2 容器化部署策略

对于Spring Boot + Vue项目，我们有两种主要的Docker部署方案：

1. 分离部署方案：

   • 前端和后端分别构建独立的Docker镜像
   • 使用Nginx作为前端静态资源服务器
   • Spring Boot应用作为独立服务运行
   • 通过docker-compose编排管理

2. 一体化部署方案：

   • 将Vue构建后的静态资源打包到Spring Boot的static目录
   • 只构建一个包含前后端的Docker镜像
   • 由Spring Boot内置Tomcat同时服务API和静态资源

经过多个项目的实践，我更推荐分离部署方案，原因如下：

• 前后端可以独立扩展和更新
• 更符合微服务架构思想
• 前端可以利用Nginx的强大静态文件处理能力
• 部署失败时影响范围更小

3. Spring Boot后端Docker化实战

3.1 编写Spring Boot Dockerfile

Spring Boot应用的Dockerfile是容器化的核心配置文件。以下是一个经过生产验证的优化版本：

dockerfile复制# 第一阶段：构建应用
FROM maven:3.8.6-eclipse-temurin-17 as builder
WORKDIR /app
COPY backend/pom.xml .
RUN mvn dependency:go-offline
COPY backend/src ./src
RUN mvn package -DskipTests

# 第二阶段：运行应用
FROM eclipse-temurin:17-jre-jammy
WORKDIR /app
COPY --from=builder /app/target/*.jar app.jar

# 优化JVM参数
ENV JAVA_OPTS="-XX:+UseContainerSupport -XX:MaxRAMPercentage=75.0 -XX:+HeapDumpOnOutOfMemoryError -XX:HeapDumpPath=/heap-dump.hprof"

# 健康检查
HEALTHCHECK --interval=30s --timeout=3s \
  CMD curl -f http://localhost:8080/actuator/health || exit 1

EXPOSE 8080
ENTRYPOINT ["sh", "-c", "java ${JAVA_OPTS} -jar /app/app.jar"]

这个Dockerfile有几个关键优化点：

1. 使用多阶段构建减小最终镜像体积
2. 先单独复制pom.xml下载依赖，利用Docker缓存加速构建
3. 配置了合理的JVM内存参数，适配容器环境
4. 添加了健康检查端点

3.2 构建与运行Spring Boot容器

构建镜像命令：

bash复制docker build -t spring-boot-app -f backend/Dockerfile .

运行容器：

bash复制docker run -d -p 8080:8080 \
  -e "SPRING_PROFILES_ACTIVE=prod" \
  -v /path/to/logs:/app/logs \
  --name backend \
  spring-boot-app

这里有几个实用参数：

• -e 设置Spring Boot的激活profile
• -v 挂载日志目录到宿主机
• --name 指定容器名称便于管理

3.3 常见问题与解决方案

问题1：时区不一致
解决方案：在Dockerfile中添加：

dockerfile复制RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

问题2：容器内存不足
解决方案：调整JVM参数并限制容器内存：

bash复制docker run -d -m 1g --memory-swap 1.5g ...

问题3：构建时下载依赖慢
解决方案：使用阿里云Maven镜像，在pom.xml中添加：

xml复制<mirror>
  <id>aliyunmaven</id>
  <mirrorOf>*</mirrorOf>
  <name>阿里云公共仓库</name>
  <url>https://maven.aliyun.com/repository/public</url>
</mirror>

4. Vue前端Docker化实战

4.1 编写Vue Dockerfile

Vue项目的Docker化需要先构建静态文件，再用Nginx提供服务。以下是优化后的Dockerfile：

dockerfile复制# 第一阶段：构建
FROM node:16-alpine as builder
WORKDIR /app
COPY frontend/package*.json ./
RUN npm install --registry=https://registry.npmmirror.com
COPY frontend .
RUN npm run build

# 第二阶段：运行
FROM nginx:1.23-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY frontend/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

关键点说明：

1. 使用Alpine基础镜像减小体积
2. 先单独复制package.json利用缓存
3. 使用国内npm镜像加速安装
4. 多阶段构建分离构建环境和运行环境

4.2 配置Nginx

在frontend目录下创建nginx.conf文件：

nginx复制server {
    listen 80;
    server_name localhost;
    
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

这个配置实现了：

1. 处理Vue路由的history模式
2. 将/api请求代理到后端服务
3. 开启gzip压缩提升性能

4.3 构建与运行Vue容器

构建命令：

bash复制docker build -t vue-app -f frontend/Dockerfile .

运行命令：

bash复制docker run -d -p 80:80 --name frontend vue-app

4.4 性能优化技巧

1. 多阶段构建：最终镜像只包含运行所需的文件，体积可减小80%以上
2. 合理使用缓存：按照变动频率从低到高复制文件（package.json → src）
3. 镜像分层：将不常变动的层放在前面，加速构建
4. Alpine基础镜像：相比默认镜像可减少约50MB体积

5. 使用docker-compose编排服务

5.1 编写docker-compose.yml

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

yaml复制version: '3.8'

services:
  backend:
    build:
      context: .
      dockerfile: backend/Dockerfile
    image: spring-boot-app
    container_name: backend
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
      - SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/app_db
    depends_on:
      mysql:
        condition: service_healthy
    networks:
      - app-network

  frontend:
    build:
      context: .
      dockerfile: frontend/Dockerfile
    image: vue-app
    container_name: frontend
    ports:
      - "80:80"
    depends_on:
      - backend
    networks:
      - app-network

  mysql:
    image: mysql:8.0
    container_name: mysql
    environment:
      MYSQL_ROOT_PASSWORD: rootpass
      MYSQL_DATABASE: app_db
      MYSQL_USER: app_user
      MYSQL_PASSWORD: userpass
    volumes:
      - mysql-data:/var/lib/mysql
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
      interval: 5s
      timeout: 3s
      retries: 10
    ports:
      - "3306:3306"
    networks:
      - app-network

volumes:
  mysql-data:

networks:
  app-network:
    driver: bridge

这个配置实现了：

1. 定义三个服务：后端、前端和MySQL
2. 配置了服务间的网络通信
3. 设置了MySQL的健康检查
4. 使用数据卷持久化MySQL数据

5.2 启动与管理系统

启动所有服务：

bash复制docker-compose up -d

查看服务状态：

bash复制docker-compose ps

查看日志：

bash复制docker-compose logs -f backend

停止服务：

bash复制docker-compose down

5.3 生产环境优化建议

1. 资源限制：为每个服务配置CPU和内存限制

   yaml复制deploy:
     resources:
       limits:
         cpus: '0.5'
         memory: 512M
   

2. 重启策略：配置自动重启

   yaml复制restart: unless-stopped
   

3. 日志驱动：配置日志轮转

   yaml复制logging:
     driver: "json-file"
     options:
       max-size: "10m"
       max-file: "3"
   

4. 健康检查：为所有服务添加健康检查

6. 进阶部署方案与优化

6.1 使用CI/CD自动化部署

对于生产环境，建议设置自动化构建和部署流程。以下是GitHub Actions的示例配置：

yaml复制name: Build and Deploy

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    
    - name: Build backend
      run: |
        cd backend
        docker build -t spring-boot-app .
    
    - name: Build frontend  
      run: |
        cd frontend
        docker build -t vue-app .
    
    - name: Login to Docker Hub
      uses: docker/login-action@v2
      with:
        username: ${{ secrets.DOCKER_HUB_USERNAME }}
        password: ${{ secrets.DOCKER_HUB_TOKEN }}
    
    - name: Push images
      run: |
        docker tag spring-boot-app username/spring-boot-app:latest
        docker push username/spring-boot-app:latest
        docker tag vue-app username/vue-app:latest  
        docker push username/vue-app:latest

  deploy:
    needs: build
    runs-on: ubuntu-latest
    steps:
    - name: SSH and deploy
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.SERVER_HOST }}
        username: ${{ secrets.SERVER_USER }}
        key: ${{ secrets.SERVER_SSH_KEY }}
        script: |
          docker-compose pull
          docker-compose up -d

6.2 监控与日志管理

生产环境需要完善的监控系统，推荐组合：

1. Prometheus：收集指标数据
2. Grafana：可视化监控数据
3. ELK Stack：集中管理日志

docker-compose中添加监控服务：

yaml复制monitoring:
  image: prom/prometheus
  ports:
    - "9090:9090"
  volumes:
    - ./prometheus.yml:/etc/prometheus/prometheus.yml
  networks:
    - app-network

6.3 安全最佳实践

1. 最小权限原则：容器以非root用户运行

   dockerfile复制RUN addgroup -S appgroup && adduser -S appuser -G appgroup
   USER appuser
   

2. 定期更新基础镜像：修复安全漏洞

3. 扫描镜像漏洞：使用工具如Trivy

   bash复制trivy image spring-boot-app
   

4. 限制网络访问：只开放必要端口

5. 使用Secrets管理敏感信息：

   yaml复制secrets:
     db_password:
       file: ./db_password.txt
   

7. 实际项目中的经验分享

在多个生产项目中实施Docker部署Spring Boot + Vue项目后，我总结了以下宝贵经验：

1. 镜像构建优化：

   • 使用.dockerignore文件排除不必要的文件
   • 多阶段构建时，明确命名构建阶段便于维护
   • 保持Dockerfile指令顺序：从最不常变动的到最常变动的

2. 环境配置管理：

   • 区分不同环境的配置（dev/test/prod）
   • 使用环境变量而非硬编码配置
   • Spring Boot的application-{profile}.yml与Docker环境变量结合

3. 前端静态资源缓存：

   • 为静态资源添加hash指纹
   • 配置Nginx的长期缓存

   nginx复制location /assets {
     expires 1y;
     add_header Cache-Control "public";
   }
   

4. 数据库迁移策略：

   • 使用Flyway或Liquibase管理数据库变更
   • 在应用启动前确保数据库就绪

   yaml复制depends_on:
     mysql:
       condition: service_healthy
   

5. 零停机部署：

   • 使用Nginx的proxy_next_upstream处理失败请求
   • 实现蓝绿部署或滚动更新

   bash复制docker-compose up -d --no-deps --build frontend
   

6. 本地开发体验优化：

   • 配置热重载：Spring Boot DevTools + Vue Hot Module Replacement
   • 使用docker-compose.override.yml为开发环境添加特殊配置
   • 挂载源代码目录实现实时更新

7. 性能调优：

   • 调整JVM参数适配容器环境
   • 配置Nginx的worker_processes和worker_connections
   • 启用HTTP/2提升前端性能

8. 故障排查技巧：

   • 使用docker exec -it container sh进入容器调试
   • 查看容器日志时结合--tail和--since参数
   • 使用docker stats监控资源使用情况

通过以上实践，我们的团队成功将部署时间从原来的2小时缩短到15分钟，环境问题减少了90%，系统稳定性显著提升。特别是在应对突发流量时，Docker的快速扩展能力帮助我们平稳度过了多次流量高峰。