如何通过Docker Compose将React应用build目录共享给Nginx容器

核心问题点 #

• 卷挂载逻辑错误：你当前配置中admin服务声明的/app/admin/build是独立匿名卷，web服务挂载的是宿主机本地的/app/admin/build路径，二者没有关联，所以Nginx容器内的目录为空。
• Nginx配置错误：报错日志显示Nginx尝试读取的是容器内/app/admin/build/路径，但你把构建产物挂载到了Nginx容器的/var/www/admin/build路径，路径不匹配导致找不到文件，触发403禁止访问错误。
• 可能存在权限问题：即使路径匹配，如果Nginx运行用户对静态文件目录没有读权限，也会触发403错误。

具体修复步骤 #

1. 修改docker-compose.yaml配置共享卷 #

使用全局命名卷关联两个服务的挂载路径，确保二者读写的是同一个存储空间：

version: '3'
# 定义全局共享的命名卷
volumes:
  admin-build:

services:
  admin:
    build:
      dockerfile: Dockerfile
      context: ./admin
    volumes:
      # 将admin容器内的构建产物目录挂载到命名卷
      - admin-build:/app/admin/build
    # 可选：如果admin服务仅用于构建产物，配置启动后等待文件生成再退出，避免卷还没写入就终止
    command: >
      sh -c "npm run build && while [ ! -f /app/admin/build/index.html ]; do sleep 1; done"

  web:
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./nginx
    ports:
      - '80:3000'
    volumes:
      # 将同一个命名卷挂载到Nginx的静态文件目录
      - admin-build:/var/www/admin/build
    # 可选：控制启动顺序，确保admin先启动
    depends_on:
      - admin

2. 修正Nginx配置 #

修改Nginx的配置文件，确保root路径和挂载路径一致，同时配置索引文件和React路由适配规则：

server {
    listen 3000;
    server_name _;
    # 路径要和挂载到Nginx容器内的路径完全一致
    root /var/www/admin/build;
    # 指定默认索引文件
    index index.html;

    location / {
        # 适配React BrowserRouter路由，刷新不404
        try_files $uri $uri/ /index.html;
    }
}

3. 修复目录权限 #

在Nginx的Dockerfile中添加权限配置，确保Nginx运行用户对静态目录有读权限：

# 基于官方Nginx镜像的示例
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 提前创建目录并赋权
RUN mkdir -p /var/www/admin/build && chown -R nginx:nginx /var/www/admin/build

验证方法 #

服务启动完成后，依次执行以下命令确认配置生效：

1. 查看admin容器内的构建产物：docker compose exec admin ls /app/admin/build，确认存在index.html等文件
2. 查看Nginx容器内的挂载文件：docker compose exec web ls /var/www/admin/build，确认文件和admin容器内一致

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