在前端开发中，HTTPS 是很常见的使用场景。HTTPS 可以保证前端页面的安全性，防止数据被黑客截取、篡改。一个常见的问题是本地开发时，如何使用 HTTPS。本文将介绍一款 npm 包 @brandonkal/devcert，它可以快速方便地生成本地 HTTPS 证书。
1. 安装 @brandonkal/devcert
在命令行中输入以下命令即可安装：
npm install -g @brandonkal/devcert
全局安装后，就可以在命令行中使用 devcert 命令来操作。
2. 使用 @brandonkal/devcert
2.1. 生成本地 HTTPS 证书
在命令行中输入以下命令即可生成本地 HTTPS 证书：
sudo devcert如果需要在 Windows 或其他操作系统中使用，请忽略 sudo 命令。
执行命令后，会提示输入本地计算机密码。输入正确密码后，即可生成本地 HTTPS 证书。
2.2. 配置本地 HTTPS 环境
在本地开发时，很多 Web 服务器都可以启用 HTTPS。以下是一些常见的 Web 服务器配置方法。
2.2.1. 使用 Node.js 自带的 HTTPS 模块
Node.js 自带 HTTPS 模块，可以直接使用生成的证书，启用 HTTPS。
-- -------------------- ---- ------- ----- ----- - ----------------- ----- -- - -------------- ----- ---- - ---------------- ----- ------- - - ---- --------------------------------------- ------ ------------ ----- --------------------------------------- ------ ------------ -- --------------------------- -------- ----- ---- - ------------------- -------------- ---------- ----------------展开代码
其中 key.pem 和 cert.pem 分别是生成的证书文件，放在 ssl 文件夹内。
2.2.2. 使用 HTTP-Server 运行本地静态文件
HTTP-Server 是一款简单易用的 Web 服务器，可以很方便地启用 HTTPS。
安装 HTTP-Server：
npm install -g http-server
使用 HTTP-Server 启动 HTTPS：
http-server . --ssl --cert ~/ssl/cert.pem --key ~/ssl/key.pem
其中 --cert 和 --key 参数分别是生成的证书文件路径。
2.2.3. 使用 webpack-dev-server 运行本地项目
webpack-dev-server 是前端开发过程中常用的 Web 服务器，可以集成 HTTPS。
在 webpack 配置中添加以下代码即可启用 HTTPS：
devServer: { https: true, key: fs.readFileSync(path.resolve(__dirname, 'ssl', 'key.pem')), cert: fs.readFileSync(path.resolve(__dirname, 'ssl', 'cert.pem')) }
其中 key.pem 和 cert.pem 分别是生成的证书文件，放在 ssl 文件夹内。
3. 总结
使用 @brandonkal/devcert 可以快速方便地生成本地 HTTPS 证书，让我们可以在本地开发时享受 HTTPS 带来的安全保障。同时，结合不同的 Web 服务器，可以很方便地启用 HTTPS，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/103128
