1. 为什么选择Docker部署Spring Boot Vue项目在当今的Web开发领域前后端分离架构已经成为主流模式。Spring Boot作为Java生态中最流行的后端框架与Vue这一渐进式JavaScript前端框架的组合被广泛应用于企业级应用开发。而Docker作为容器化技术的代表为这种架构的部署带来了革命性的便利。传统部署方式通常需要在服务器上手动安装JDK、Node.js、Nginx等依赖环境配置过程繁琐且容易出错。我曾经在一个客户项目中因为服务器环境差异导致部署失败花了整整两天时间排查环境问题。而Docker通过容器化技术将应用及其所有依赖打包在一起实现了一次构建到处运行的承诺。2. 项目架构与准备工作2.1 技术栈分析我们的项目采用典型的前后端分离架构后端Spring Boot 2.7.x建议版本前端Vue 3.x Vite比Webpack更快的构建工具数据库MySQL 8.0也可替换为PostgreSQL容器化Docker 20.10 Docker Compose2.2 开发环境准备在开始之前确保你的开发机已安装Docker DesktopWindows/Mac或Docker EngineLinux# 验证Docker安装 docker --version docker-compose --versionJDK 17Spring Boot 2.7推荐版本Node.js 16Vue 3.x要求注意生产环境建议使用Linux服务器资源占用更少性能更好。我曾遇到Windows服务器因内存不足导致容器频繁崩溃的问题。3. Spring Boot后端Docker化3.1 创建Dockerfile在Spring Boot项目根目录创建Dockerfile# 第一阶段构建 FROM maven:3.8.6-eclipse-temurin-17 AS build WORKDIR /app COPY pom.xml . RUN mvn dependency:go-offline COPY src ./src RUN mvn package -DskipTests # 第二阶段运行 FROM eclipse-temurin:17-jre WORKDIR /app COPY --frombuild /app/target/*.jar app.jar EXPOSE 8080 ENTRYPOINT [java, -jar, app.jar]这个多阶段构建Dockerfile有两个关键优化使用dependency:go-offline提前下载依赖避免每次构建都重新下载基础镜像从jdk改为jre减少镜像体积约150MB3.2 配置生产环境参数在application.properties中添加spring.profiles.activeprod server.port8080 # 数据库配置将在Docker Compose中通过环境变量注入3.3 构建并测试镜像docker build -t spring-boot-app . docker run -p 8080:8080 spring-boot-app4. Vue前端Docker化4.1 优化Vue构建配置在vite.config.js中增加生产配置export default defineConfig({ base: /, // 根据实际部署路径调整 build: { outDir: dist, assetsDir: static, chunkSizeWarningLimit: 1600, }, server: { proxy: { /api: { target: http://backend:8080, // 注意这里使用服务名 changeOrigin: true } } } })4.2 创建前端Dockerfile# 构建阶段 FROM node:16-alpine AS build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # 生产阶段 FROM nginx:1.23-alpine COPY --frombuild /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 804.3 配置Nginx创建nginx.confserver { 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; } }5. 使用Docker Compose编排服务5.1 编写docker-compose.ymlversion: 3.8 services: backend: build: context: ./spring-boot-backend dockerfile: Dockerfile container_name: spring-boot-app environment: - SPRING_DATASOURCE_URLjdbc:mysql://mysql:3306/app_db?useSSLfalse - SPRING_DATASOURCE_USERNAMEroot - SPRING_DATASOURCE_PASSWORD123456 ports: - 8080:8080 depends_on: - mysql networks: - app-network frontend: build: context: ./vue-frontend dockerfile: Dockerfile container_name: vue-app ports: - 80:80 depends_on: - backend networks: - app-network mysql: image: mysql:8.0 container_name: mysql environment: - MYSQL_ROOT_PASSWORD123456 - MYSQL_DATABASEapp_db volumes: - mysql-data:/var/lib/mysql networks: - app-network volumes: mysql-data: networks: app-network: driver: bridge5.2 关键配置解析网络配置自定义的app-network让容器可以通过服务名互相访问数据持久化MySQL数据通过volume持久化避免容器重启数据丢失依赖顺序使用depends_on控制启动顺序6. 部署与优化实践6.1 一键部署命令docker-compose up -d --build6.2 生产环境优化建议镜像大小优化使用alpine基础镜像多阶段构建清理构建缓存性能调优# 在docker-compose.yml中添加资源限制 services: backend: deploy: resources: limits: cpus: 2 memory: 1G日志管理docker-compose logs -f backend7. 常见问题排查指南7.1 容器启动失败现象容器立即退出排查步骤查看日志docker logs container_id常见原因端口冲突Address already in use数据库连接失败内存不足特别是Windows/Mac7.2 前端无法访问API现象API请求404解决方案检查Nginx配置中的proxy_pass地址确保后端服务名称与docker-compose中一致跨域问题可在Spring Boot中添加配置Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*); } }; }7.3 数据库连接问题现象Communications link failure解决方法确保MySQL容器已启动检查连接URL中的容器服务名增加连接超时配置spring.datasource.hikari.connection-timeout300008. 进阶部署方案8.1 使用CI/CD自动化流程推荐GitHub Actions配置示例name: Build and Deploy on: push: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - name: Login to Docker Hub uses: docker/login-actionv2 with: username: ${{ secrets.DOCKER_HUB_USERNAME }} password: ${{ secrets.DOCKER_HUB_TOKEN }} - name: Build and push run: | docker-compose -f docker-compose.prod.yml build docker-compose -f docker-compose.prod.yml push8.2 监控与运维健康检查healthcheck: test: [CMD, curl, -f, http://localhost:8080/actuator/health] interval: 30s timeout: 10s retries: 3使用Prometheus监控// Spring Boot中添加依赖 implementation io.micrometer:micrometer-registry-prometheus日志收集services: backend: logging: driver: json-file options: max-size: 10m max-file: 3在实际项目中我通常会先在小规模环境测试所有配置再逐步扩展到生产环境。特别是在网络策略和资源限制方面需要根据实际业务负载进行调整。记住没有放之四海皆准的完美配置最适合你的才是最好的。 Docker部署Spring Boot与Vue项目的完整指南
1. 为什么选择Docker部署Spring Boot Vue项目在当今的Web开发领域前后端分离架构已经成为主流模式。Spring Boot作为Java生态中最流行的后端框架与Vue这一渐进式JavaScript前端框架的组合被广泛应用于企业级应用开发。而Docker作为容器化技术的代表为这种架构的部署带来了革命性的便利。传统部署方式通常需要在服务器上手动安装JDK、Node.js、Nginx等依赖环境配置过程繁琐且容易出错。我曾经在一个客户项目中因为服务器环境差异导致部署失败花了整整两天时间排查环境问题。而Docker通过容器化技术将应用及其所有依赖打包在一起实现了一次构建到处运行的承诺。2. 项目架构与准备工作2.1 技术栈分析我们的项目采用典型的前后端分离架构后端Spring Boot 2.7.x建议版本前端Vue 3.x Vite比Webpack更快的构建工具数据库MySQL 8.0也可替换为PostgreSQL容器化Docker 20.10 Docker Compose2.2 开发环境准备在开始之前确保你的开发机已安装Docker DesktopWindows/Mac或Docker EngineLinux# 验证Docker安装 docker --version docker-compose --versionJDK 17Spring Boot 2.7推荐版本Node.js 16Vue 3.x要求注意生产环境建议使用Linux服务器资源占用更少性能更好。我曾遇到Windows服务器因内存不足导致容器频繁崩溃的问题。3. Spring Boot后端Docker化3.1 创建Dockerfile在Spring Boot项目根目录创建Dockerfile# 第一阶段构建 FROM maven:3.8.6-eclipse-temurin-17 AS build WORKDIR /app COPY pom.xml . RUN mvn dependency:go-offline COPY src ./src RUN mvn package -DskipTests # 第二阶段运行 FROM eclipse-temurin:17-jre WORKDIR /app COPY --frombuild /app/target/*.jar app.jar EXPOSE 8080 ENTRYPOINT [java, -jar, app.jar]这个多阶段构建Dockerfile有两个关键优化使用dependency:go-offline提前下载依赖避免每次构建都重新下载基础镜像从jdk改为jre减少镜像体积约150MB3.2 配置生产环境参数在application.properties中添加spring.profiles.activeprod server.port8080 # 数据库配置将在Docker Compose中通过环境变量注入3.3 构建并测试镜像docker build -t spring-boot-app . docker run -p 8080:8080 spring-boot-app4. Vue前端Docker化4.1 优化Vue构建配置在vite.config.js中增加生产配置export default defineConfig({ base: /, // 根据实际部署路径调整 build: { outDir: dist, assetsDir: static, chunkSizeWarningLimit: 1600, }, server: { proxy: { /api: { target: http://backend:8080, // 注意这里使用服务名 changeOrigin: true } } } })4.2 创建前端Dockerfile# 构建阶段 FROM node:16-alpine AS build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # 生产阶段 FROM nginx:1.23-alpine COPY --frombuild /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 804.3 配置Nginx创建nginx.confserver { 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; } }5. 使用Docker Compose编排服务5.1 编写docker-compose.ymlversion: 3.8 services: backend: build: context: ./spring-boot-backend dockerfile: Dockerfile container_name: spring-boot-app environment: - SPRING_DATASOURCE_URLjdbc:mysql://mysql:3306/app_db?useSSLfalse - SPRING_DATASOURCE_USERNAMEroot - SPRING_DATASOURCE_PASSWORD123456 ports: - 8080:8080 depends_on: - mysql networks: - app-network frontend: build: context: ./vue-frontend dockerfile: Dockerfile container_name: vue-app ports: - 80:80 depends_on: - backend networks: - app-network mysql: image: mysql:8.0 container_name: mysql environment: - MYSQL_ROOT_PASSWORD123456 - MYSQL_DATABASEapp_db volumes: - mysql-data:/var/lib/mysql networks: - app-network volumes: mysql-data: networks: app-network: driver: bridge5.2 关键配置解析网络配置自定义的app-network让容器可以通过服务名互相访问数据持久化MySQL数据通过volume持久化避免容器重启数据丢失依赖顺序使用depends_on控制启动顺序6. 部署与优化实践6.1 一键部署命令docker-compose up -d --build6.2 生产环境优化建议镜像大小优化使用alpine基础镜像多阶段构建清理构建缓存性能调优# 在docker-compose.yml中添加资源限制 services: backend: deploy: resources: limits: cpus: 2 memory: 1G日志管理docker-compose logs -f backend7. 常见问题排查指南7.1 容器启动失败现象容器立即退出排查步骤查看日志docker logs container_id常见原因端口冲突Address already in use数据库连接失败内存不足特别是Windows/Mac7.2 前端无法访问API现象API请求404解决方案检查Nginx配置中的proxy_pass地址确保后端服务名称与docker-compose中一致跨域问题可在Spring Boot中添加配置Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*); } }; }7.3 数据库连接问题现象Communications link failure解决方法确保MySQL容器已启动检查连接URL中的容器服务名增加连接超时配置spring.datasource.hikari.connection-timeout300008. 进阶部署方案8.1 使用CI/CD自动化流程推荐GitHub Actions配置示例name: Build and Deploy on: push: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - name: Login to Docker Hub uses: docker/login-actionv2 with: username: ${{ secrets.DOCKER_HUB_USERNAME }} password: ${{ secrets.DOCKER_HUB_TOKEN }} - name: Build and push run: | docker-compose -f docker-compose.prod.yml build docker-compose -f docker-compose.prod.yml push8.2 监控与运维健康检查healthcheck: test: [CMD, curl, -f, http://localhost:8080/actuator/health] interval: 30s timeout: 10s retries: 3使用Prometheus监控// Spring Boot中添加依赖 implementation io.micrometer:micrometer-registry-prometheus日志收集services: backend: logging: driver: json-file options: max-size: 10m max-file: 3在实际项目中我通常会先在小规模环境测试所有配置再逐步扩展到生产环境。特别是在网络策略和资源限制方面需要根据实际业务负载进行调整。记住没有放之四海皆准的完美配置最适合你的才是最好的。