docker-compose多阶段构建拆分时能否使用COPY --from指令

不能直接在docker-compose.yaml中使用COPY --from指令，该指令是Dockerfile专属的构建阶段指令，仅能在镜像构建流程的Dockerfile上下文里生效，docker-compose作为编排工具，本身不支持直接在配置文件中实现镜像层内容的拷贝逻辑。

你可以根据使用场景选择以下两种实现方案：

方案1：通过Dockerfile关联多镜像构建（推荐生产环境使用） #

你可以将每个应用的构建阶段封装为独立的构建镜像，再在Nginx的Dockerfile中通过COPY --from引用这些构建镜像的产物，最终打包出包含所有前端应用的Nginx镜像。

目录结构参考 #

.
├── frontend-project1 # 第一个前端应用目录
│   ├── Dockerfile.builder
│   └── 项目源码
├── frontend-project2 # 第二个前端应用目录
│   ├── Dockerfile.builder
│   └── 项目源码
├── nginx
│   ├── Dockerfile
│   └── nginx.conf
└── docker-compose.yaml

配置示例 #

1. 前端应用构建Dockerfile（以frontend-project1/Dockerfile.builder为例）

FROM node:14-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

2. Nginx镜像Dockerfile

FROM nginx:stable-alpine
# 拷贝两个前端应用的构建产物到Nginx静态资源目录
COPY --from=frontend1-builder /app/build /usr/share/nginx/html/project1
COPY --from=frontend2-builder /app/build /usr/share/nginx/html/project2
# 拷贝自定义Nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

3. docker-compose.yaml配置

version: '3.8'
services:
  frontend1-builder:
    build:
      context: ./frontend-project1
      dockerfile: Dockerfile.builder
    image: frontend1-builder
    command: ["echo", "frontend1 构建完成"] # 构建完成后直接退出，无需运行服务

  frontend2-builder:
    build:
      context: ./frontend-project2
      dockerfile: Dockerfile.builder
    image: frontend2-builder
    command: ["echo", "frontend2 构建完成"]

  frontend-nginx:
    build: ./nginx
    ports:
      - "80:80"
    depends_on:
      - frontend1-builder
      - frontend2-builder

该方案的优势是所有产物直接打包进Nginx镜像，镜像可直接分发部署，无外部依赖，适合生产环境使用。

方案2：通过共享卷传递产物（推荐开发环境使用） #

如果是开发场景需要频繁修改代码、实时预览效果，可以通过共享卷实现产物传递：

version: '3.8'
services:
  frontend1-builder:
    build:
      context: ./frontend-project1
      dockerfile: Dockerfile.builder
    volumes:
      - frontend1-dist:/app/build
    # 开发环境可以开启构建监听，代码变更自动更新产物
    command: ["npm", "run", "build", "--", "--watch"]

  frontend-nginx:
    image: nginx:stable-alpine
    volumes:
      - frontend1-dist:/usr/share/nginx/html/project1
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
    ports:
      - "80:80"

volumes:
  frontend1-dist:

该方案无需每次修改代码都重新构建Nginx镜像，构建产物更新后自动生效，适合开发调试使用。

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