Docker Compose多阶段构建：Vue项目开发生产环境配置难题

核心方案 #

通过Docker多阶段构建拆分开发/生产流程，用同一个Dockerfile适配两种环境：开发阶段直接启动Vue dev server并挂载本地代码卷实现热更新；生产阶段自动完成静态文件构建+Nginx部署，无需额外容器。同时通过Docker Compose的环境变量控制构建目标和卷挂载，兼顾开发效率与生产部署的简洁性。

具体实现 #

1. Vue项目Dockerfile

# 基础依赖阶段：复用安装结果，减少重复构建时间
FROM node:18-alpine AS base
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# 开发阶段：仅启动dev server，适配卷挂载
FROM base AS development
COPY . .
# 用CMD启动，确保容器启动后监听代码变化（卷挂载后本地修改会同步）
CMD ["yarn", "serve"]

# 生产构建阶段：编译静态文件
FROM base AS build
COPY . .
RUN yarn build

# 生产部署阶段：Nginx托管静态文件
FROM nginx:alpine AS production
COPY --from=build /app/dist /usr/share/nginx/html
# 可自定义Nginx配置，比如添加反向代理到后端
# COPY ./nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. Docker Compose配置文件

version: '3.8'
services:
  vue-app:
    build:
      context: ./vue # 替换为你的Vue项目路径
      target: ${VUE_TARGET:-development} # 默认启动开发阶段，生产时切换为production
    ports:
      - "8080:${VUE_PORT:-8080}" # 开发用8080，生产用80
    volumes:
      # 开发环境挂载本地代码，生产环境不挂载（空值）
      - ${VUE_VOLUME:-./vue:/app}
    environment:
      - NODE_ENV=${NODE_ENV:-development}
    depends_on:
      - nest-api
      - postgres-db

  nest-api:
    build: ./nest # 替换为你的Nest项目路径
    ports:
      - "3000:3000"
    volumes:
      - ./nest:/app # 后端同样挂载卷实现热更新
    environment:
      - DATABASE_URL=postgres://user:password@postgres-db:5432/your_db_name
    depends_on:
      - postgres-db

  postgres-db:
    image: postgres:15-alpine
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=password
      - POSTGRES_DB=your_db_name

volumes:
  postgres-data:

关键细节说明 #

• 开发环境：直接启动development阶段容器，挂载本地代码卷后，Vue dev server会自动监听文件变化实现热重载，控制台实时输出日志，无需等待Nginx启动。
• 生产环境：通过环境变量切换构建目标和卷挂载，命令示例：

  VUE_TARGET=production VUE_VOLUME= NODE_ENV=production docker-compose up -d
  

  此时Docker会自动执行build+production阶段，生成包含Nginx和静态文件的镜像，无需额外的Nginx容器。
• 依赖复用：base阶段的依赖安装结果会被开发和构建阶段复用，减少重复构建时间。

为什么比Profiles方案更优 #

• 无需维护两套容器配置（Vue+Nginx），生产环境直接通过多阶段构建生成最终镜像，架构更简洁。
• 开发环境日志直接由Vue dev server输出，无需依赖Nginx，启动后立即看到调试信息。
• 统一的Dockerfile管理开发和生产流程，降低维护成本。

内容的提问来源于stack exchange，提问作者pwnd