Websocket error when using a proxy_pass to CRA development server using Nginx and Docker

Question

I am trying to proxy_pass in Nginx to my React dev server at localhost:3000. It currently works but I am seeing an error in my console which I am unsure will cause any issues down the road:

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

Nginx.conf:

upstream backend {
    server backend:8000;
}

upstream frontend {
    server frontend:3000;
}

server {
    listen 80;
    
    location / {
        proxy_pass http://frontend$request_uri;
        proxy_set_header Host $http_host;
    }
    
    location /api/ {
        proxy_pass http://backend;
        proxy_set_header Host $http_host;
    }

    location /admin/ {
        proxy_pass http://backend;
        proxy_set_header Host $http_host;
    }
}

I have tried adding WDS_SOCKET_PORT=0 to the frontend .env file also tried adding:

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";

...as suggested in other SO posts. Neither worked.

What is this error? How can I fix it?

Answer 1

I solved this by adding more in the variables

environment:
  - WDS_SOCKET_PORT=443

Maybe it can help you, but if you haven't proxy between, use WDS_SOCKET_PORT=0 in docker-compose.yml

Answer 2

Try this:

environment:
  - WDS_SOCKET_PORT=443

It works for me