react项目本地开发环境设置https

http和https

HTTP（全称：Hyper Text Transfer Protocol）超文本传输协议，是一个简单的请求-响应协议，它通常运行在 TCP 之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应

HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在 HTTP 的基础上通过传输加密和身份认证保证了传输过程的安全性 。HTTPS 在 HTTP 的基础下加入 SSL，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 HTTPS 存在不同 HTTP 的默认端口及一个加密/身份验证层（在 HTTP 与 TCP 之间）。这个系统提供了身份验证与加密通讯方法。它被广泛用于万维网上安全敏感的通讯

react项目本地开发环境设置https

背景：react 项目本地开发，需要模拟 https 环境

https 在 http 的基础下加入 SSL，https 的安全基础是 SSL，所以设置 https，需要有 SSL 证书

使用mkcert工具生成CA受信任的本地SSL证书

• CA 是证书的签发机构，它是公钥基础设施（Public Key Infrastructure，PKI）的核心。CA 是负责签发证书、认证证书、管理已颁发证书的机关
• mkcert 是一个使用 go 语言编写的生成本地自签证书的小程序，具有跨平台（Mkcert支持macOS、Linux、和Windows三大操作系统），使用简单，支持多域名，自动信任 CA 等一系列方便的特性可供本地开发时快速创建 https 环境使用
• 注意：mkcert 生成的 SSL 证书仅可以在本地使用

安装 mkcert：

• macOS 使用 brew 安装 mkcert

  brew install mkcert

  brew install nss

• windows 使用 scoop 安装 mkcert

  scoop bucket add extras

  scoop install mkcert

创建CA证书到本地

创建 CA 证书到本地， 在终端中执行：

mkcert -install

生成证书（ localhost 127.0.0.1 后面还可以空格添加其他域名或IP地址）， 在终端中执行：

mkcert localhost 127.0.0.1

找到证书 rootCA.pem， 在终端中执行：

mkcert -CAROOT

将CA证书放到react项目中

在项目根目录下新建一个 .cert 文件夹，将 rootCA.pem 文件放入文件夹中， 在项目根目录的终端中执行：

mkcert -key-file ./.cert/key.pem -cert-file ./.cert/rootCA.pem "localhost"

此时 .cert 文件夹中会生成一个证书文件 key.pem

注意：

.cert 文件夹的内容只是用于本地开发中模拟 https 环境使用，为了避免将.cert 文件夹提交到 git 仓库，可以将 .cert 加入到 .gitignore 文件中

修改react项目中的启动命令

在启动命令中添加：

HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem

"scripts": {
   "start": "HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem node scripts/start.js",
   "build": "node scripts/build.js",
   "test": "node scripts/test.js"
}

启动项目

此时项目本地域名下已经有了有效的证书