ESSAY / NOTE

React的nginx配置文件

upstream frontend {
    server client:3000;
}

upstream backend {
    server api:5000;
}

server {
    listen 80;

    location / {
        proxy_pass http://frontend;
    }

    location /ws {
        proxy_pass http://frontend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    location /api {
        rewrite /api/(.*) /$1 break;
        proxy_pass http://backend;
    }
}
I was facing the same issue, but with WDS_SOCKET_PORT=0 it worked for me. No web socket error in the console anymore and hot reload also working. My default.conf currently looks like this: upstream frontend { server client:3000; } upstream backend { server api:5000; } server { listen 80; location / { proxy_pass http://frontend; } location /ws { proxy_pass http://frontend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } location /api { rewrite /api/(.*) /$1 break; proxy_pass http://backend; } } My docker-compose file looks like this: version: '3' services: client: build: dockerfile: Dockerfile.dev context: ./client volumes: - /app/node_modules - ./client:/app environment: # Fixes bug where websocket connection is fixed to default port 3000 - WDS_SOCKET_PORT=0 ... other services On which system are you running the project? I don't have hot reload on windows 10. On macOS everything works with the same config. 原文 https://github.com/facebook/create-react-app/issues/11779