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;
}
}
4
Answers
Add this to .env:
See this issue for more explanation and information: https://github.com/facebook/create-react-app/issues/11897
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.
You could run https without docker and http with docker.
So you should use wss and ws accordingly.
This was my issue.
For me, at first adding this line to
.env
(as @sarcouilleizi94 mentioned) solved the problemthen (in the same project) unexpectedly it stopped working and I had to change it to:
I hope this can help.