Webpack Dev Server with NGINX proxy_pass for https domain causes: net::ERR_CONNECTION_CLOSED

Question

I have setup a server which hosts an \'angular2-webpack-starter\' project for the front-end and a nodejs back-end. The nginx default has two proxy_pass\'s to map the connect

Answer 1

It took quite a while, but I figured out the issue. Others may benefit when attempting to run on a secure site during development.

The issue was proxy_pass to 'http://127.0.0.1:3000/'. This causes issues.

Changing to:

proxy_pass https://127.0.0.1:3000/;

AND setting devServer in webpack.dev.js to:

  https: true,
  https: {
    key: fs.readFileSync('/etc/apache2/certwork/xxx.key'),
    cert: fs.readFileSync('/etc/apache2/certwork/xxx.crt'),
    ca: fs.readFileSync('/etc/apache2/certwork/ssl-bundle.crt')
  },

solved the issue. NOTE: https: true is enough, but I wanted to make the connection as accepted as possible, hence I added the key, cert, ca stuff.

YOU will still see:

And in my case:

Since the connection to 'https://localhost:3000' still has a mismatch with the domain name. IE. localhost !== parke.dynazu.com. BUT all is working and when I move away from the webpack-dev-server, this will not be an issue.