ssl - 在 HTTPS/Web 套接字上运行的 Webpack 开发服务器安全

Question

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

是否可以在 https/websocket 安全上运行 https 和 webpack 上的 web 服务器？

Answer 1

查看webpack 文档

您可以在 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-server：

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

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

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

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

并在预览配置行中使用新键

Answer 4

与webpack-dev-server --https您一起创建自签名证书。但它并不适用于所有用例。

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

因此建议使用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，您可能需要使用 Notepad++ 将它们转换为 Windows 格式

Answer 5

就我而言，我必须运行所有这些命令才能获得证书：

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 6

在 Windows 上测试（2021 年 4 月 22 日）。简单（无需安装）。

一、项目配置

在您的项目根目录中，在 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 7

我正在做 react 项目，现在想在这个项目上添加 SSL 证书并使用 https 运行我的网站，所以按照以下步骤操作：

1. 在 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
      }
   

2. 在 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"

            }

或 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
       }

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

Answer 8

当 webapp 从内部使用 http 的 docker 容器提供服务时也有类似的情况，但是 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
    }),
},