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

user_1521866 0
Viewed 7403

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;
    }
}
ws docker reactjs nginx websocket
3 Answers
user_165034080

I faced the same issue. One simple fix is to map the nginx instance to port 3000 on your local machine. Whereever you do post mapping for nginx change it to 3000:80. Now requests made to 'ws://localhost:3000/ws' by the react app will be appropiately routed.

user_192789990

You could run https without docker and http with docker. So you should use wss and ws accordingly. This was my issue.

user_21652800
Related