Vue 3 前端和 Spring Boot 后端生成 Docker 镜像的标准做法

Vue 3 前端和 Spring Boot 后端生成 Docker 镜像的标准做法：

---

Vue 3 前端项目生成 Docker 镜像

前提条件

1. Vue 项目可以通过 npm run build 生成静态文件（通常在 dist 目录）。
2. 项目根目录下有 package.json 文件。

步骤

1. 创建 Dockerfile
   在 Vue 项目根目录创建 Dockerfile（无扩展名）：

   # ========== 第一阶段：构建阶段 ==========
   FROM node:18 AS builder
   
   # 设置工作目录
   WORKDIR /app
   
   # 先复制依赖文件（利用Docker缓存层加速构建）
   COPY package*.json ./
   
   # 安装依赖
   RUN npm install
   
   # 复制项目源代码
   COPY . .
   
   # 构建生产版本（生成 dist/ 目录）
   RUN npm run build
   
   # ========== 第二阶段：运行阶段 ==========
   FROM nginx:stable-alpine
   
   # 从构建阶段复制静态文件到Nginx服务器目录
   COPY --from=builder /app/dist /usr/share/nginx/html
   
   # 暴露80端口（Nginx默认端口）
   EXPOSE 80
   
   # Nginx基础镜像已有默认启动命令，无需额外指定
   

   优化点：如果你的项目路由使用 history 模式（而非 hash 模式），需自定义 Nginx 配置处理路由回退：

   # 创建自定义nginx配置
   COPY nginx.conf /etc/nginx/conf.d/default.conf
   

   nginx.conf 示例：

   server {
       listen 80;
       location / {
           root /usr/share/nginx/html;
           index index.html index.htm;
           try_files $uri $uri/ /index.html; # 处理history模式回退
       }
   }
   

2. 创建 .dockerignore 文件
   在项目根目录创建 .dockerignore，避免不必要的文件进入镜像：

   node_modules/
   .git
   .vscode
   dist/
   Dockerfile
   *.md
   docker-compose.yml
   

3. 构建前端镜像
   在项目根目录执行：

   docker build -t your-registry/vue-app:1.0.0 .
   

4. 测试运行

   docker run -d -p 8080:80 your-registry/vue-app:1.0.0
   

   访问 http://localhost:8080 验证

5. 推送到镜像仓库

   docker push your-registry/vue-app:1.0.0
   

---

Spring Boot 后端项目生成 Docker 镜像

前提条件

