docker-compose中react与nginx容器间无法共享命名卷问题

开发者阿泽

2026-9-1

配置存在的核心问题

YAML缩进语法错误
你贴的配置中nginx服务、顶层volumes、顶层networks三个配置项前都多了1个前导空格，和顶格书写的react服务缩进不统一。YAML对缩进敏感度极高，该错误会导致Docker Compose无法正确识别顶层声明的files_built命名卷，两个服务中挂载的files_built实际是各自独立的匿名卷，根本不是同一个共享存储，自然无法同步文件。
构建产物生成时机与挂载逻辑不匹配
如果你是在react.dockerfile的RUN阶段执行npm run build生成/app/build内容，空命名卷首次挂载时虽然会复制镜像内目标路径的文件，但如果React容器的启动命令是开发服务（如npm start）、或者仅配置了npm run build作为启动命令（执行完成后容器直接退出），会出现两种异常：要么容器启动后根本没有生成新的构建产物，要么Nginx容器启动时React容器还没完成build操作，挂载到的是空卷。如果你是手动进入React容器后才执行build命令，也需要确认操作时卷已经完成挂载，产物确实写入了挂载点而非镜像残留目录。
命名卷存储路径认知错误
Docker命名卷不会存放在项目目录下，默认存储路径是/var/lib/docker/volumes/<你的compose项目名>_files_built/_data，需要root权限才能访问，普通用户找不到对应目录属于正常情况，不代表卷未创建。
Nginx路径配置误区
你将卷挂载到Nginx容器的/app/build路径，但Nginx默认静态资源根目录是/usr/share/nginx/html，就算挂载成功，如果不修改Nginx配置将root指向/app/build，Nginx本身也无法读取构建产物。

修正方案

统一所有配置的缩进，顶层配置项（服务、volumes、networks）全部顶格书写，子项统一用2/4个空格缩进，修正后的核心配置参考：

react:
  stdin_open: true
  build:
    dockerfile: ./react.dockerfile
    context: ../frontend
  volumes:
    - /app/node_modules
    - files_built:/app/build
  networks:
    - default
  # 配置启动命令，确保容器启动时自动执行build，产物写入挂载点后保持容器运行
  command: sh -c "npm run build && tail -f /dev/null"

nginx:
  stdin_open: true
  build:
    dockerfile: ./nginx.dockerfile
    context: ../frontend
  volumes:
    - /app/node_modules
    - ../frontend/nginx:/config
    - files_built:/app/build
  networks:
    - default
  environment:
    - PUID=1000
    - PGID=1000
    - TZ=Europe/London
    - URL=myurl.com
    - VALIDATION=http
    - STAGING=true #optional
  ports:
    - 443:443
    - 80:80 #optional
  depends_on:
    - react

volumes:
  public:
  db-data:
  files_built:

networks:
  default:

先执行docker compose down -v清理所有旧的无效匿名卷，再重新执行docker compose up -d启动服务。
修改Nginx配置文件，将静态资源根目录指向/app/build，确保服务能正确读取React构建产物。
验证时可分别进入两个容器，查看/app/build目录下的文件列表确认共享是否生效。

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