如何在Docker中通过Nginx部署带热重载的React应用

我正在配置本地开发用的React应用，想搭配Nginx使用，但目前只能部署build文件夹，导致热重载无法捕获该文件夹外的代码变更；尝试修改Nginx的root目录时还会出现500错误。希望实现React通过Nginx完成热重载，请问该怎么操作？另外是否可以用两个独立容器满足本地开发需求？

相关配置文件 #

Frontend Dockerfile #

FROM node:14

WORKDIR /var/www/static

ENV PATH /var/www/static/node_modules/.bin:$PATH

COPY ./package.json ./package-lock.json /var/www/static/

RUN npm install

COPY . /var/www/static/

Nginx Dockerfile #

FROM nginx:1.11

WORKDIR /var/www/static

ADD ./frontend/build /var/www/static

Nginx.conf #

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;
    gzip on;
    gzip_types text/css image/png image/jpg application/json application/javascript application/xml application/octet-stream;
    sendfile on;
    tcp_nopush on;
    keepalive_timeout 65;

    server {
        listen 80;
        server_name localhost:7000;
        client_max_body_size 512m;
        root /var/www/static/build;

        location / {
#            try_files $uri $uri/ =404;
            try_files $uri /index.html;
#            $uri/index.html @backend;
        }

        location ~ ^/private-files/(.*)$ {
            internal;
            resolver 127.0.0.11 ipv6=off;
            set $storage http://storage-proxy;
            proxy_pass $storage/$1;
        }

        location /local-private-files/ {
            internal;
            alias /;
        }

        location /api/v4 {
            # rewrite ^/api/v4/(.*)$ /$1 break;
            proxy_pass http://backend_drf;
            proxy_set_header Host $http_host;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_read_timeout 3600;
        }

        location /redirect {
            rewrite ^/(.*)$ http://$arg_go? permanent;
        }
    }

    upstream backend_drf {
        server drf:8081;
    }

}

Docker-compose中的Nginx与Frontend配置 #

nginx:
    build:
      context: .
      dockerfile: backend/Dockerfile.nginx
    image: hub.eis24.me/nginx:1.11
    env_file:
      - ./backend/.env
    volumes:
      - "./deploy/nginx.conf:/etc/nginx/nginx.conf"
      - "./frontend:/var/www/static:rw"
    ports:
      - "0.0.0.0:7000:80"
    links:
      - drf
    depends_on:
      - drf
      - frontend
  frontend:
    image: hub.eis24.me/frontend:latest
    build: ./frontend
    volumes:
      - "./frontend:/var/www/static:rw"
#    ports:
#      - "7000:3000"
#      - "7001:6006"
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: npm start

错误情况 #

修改root目录时Nginx报500的截图

解决方案 #

1. 双容器实现热重载的可行性 #

完全可以用两个独立容器（React开发容器 + Nginx反向代理容器）满足需求。React开发容器运行npm start启动自带的开发服务器（默认端口3000），Nginx作为反向代理统一转发前端请求到React服务器，同时处理API路由到后端，既保留热重载，又能通过Nginx管理所有请求。

2. 调整Nginx配置 #

修改nginx.conf，把前端请求代理到React容器的3000端口，同时保留原有API等路由配置：

server {
    listen 80;
    server_name localhost:7000;
    client_max_body_size 512m;

    # 前端请求转发到React开发服务器，支持热重载的WebSocket
    location / {
        proxy_pass http://frontend:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    # 原有API路由保持不变
    location /api/v4 {
        proxy_pass http://backend_drf;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_read_timeout 3600;
    }

    # 其他原有location配置保留
    location ~ ^/private-files/(.*)$ {
        internal;
        resolver 127.0.0.11 ipv6=off;
        set $storage http://storage-proxy;
        proxy_pass $storage/$1;
    }

    location /local-private-files/ {
        internal;
        alias /;
    }

    location /redirect {
        rewrite ^/(.*)$ http://$arg_go? permanent;
    }
}

3. 调整Docker-compose配置 #

确保React容器的端口配置正确，保留卷挂载实现代码热更新：

frontend:
    image: hub.eis24.me/frontend:latest
    build: ./frontend
    volumes:
      - "./frontend:/var/www/static:rw"
    ports:
      - "3000:3000" # 可选，方便直接访问开发服务器测试
    environment:
      - CHOKIDAR_USEPOLLING=true
      - WDS_SOCKET_PORT=0 # 解决热重载WebSocket端口不匹配问题
    command: npm start

4. 之前500错误的原因 #

修改Nginx root到/var/www/static出现500，大概率是Nginx用户没有该目录的读取权限，或者目录下缺少默认索引文件。改用反向代理方式后，无需修改root目录，直接避免了这个问题。

5. 启动验证 #

运行docker-compose up --build，访问http://localhost:7000，修改React代码后页面会自动热重载，API请求也能通过Nginx正常转发到后端。

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