从零到部署：将Spring Boot + Vue项目打包为Docker镜像并实现动态配置

程序员阿谷

于 2025-03-28 16:11:11 发布

阅读量656

点赞数 11

文章标签： spring boot vue.js docker

本文链接：https://blog.youkuaiyun.com/u013488276/article/details/146604123

版权

从零到部署：将Spring Boot + Vue项目打包为Docker镜像并实现动态配置

摘要
本文将手把手教你如何将Spring Boot后端与Vue前端整合为一个Docker镜像，实现一键化部署、动态参数配置，并支持后续迭代更新。无论你是个人开发者还是团队项目，这份指南都能助你快速构建生产级容器化应用。

一、准备工作

1. 项目结构

假设你的项目目录如下（需提前构建）：

my-app/
├── backend/              # Spring Boot项目目录
│   ├── src/
│   └── pom.xml
└── frontend/             # Vue项目目录
    ├── dist/             （构建后生成）
    ├── src/
    └── package.json

2. 工具要求

JDK 11+
Node.js 14+
Maven 3.8+
Docker 20.10+

二、整合前后端

步骤1：构建Vue前端

cd frontend
npm install
npm run build        # 生成dist/目录

步骤2：将静态资源嵌入Spring Boot

将frontend/dist下的所有文件复制到backend/src/main/resources/static

（可选）处理前端路由：
创建WebMvcConfig.java：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 匹配所有非静态资源路径
        registry.addViewController("/{path:\\w+}")
                .setViewName("forward:/index.html");
        registry.addViewController("/{path:\\w+}/{subpath:.*}")
                .setViewName("forward:/index.html");
    }
}

三、配置后端参数动态化

方案1：环境变量注入

在application.properties中使用占位符：

# 数据库配置示例
spring.datasource.url=${DB_URL:jdbc:mysql://localhost:3306/defaultdb}
spring.datasource.username=${DB_USER:root}
spring.datasource.password=${DB_PWD:123456}

# 自定义参数示例
app.notification.email=${NOTIFY_EMAIL:agu@example.com}

方案2：外部配置文件

创建config/application.properties：

# 优先级高于jar包内部配置
app.max.upload.size=50MB
app.debug.mode=false

四、编写Dockerfile（多阶段构建）

# Stage 1: 构建前端
FROM node:14 as frontend
WORKDIR /app
COPY frontend/package*.json ./
RUN npm install
COPY frontend .
RUN npm run build

# Stage 2: 构建后端
FROM maven:3.8.6-openjdk-11 as backend
WORKDIR /app
COPY backend .
COPY --from=frontend /app/dist /app/src/main/resources/static
RUN mvn clean package -DskipTests

# Stage 3: 运行环境
FROM openjdk:11-jre-slim
WORKDIR /app
COPY --from=backend /app/target/*.jar app.jar

# 配置参数入口
ENV SPRING_CONFIG_LOCATION=optional:file:/config/
VOLUME /config
EXPOSE 8080

ENTRYPOINT ["java", "-jar", "app.jar"]

五、构建与运行

1. 构建镜像

docker build -t my-app:v1 .

2. 运行容器

方式一：纯环境变量

docker run -d -p 8080:8080 \
  -e DB_URL=jdbc:mysql://host.docker.internal:3306/proddb \
  -e DB_USER=prod_user \
  -e DB_PWD=S3cr3t! \
  my-app:v1

方式二：挂载配置文件

# 本地创建配置文件
mkdir -p ~/app-config
echo "app.max.upload.size=100MB" > ~/app-config/application.properties

docker run -d -p 8080:8080 \
  -v ~/app-config:/config \
  my-app:v1

六、迭代更新流程

1. 开发阶段

# 前端热更新
cd frontend && npm run serve

# 后端热加载（需IDE支持）
mvn spring-boot:run

2. 生产更新

修改代码后重新构建：
```
docker build -t my-app:v2 .
```

滚动更新（零停机）：

# 启动新版本
docker run -d --name my-app-v2 -p 8081:8080 my-app:v2

# 切换流量后下线旧版本
docker stop my-app-v1 && docker rm my-app-v1

七、高级技巧

1. 使用Docker Compose

创建docker-compose.yml：

version: '3.8'
services:
  app:
    image: my-app:v1
    ports:
      - "8080:8080"
    volumes:
      - ./config:/config
    environment:
      - TZ=Asia/Shanghai
    deploy:
      resources:
        limits:
          memory: 1GB

2. 配置健康检查

在Dockerfile中添加：

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

3. 使用CI/CD（GitHub Actions示例）

name: Build and Push
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Build Docker image
      run: |
        docker build -t my-app:${GITHUB_SHA} .
    - name: Push to Registry
      uses: docker/build-push-action@v2
      with:
        tags: my-registry/my-app:latest
        push: true

八、常见问题解答

Q1：如何查看运行时配置？
访问Spring Actuator端点：

curl http://localhost:8080/actuator/env

Q2：前端修改后需要重新构建整个镜像吗？
是的，但可以通过优化构建层加快速度：

# 在frontend阶段添加缓存优化
RUN npm install --prefer-offline --frozen-lockfile

Q3：如何限制容器资源？
运行时添加参数：

docker run -d --memory=1g --cpus=2 my-app:v1

九、总结

通过本文你已掌握：

前后端项目整合技巧 ✅
Docker多阶段构建优化 ✅
动态配置管理方案 ✅
生产级部署最佳实践 ✅

现在立即动手，把你的项目容器化吧！如果遇到问题，欢迎在评论区留言交流。