Webpack devserver with Nginx and Docker: polling info on the wrong address

I had a similar problem with the requests similar to

http://localhost:3000/sockjs-node/info?t=1570780621084

and the same error

(net::ERR_CONNECTION_REFUSED)

I have a react application on frontend and a nodejs application on backend.Each in a separate docker container.I use webpack-dev-server to run react application, that uses sockjs library that generates this sockjs-node request for its development purposes.

So to get it to work correctly I wrote the next options in the devServer section

host: '0.0.0.0', // you can change this ip with your ipport: 4001, // ssl defult port numberpublic: 'https://localhost:9001',publicPath: '/',

There are the ports in my docker-compose for the react application (one for HTTP and second for HTTPS)

ports:  - 9000:4000  - 9001:4001

So the 'public' option set to using port 9001 that accessible on the host machine.And I use it when want to load my application in a browser https://localhost:9001.Also, this URL used to load main.js script by the application.

But the 'port' option I have set to 4001. This port used by sockjs library to generate the request that we have problems with.

So be sure that you have opened an SSL port in a docker container with application that uses webpack-dev-server.And that you set the right values for 'public' and 'port' options in the devServer section of your webpack config file.

Assuming dev-server is running on port 3000 and nginx on port 8080, this is what has worked for me (see web-devserver public option):

Nginx default.conf

upstream reactclient {    server react_client:3000 fail_timeout=20s max_fails=100;}server {    listen 80;    location / {        proxy_pass http://reactclient;    }           location /sockjs-node/ {        proxy_set_header X-Real-IP  $remote_addr;        proxy_set_header X-Forwarded-For $remote_addr;        proxy_set_header Host $host;        proxy_pass http://reactclient;        proxy_redirect off;        proxy_http_version 1.1;        proxy_set_header Upgrade $http_upgrade;        proxy_set_header Connection "upgrade";      }}

Webpack

// [...]devServer: {        host: '0.0.0.0',        port: 3000,        public: `localhost:8080`,        historyApiFallback: false,        hot: true,        inline: true,        watchOptions: {            aggregateTimeout: 300,            poll: 1000,            ignored: /node_modules/,        },        disableHostCheck: true,    },// [...]