Webpack-serve hmr not working with nginx proxy for websocket

715 Views Asked by At

I've setup nginx as a proxy for my local dev environment. I'm using webpack-serve for local dev as well, and a local ssl cert i've setup. I have the site working but I'm having issues the HMR.

I see this error when the web sockets try to connect

WebSocket connection to 'wss://local.way.com:7879/' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR

I can't tell if it's an issue with the certificate or the nginx setup.

server {
  listen      7879 ssl;
  server_name local.way.com;

  ssl_certificate      /usr/local/way-fe/config/proxy/ssl/certificate.crt;
  ssl_certificate_key  /usr/local/way-fe/config/proxy/ssl/certificate.key;
  ssl_session_timeout  5m;
  ssl_protocols TLSv1.2 TLSv1.1 TLSv1;
  ssl_ciphers ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:DHE-RSA-AES256-SHA;
  ssl_prefer_server_ciphers on;

  location / {
    proxy_pass http://websocket;
    proxy_http_version 1.1;
    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 Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Forwarded-Proto $proxy_protocol_port;
  }
 }


upstream websocket {
  server local.way.com:7879;
}

and the webpack-serve config

module.exports = {
  clipboard: true,
  host: 'local.way.com',
  port: 7878,
  'https-cert':
    '/usr/local/way-fe/config/proxy/ssl/certificate.crt',
  'https-key':
    '/usr/local/way-fe/config/proxy/ssl/certificate.key',
  hotClient: {
    port: 7879,
    https: true,
  },
};
0

There are 0 best solutions below