1. 项目可通过 mvn clean package 或 Gradle 构建生成可执行 JAR（通常位于 target/*.jar）。
2. 使用 JDK 17+（推荐Spring Boot 3+的版本）。

步骤

1. 创建 Dockerfile
   在 Spring Boot 项目根目录（与 pom.xml 同级）创建 Dockerfile：

   # ========== 第一阶段：构建阶段 ==========
   FROM maven:3.8.7-eclipse-temurin-17 AS builder
   
   # 设置工作目录
   WORKDIR /app
   
   # 先复制POM文件（利用Docker缓存层加速依赖下载）
   COPY pom.xml .
   
   # 下载依赖（此步骤会缓存，除非pom.xml改变）
   RUN mvn dependency:go-offline
   
   # 复制源代码
   COPY src ./src
   
   # 打包应用（跳过测试）
   RUN mvn package -DskipTests
   
   # ========== 第二阶段：运行阶段 ==========
   FROM eclipse-temurin:17-jre-alpine
   
   # 设置工作目录
   WORKDIR /app
   
   # 从构建阶段复制构建好的JAR文件
   COPY --from=builder /app/target/*.jar ./app.jar
   
   # 设置JVM参数（根据需求调整）
   ENV JAVA_OPTS="-XX:+UseContainerSupport -XX:MaxRAMPercentage=75"
   
   # 暴露应用端口（与application.properties中server.port一致）
   EXPOSE 8080
   
   # 启动应用
   ENTRYPOINT ["sh", "-c", "java ${JAVA_OPTS} -jar app.jar"]
   

   重要优化：

   • 使用 eclipse-temurin 官方镜像（OpenJDK的厂商中立版本）
   • 使用 -jre-alpine 后缀保持镜像最小化
   • JAVA_OPTS 包含 -XX:+UseContainerSupport 让JVM感知容器资源限制

2. 创建 .dockerignore 文件

   .git
   .mvn
   target/
   *.iml
   *.log
   .project
   .classpath
   .settings/
   

3. 构建后端镜像

   docker build -t your-registry/springboot-app:1.0.0 .
   

4. 测试运行

   # 简单测试
   docker run -d -p 8080:8080 your-registry/springboot-app:1.0.0
   
   # 带环境变量测试（如数据库连接）
   docker run -d -p 8080:8080 \
     -e SPRING_DATASOURCE_URL=jdbc:mysql://db-host:3306/dbname \
     -e SPRING_DATASOURCE_USERNAME=root \
     -e SPRING_DATASOURCE_PASSWORD=secret \
     your-registry/springboot-app:1.0.0
   

5. 推送到镜像仓库

   docker push your-registry/springboot-app:1.0.0
   

---

关键注意事项：生产环境部署

给运维提供什么？

1. 镜像地址

   • your-registry/vue-app:1.0.0
   • your-registry/springboot-app:1.0.0

2. 必要配置（通过环境变量或配置文件）：

   ## 前端 (Vue) 通常无需特殊配置，除非：
   - 环境特定的API基础URL
   - 认证配置
   
   ## 后端 (Spring Boot) 关键配置：
   - 数据库连接：SPRING_DATASOURCE_URL, SPRING_DATASOURCE_USERNAME, SPRING_DATASOURCE_PASSWORD
   - Redis配置：SPRING_REDIS_HOST, SPRING_REDIS_PORT
   - JWT密钥：JWT_SECRET_KEY
   - 文件存储路径：FILE_UPLOAD_DIR
   

3. 健康检查端点（对运维重要）：

   # 在application.properties中添加
   management.endpoints.web.exposure.include=health,info
   management.endpoint.health.show-details=always
   

   运维可通过 http://your-app:8080/actuator/health 监控服务状态

4. 推荐提供 docker-compose.yml 示例

   version: '3.8'
   services:
     frontend:
       image: your-registry/vue-app:1.0.0
       ports:
         - "80:80"
       environment:
         - API_BASE_URL=http://backend:8080/api
       
     backend:
       image: your-registry/springboot-app:1.0.0
       ports:
         - "8080:8080"
       environment:
         - SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/appdb
         - SPRING_DATASOURCE_USERNAME=appuser
         - SPRING_DATASOURCE_PASSWORD=securepassword
         - SPRING_REDIS_HOST=redis
       
     mysql:
       image: mysql:8.0
       environment:
         MYSQL_DATABASE: appdb
         MYSQL_USER: appuser
         MYSQL_PASSWORD: securepassword
         MYSQL_ROOT_PASSWORD: rootsecret
       
     redis:
       image: redis:6-alpine
   

---

总结流程

本地开发调试完成

创建Dockerfile

创建.dockerignore

构建镜像 docker build

测试运行 docker run

推送镜像 docker push

告知运维镜像地址+配置

运维在生产环境部署

通过以上步骤，你就能将 Vue 3 前端和 Spring Boot 后端打包成符合生产环境要求的 Docker 镜像。关键点是：

1. 使用多阶段构建减小镜像体积
2. 使用 Alpine 基础镜像优化大小
3. 配置合理的 JVM 参数（尤其内存设置）
4. 通过 环境变量 注入配置
5. 提供清晰的 健康检查端点

这样打包好的镜像，就能交给运维团队部署到生产环境的 Kubernetes 集群或 Docker Swarm 集群中了。