当前位置：首页 > news >正文

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

news 来源：原创 2025/6/13 8:04:23

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

Vue 3 前端项目生成 Docker 镜像

前提条件

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

步骤

创建 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模式回退}
}

创建 .dockerignore 文件
在项目根目录创建 .dockerignore，避免不必要的文件进入镜像：
```
node_modules/
.git
.vscode
dist/
Dockerfile
*.md
docker-compose.yml
```

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

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

测试运行

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

访问 http://localhost:8080 验证

推送到镜像仓库

docker push your-registry/vue-app:1.0.0

Spring Boot 后端项目生成 Docker 镜像

前提条件

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

步骤

创建 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感知容器资源限制

创建 .dockerignore 文件

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

构建后端镜像

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

测试运行

# 简单测试
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

推送到镜像仓库

docker push your-registry/springboot-app:1.0.0

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

给运维提供什么？

镜像地址
- your-registry/vue-app:1.0.0
- your-registry/springboot-app:1.0.0

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

## 前端 (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

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

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

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

推荐提供 docker-compose.yml 示例

version: '3.8'
services:frontend:image: your-registry/vue-app:1.0.0ports:- "80:80"environment:- API_BASE_URL=http://backend:8080/apibackend:image: your-registry/springboot-app:1.0.0ports:- "8080:8080"environment:- SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/appdb- SPRING_DATASOURCE_USERNAME=appuser- SPRING_DATASOURCE_PASSWORD=securepassword- SPRING_REDIS_HOST=redismysql:image: mysql:8.0environment:MYSQL_DATABASE: appdbMYSQL_USER: appuserMYSQL_PASSWORD: securepasswordMYSQL_ROOT_PASSWORD: rootsecretredis:image: redis:6-alpine