Spring Boot+Vue+Docker全栈开发与部署实战-代码聚汇网

Spring Boot+Vue+Docker全栈开发与部署实战

左颈吻客

1. 项目概述与核心价值

在现代Web应用开发中，前后端分离架构已成为主流选择。Spring Boot作为Java生态中最流行的后端框架，与Vue.js这一渐进式前端框架的组合，能够快速构建高性能的企业级应用。而Docker容器化技术则为这类应用的部署提供了标准化、可移植的解决方案。

这套技术栈的核心优势在于：

开发效率：前后端分离允许团队并行开发，接口定义好后即可各自推进
性能表现：Spring Boot的嵌入式Tomcat与Vue的静态资源打包各司其职
部署便捷：Docker镜像一次构建处处运行，避免环境差异导致的问题
扩展灵活：容器化架构便于横向扩展和版本回滚

2. 环境准备与工具选型

2.1 基础环境配置

建议使用以下环境组合：

操作系统：Ubuntu 20.04 LTS（生产环境推荐）或 macOS（开发环境）
Docker版本：20.10.12+（需支持Compose V2格式）
Java版本：JDK 11（Spring Boot 2.7.x兼容版本）
Node.js版本：16.x LTS（Vue CLI的稳定支持版本）

重要提示：所有版本号建议精确锁定，避免自动升级导致兼容性问题。可通过.nvmrc和maven-wrapper.properties文件固定版本。

2.2 开发工具推荐

IDE选择：
- IntelliJ IDEA Ultimate（Spring Boot开发）
- VS Code（Vue前端开发，配合Volar插件）
辅助工具：
- Postman（API调试）
- Docker Desktop（本地容器管理）
- k9s（Kubernetes集群管理）

3. 项目结构与Docker化设计

3.1 典型项目目录布局

code复制project-root/
├── backend/            # Spring Boot项目
│   ├── src/
│   ├── Dockerfile
│   └── pom.xml
├── frontend/           # Vue项目
│   ├── public/
│   ├── src/
│   ├── Dockerfile
│   └── package.json
├── docker-compose.yml  # 整体编排文件
└── .env                # 环境变量配置

3.2 多阶段构建策略

后端Dockerfile示例：

dockerfile复制# 构建阶段
FROM maven:3.8.6-jdk-11 AS builder
WORKDIR /app
COPY pom.xml .
RUN mvn dependency:go-offline
COPY src ./src
RUN mvn package -DskipTests

# 运行阶段  
FROM openjdk:11-jre-slim
COPY --from=builder /app/target/*.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","app.jar"]

前端Dockerfile关键点：

dockerfile复制FROM node:16-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

4. 关键配置详解

4.1 Spring Boot应用配置

application.yml优化：

yaml复制server:
  port: 8080
  servlet:
    context-path: /api
    
spring:
  datasource:
    url: jdbc:mysql://mysql:3306/app_db?useSSL=false
    username: ${DB_USER}
    password: ${DB_PASSWORD}

跨域处理方案：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .maxAge(3600);
    }
}

4.2 Vue项目配置要点

axios全局配置：

javascript复制// src/utils/request.js
const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || '/api',
  timeout: 10000
})

环境变量处理：

ini复制# .env.production
VUE_APP_API_BASE_URL=http://your-domain.com/api
NODE_ENV=production

5. Docker Compose编排实战

5.1 完整编排文件示例

yaml复制version: '3.8'

services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    environment:
      - DB_USER=root
      - DB_PASSWORD=123456
    depends_on:
      mysql:
        condition: service_healthy
  
  frontend:
    build: ./frontend 
    ports:
      - "80:80"
    depends_on:
      backend:
        condition: service_started
  
  mysql:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: 123456
      MYSQL_DATABASE: app_db
    volumes:
      - mysql_data:/var/lib/mysql
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
      interval: 5s
      timeout: 10s
      retries: 5

volumes:
  mysql_data:

5.2 网络与存储设计

自定义网络：

yaml复制networks:
  app_net:
    driver: bridge
    ipam:
      config:
        - subnet: 172.20.0.0/16

数据持久化方案：

yaml复制volumes:
  mysql_data:
    driver: local
    driver_opts:
      type: none
      o: bind
      device: /data/mysql

6. 部署流程与运维实践

6.1 标准部署流程

构建镜像：

bash复制docker-compose build --no-cache

启动服务：

bash复制docker-compose up -d

查看日志：

bash复制docker-compose logs -f backend

6.2 生产环境优化建议

镜像瘦身技巧：

使用docker-slim工具自动优化镜像
删除构建阶段的中间文件
选择alpine基础镜像

健康检查配置：

yaml复制healthcheck:
  test: ["CMD-SHELL", "curl -f http://localhost:8080/actuator/health || exit 1"]
  interval: 30s
  timeout: 10s
  retries: 3

7. 常见问题排查指南

7.1 典型问题速查表

现象	可能原因	解决方案
前端无法访问API	CORS配置错误	检查后端CORS配置和Nginx代理
数据库连接失败	网络隔离或凭证错误	验证docker-compose网络配置
静态资源404	Nginx配置路径错误	检查Dockerfile中的COPY路径

7.2 调试技巧

进入容器调试：

bash复制docker exec -it container_name sh

网络诊断：

bash复制docker network inspect app_net

临时变量覆盖：

bash复制docker-compose run -e DB_PASSWORD=newpass backend

8. 进阶部署方案

8.1 Kubernetes迁移准备

生成k8s部署文件：

bash复制docker-compose convert -o k8s/

Ingress配置示例：

yaml复制apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: app-ingress
spec:
  rules:
  - host: your-domain.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: frontend
            port: 
              number: 80
      - path: /api
        pathType: Prefix
        backend:
          service: 
            name: backend
            port:
              number: 8080

8.2 监控方案集成

Prometheus配置：

yaml复制# Spring Boot配置
management:
  endpoints:
    web:
      exposure:
        include: health,info,prometheus
  metrics:
    tags:
      application: ${spring.application.name}

Grafana看板导入：

使用ID 4701（JVM监控）
使用ID 7362（Spring Boot监控）

9. 安全加固措施

9.1 镜像安全扫描

bash复制docker scan frontend
docker scan backend

9.2 最小权限原则实施

非root用户运行：

dockerfile复制FROM openjdk:11-jre-slim
RUN adduser --system --group appuser
USER appuser
COPY --from=builder /app/target/*.jar app.jar

文件系统只读：

yaml复制services:
  backend:
    read_only: true
    tmpfs:
      - /tmp

10. 性能调优实战

10.1 JVM参数优化

dockerfile复制ENTRYPOINT ["java", \
  "-XX:+UseContainerSupport", \
  "-XX:MaxRAMPercentage=75.0", \
  "-XX:+HeapDumpOnOutOfMemoryError", \
  "-jar", "app.jar"]

10.2 Nginx缓存配置

nginx复制location / {
  try_files $uri $uri/ /index.html;
  expires 1y;
  add_header Cache-Control "public";
}

location /api {
  proxy_pass http://backend:8080;
  proxy_set_header Host $host;
}

在实际生产部署中，建议结合APM工具如SkyWalking进行全链路监控。对于高并发场景，可以考虑将前端静态资源托管到CDN，后端服务采用集群部署。每次镜像更新时，建议使用语义化版本标签（如v1.2.3）而非latest，便于版本管理和回滚。