React项目配置https启动（Windows）

为什么本地项目需要https

在开发工程中会有需要https的情况，比如登录使用okta，并且使用本地ip打开项目，那这个时候点击okta登录会提示必须使用https的方式

虽然Create React App提供的有教程，但是不够完善。没有教我们如何生成SSL证书

下面就跟着本片文章来一起实现https启动项目吧~

安装SSL证书

安装scoop

打开PowerSheel执行以下命令

scoop bucket add extras
scoop install mkcert

安装证书信任机构

mkcert -install

创建证书

打开项目根目录 执行以下指令

# 创建一个用来保存证书文件的目录
mkdir -p .cert
# 可以一次性为多个域名创建证书，这个非常强大
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost" "127.0.0.1"

使用证书来启动当前项目

在项目的环境配置文件.env or .env.development加入以下配置

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

然后执行项目启动命令npm run start 即可启动项目。

当看到地址栏有个小锁就说明配置成功啦！