CODEWITHSUNDEEP
reactjsdockernginxwebsocketws
hazartilirot
hazartilirot

Reputation: 355

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

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;
    }
}

Upvotes: 13

Views: 37324

Answers (5)

Yaroslav Perets
Yaroslav Perets

Reputation: 58

For custom webpack(v5) config, adding the following settings to webpack.config.js worked for me

devServer: {
  client: {
    webSocketURL: 'auto://0.0.0.0:0/ws',
  }
}

Nginx configuration part:

location / {
    proxy_pass http://frontend;
    proxy_set_header HOST $host;
    proxy_set_header X-Forwarded-Host $http_host;

    proxy_set_header Upgrade $http_upgrade;
    proxy_http_version 1.1;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 86400;
}

Upvotes: 2

supermodo
supermodo

Reputation: 803

For me, at first adding this line to .env (as @sarcouilleizi94 mentioned) solved the problem

WDS_SOCKET_PORT=0

then (in the same project) unexpectedly it stopped working and I had to change it to:

WDS_SOCKET_PORT=3000

I hope this can help.

Upvotes: 0

Danil
Danil

Reputation: 895

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

Upvotes: 0

Sameep Sehgal
Sameep Sehgal

Reputation: 11

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.

Upvotes: 1

sarcouilleizi94
sarcouilleizi94

Reputation: 265

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

Upvotes: 24

Related Questions