Docker构建React站点后未复制文件到指定目录的问题求助

核心问题分析 #

你的配置存在关键误解：Docker镜像构建阶段的RUN指令无法访问容器运行时挂载的宿主机卷。Dockerfile里的RUN cp -r build/* /var/www/mysite.com/是在镜像构建时执行的，此时宿主机的/var/www/mysite.com还未挂载到容器内，复制的内容仅存在于镜像内部，不会同步到宿主机目录。

具体修复方案 #

1. 修改Dockerfile，移除构建阶段的复制步骤 #

保留构建产物在容器内的/app/build目录，将复制操作推迟到容器运行时执行：

FROM node:18-alpine

# Install Git
RUN apk add --no-cache git

# Accept build args
ARG GH_TOKEN

# Clone private repo using token
RUN git clone --branch public https://myacc:${GH_TOKEN}@github.com/myacc/mysite.com.git app

WORKDIR /app

# Install dependencies and build the React app
RUN npm install && npm run build

# 移除构建阶段复制文件的指令，仅保留构建产物在/app/build

2. 调整docker-compose.yaml，让builder容器在运行时复制文件 #

给builder服务添加command指令，在容器启动时将构建产物复制到挂载的宿主机卷：

version: '3.8'

services:
  builder:
    build:
      context: ./buildsite
      args:
        GH_TOKEN: ${GH_TOKEN}
    environment:
      - GH_TOKEN=${GH_TOKEN}
    container_name: react-builder
    restart: "no"
    volumes:
      - /var/www/mysite.com:/var/www/mysite.com
    # 容器启动时执行复制操作，完成后退出
    command: sh -c "cp -r /app/build/* /var/www/mysite.com/ && echo 'Build files copied successfully' && ls -l /var/www/mysite.com"

  web:
    image: nginx:latest
    container_name: mysite-site
    ports:
      - "4040:80"
    volumes:
      - /var/www/mysite.com:/usr/share/nginx/html:ro
      - ./nginx/mysite.com.conf:/etc/nginx/conf.d/default.conf:ro
    mem_limit: 512m
    depends_on:
      - builder
    command: /bin/sh -c "while [ ! -f /usr/share/nginx/html/index.html ]; do sleep 2; done; nginx -g 'daemon off;'"
    networks:
      - webnet

networks:
  webnet:
    driver: bridge

注：修改了web容器的等待路径，直接检查Nginx挂载的目录/usr/share/nginx/html/index.html，逻辑更准确。

3. 确保宿主机目录权限正确 #

Docker容器默认使用非root用户（node镜像UID为1000），需要确保宿主机目录可写：

sudo mkdir -p /var/www/mysite.com
sudo chown -R 1000:1000 /var/www/mysite.com

验证步骤 #

1. 执行构建命令：

   docker-compose up --build
   

2. 查看react-builder容器的日志，确认输出包含Build files copied successfully以及构建文件列表。
3. 检查宿主机/var/www/mysite.com目录，确认存在index.html等静态文件。
4. 访问4040端口或对应的域名，Nginx应正常返回页面，不再出现502错误。

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