WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed: React, Docker, NGINX

Question

Here's the issue... when I start a React app locally as npm start. I don't have a ws failed connection.

If I start NGINX and React servers within Docker containers I constantly get

WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed:

default.conf

upstream client {
    server client:3000;
}

upstream api {
    server api:5000;
}   

server {
    listen 80;
    
    location / {
        proxy_pass http://client;
    }
    
    location /ws {
        proxy_pass http://client;
        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://api;
    }
}

Answer 1

Add this to .env:

WDS_SOCKET_PORT=0

See this issue for more explanation and information: https://github.com/facebook/create-react-app/issues/11897