HMR broken when using reverse proxy with SSL #4292

Bug report

Actual Behavior

When the websocket url is generated in client-src/utils/createSocketURL.js, the port from the webpack dev server is always used while the hostname and protocol from the self.location is used. This causes the connection to never succeed.

For example, if the webpack dev server is running on port 3000 and the url I use to access my local development website is https://app.mydomain.com the websocket url that is used is wss://app.mydomain.com:3000/ws

Expected Behavior

If the webpack dev server is running on port 3000 and the url I use to access my local development website is https://app.mydomain.com the websocket url that should be used is wss://app.mydomain.com/ws

How Do We Reproduce?

1. Use Let's Encrypt to issue a SSL certificate for a domain you control.
2. Setup nginx to be a reverse proxy for your desired domain name. The following is a sample section in the nginx conf to set this up. Make sure to replace the path to your certificate and the domain name.

  server {
    listen                443 ssl;
    ssl_certificate       <CERT_DIR>/fullchain.pem;
    ssl_certificate_key   <CERT_DIR>/privkey.pem;
    keepalive_timeout     70;
    server_name           app.mydomain.com;

    location / {
      proxy_pass  http://localhost:3000/;
    }

    location /ws {
      proxy_pass  http://localhost:3000;

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

3. make sure that domain name maps to 127.0.0.1 in your etc/hosts file
4. start nginx
5. start your webpack dev server on port 3000
6. open the website in your browser. look at the console logs and see the messages that wss://app.mydomain.com:3000/ws failed to connect.

Please paste the results of npx webpack-cli info here, and mention other relevant information