Webpack Dev Server running on HTTPS/Web Sockets Secure

问题

Normally in developer mode Webpack runs using HTTP. There is usually a web server serving content through HTTP and webpack using http/websockets on a separate port.

Is it possible to run the web server on https and webpack on https/websocket secure ?

回答1:

See the webpack docs

There is a flag you can add to the webpack-dev-server command

webpack-dev-server --https

回答2:

While the above answer is correct for cli, if you are not in the CLI, you could do something like this (in a gulp task):

var WebpackDevServer = require('webpack-dev-server');

new WebpackDevServer(webpack(WebpackDevConfig), {
    https: true,
    hot: true,
    watch: true,
    contentBase: path.join(__dirname, 'src'),
    historyApiFallback: true
}).listen(1337, 'localhost', function(err, result) {
    if (err) {
        console.log(err);
    }
    console.log('Dev server running at https://localhost:1337');
});

回答3:

this for TEST environment only:

you need to configure your webpack-dev-server as follows:

webpack-dev-server --https --cert ./cert.pem --key ./key.pem

however, there is a known error when webpack tries to read the passphrase from the key. please see this link

The easiest work around is to generate a key with no passphrase (I don't know the security consequences of this! but this is for test only) .

To take the passphrase out of your key use this command:

$ openssl rsa -in key.pem -out newKey.pem

and use the new key in the previews configuration line

回答4:

With webpack-dev-server --https you create a self-signed certificate. But it works not for all use cases.

Browsers will ask you for a security exception and show in the url bar that connection is not secure.

Therefore it is recommended to create a locally trusted development certificate for localhost with mkcert

Then use it via CLI:

webpack-dev-server --https --key C:/Users/User/localhost-key.pem --cert C:/Users/User/localhost.pem --cacert C:/Users/User/AppData/Local/mkcert/rootCA.pem

or configure devServer.https option in webpack.config.js:

devServer: {
    https: {
        key: fs.readFileSync('C:/Users/User/localhost-key.pem'),
        cert: fs.readFileSync('C:/Users/User/localhost.pem'),
        ca: fs.readFileSync('C:/Users/User/AppData/Local/mkcert/rootCA.pem')
    }
}

mkcert creates .pem files in Unix format by default. So if you're on Windows you'll probably need convert them to Windows format using e.g. Notepad++

回答5:

I'm working on react project, Now wanted to add SSL certificate on this project and run my website with https so have followed below step:

In add https in webpack.config.js

 devServer:{

          https: true,
          host: '0.0.0.0', // you can change this ip with your ip
          port: 443,       // ssl defult port number
          inline: true,

          historyApiFallback: true,
          publicPath: '/',
          contentBase: './dist',
          disableHostCheck: true
   }

Add SSL public certificate on package.json file If you didn't want to add a certificate on your package.json file then you have to add it on your webpack.config.js it is mandatory to add your certificate in your project either you can it on package.json file or webpack.config.js

For Package.json

scripts: {
                    "test": "echo \"Error: no test specified\" && exit 1",
                    "build": "webpack --mode production",
                    "start": "webpack-dev-server  --open --https --cert /path/to/private.crt --key /path/to/private.key"

            }

OR webpack.config.js

 devServer:{

              https: true,
              host: '0.0.0.0', // you can change this ip with your ip
              port: 443,       // ssl defult port number
              inline: true,
              https: {
                    key: fs.readFileSync('/path/to/private.pem'),
                    cert: fs.readFileSync('/path/to/private.pem'),
                    ca: fs.readFileSync('/path/to/private.pem')
                    }
              historyApiFallback: true,
              publicPath: '/',
              contentBase: './dist',
              disableHostCheck: true
       }

Run npm start command on a terminal or you can also use pm2 start npm -- start

回答6:

In my case I had to run all these commands to get the certificate:

openssl genrsa -out private.key 4096
openssl req -new -sha256 -out private.csr -key private.key
openssl x509 -req -days 3650 -in private.csr -signkey private.key -out private.crt -extensions req_ext
openssl x509 -in private.crt -out private.pem -outform PEM

And then finally:

npm run dev -- --open --https --cert private.pem --key private.key

来源：https://stackoverflow.com/questions/26663404/webpack-dev-server-running-on-https-web-sockets-secure

标签

ssl

https

Webpack

devserver