Webpack Behind Nginx In Subdirectory Websocket not Connecting

116 Views Asked by At

I am unable to get the Webpack Dev Server Websocket to connect when running behind Nginx AND in a subdirectory. For instance, webpack dev server running at http://localhost:8000 but trying to get to it at https://mydom.com/docs

I feel like I've tried every combination of settings possible.

Nginx: 1.22

Webpack: 5.89.0

Here is my Nginx config for the /docs route:

proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';

And the relevant part of my Webpack config:

devServer: {
  client: {
    webSocketURL: "auto://0.0.0.0:0/docs/ws",
  },
  host: "0.0.0.0",
  port: 8000,
},

The page comes up just fine - but auto reload doesn't work and Firefox outputs this in the console:

Firefox can’t establish a connection to the server at wss://mydom.com/docs/ws

Please help.

0

There are 0 best solutions below