Webpack Dev Server在HTTPS / Web Sockets Secure上运行

Posted 2021-03-28

通常在开发人员模式下，Webpack使用HTTP运行。通常有一个Web服务器通过HTTP和webpack在单独的端口上使用http / websockets提供内容。

是否可以在https上运行Web服务器并在https / websocket secure上运行webpack？

答案

见webpack docs

您可以在webpack-dev-server命令中添加一个标志

webpack-dev-server --https 

另一答案

虽然上面的答案对于cli是正确的，但如果你不在CLI中，你可以做这样的事情（在gulp任务中）：

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');
});

另一答案

这仅适用于TEST环境：

您需要按如下方式配置webpack-dev-server：

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

但是，当webpack尝试从密钥中读取密码时，会出现一个已知错误。 please see this link

最简单的解决方法是生成一个没有密码的密钥（我不知道这个的安全后果！但这仅用于测试）。

要从密钥中取出密码，请使用以下命令：

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

并在预览配置行中使用新密钥

另一答案

使用webpack-dev-server --https，您可以创建自签名证书。但它不适用于所有用例。

浏览器会询问您是否有安全例外，并在网址栏中显示连接不安全。

因此，建议使用mkcert为localhost创建本地受信任的开发证书

然后通过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

或者在webpack.config.js中配置devServer.https选项：

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默认以Unix格式创建.pem文件。因此，如果你在Windows上，你可能需要使用例如Windows格式将它们转换为Windows格式。记事本+ +