Question

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

是否可以在https和webspack上运行web服务器https / websocket secure？

Answer 1

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

webpack-dev-server --https

Answer 2

虽然上面的答案对于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');
});

Answer 3

这仅适用于TEST环境：

您需要按如下方式配置您的webpack-dev服务器：

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

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

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

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

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

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

Answer 4

在 Windows 上测试 (04/22/2021)。简单（无需安装）。

1.项目配置

在您的项目根目录中运行 Powershell（或 CMD）：

npx mkcert create-cert
npx mkcert create-ca

您的webpack.config.js：

devServer: {
    // ...
    https: {
        key: fs.readFileSync("cert.key"),
        cert: fs.readFileSync("cert.crt"),
        ca: fs.readFileSync("ca.crt"),
    },
    // ....
},

2.安装证书

双击 ca.crt > 安装证书 > ...

... > 当前用户 > 将所有证书放在以下存储中 > 受信任的根证书颁发机构 > ...

...> 完成 > 是

3.检查正确安装

开始 > 输入：“cert” > 管理用户证书 > ...

... > 受信任的根证书颁发机构 > 证书 > 测试 CA

4.重新加载和测试

重新加载浏览器，启动 webpack 开发服务器并检查 SSL 证书有效性：

其他步骤

如果您收到此错误：

您可以将此配置添加到您的 webpack.config.js：

devServer: {
    // ...
    // https: { ... }
    disableHostCheck: true,
    // ....
},

欲了解更多信息：

https://webpack.js.org/configuration/dev-server/#devserverhttps

https://www.npmjs.com/package/mkcert

Answer 5

使用webpack-dev-server --https创建一个自签名证书。但这不适用于所有用例。

浏览器会要求您提供安全例外，并在网址栏中显示连接不安全。

因此，建议使用mkcert

为本地主机创建本地信任的开发证书。

然后通过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格式：记事本++

Answer 6

就我而言，我必须运行所有以下命令来获取证书：

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

最后：

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

Answer 7

我正在处理react项目，现在想在此项目上添加SSL证书并使用https运行我的网站，因此请执行以下步骤：

在webpack.config.js中添加https

 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
   }

在package.json文件上添加SSL公共证书如果您不想在package.json文件上添加证书，则必须将其添加到webpack.config.js中，必须添加您可以在package.json文件中或webpack.config.js上获取项目中的证书

对于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
       }

在终端上运行npm start命令，或者您也可以使用pm2 start npm -- start

Answer 8

从内部使用 http 的 docker 容器提供 webapp 的情况类似，但 traefik 通过 https 提供应用程序（多个端口：4000、3000），因此套接字客户端试图连接到 http://my.app.url:3000。

在花了几个小时想出一个解决方案后，在 webpack 5 中提出了这个：

devServer: {
    client: {
        port: ' ', <--must be empty to eliminate the 3000 port for connecting to socket client
    },
    devMiddleware: {
        writeToDisk: true,
    },
    transportMode: 'sockjs',
    port: 3000, // port which is dev server opening for the sockets
    ...(process.env.DOCKER_DEV && {
        host: '0.0.0.0',
        firewall: false,
        public: 'https://my.app.url', <-- HTTPS here
    }),
},

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

8 个答案:

在 Windows 上测试 (04/22/2021)。简单（无需安装）。