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.