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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack Dev Server在HTTPS / Web Sockets Secure上运行相关的知识,希望对你有一定的参考价值。

通常在开发人员模式下,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格式。记事本+ +

以上是关于Webpack Dev Server在HTTPS / Web Sockets Secure上运行的主要内容,如果未能解决你的问题,请参考以下文章

webpack-dev-server

webpack-dev-server不是内部或外部命令

Webpack:如何设置 webpack-dev-server 和 Hot Reload

用于 CORS 请求的 webpack-dev-server 配置

koa2实现简易的webpack-dev-server

webpack-dev-server 报 [ Invalid Host/Origin header ] 错误