React项目本地启动https

1、修改React启动命令

"scripts": { 
    "start": "HTTPS=true scripts/start.js", 
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
}

【注】修改后，启动项目，浏览器会提示不是私密连接。这是因为我们还没有有效的证书，这里认定我们的连接不安全，因此我们需要一个证书。

2、安装证书

这里我们使用 mkcert

• MacOs 安装 mkcert 可以使用 brew

  brew install mkcert brew install nss //这里firefox

• Arch Linux 安装可以使用 yay

  yay -S --noconfirm --needed go yay -S --noconfirm --needed mkcert

• Ubuntu 安装可以使用 apt-get

  sudo apt-get updatesudo apt install wget libnss3-tools

  export VER="v1.4.3" && wget -O mkcert github.com/FiloSottile…

  下载文件后，使文件可执行并将二进制文件放在 /usr/local/bin 下面。 chmod +x mkcert
  sudo mv mkcert /usr/local/bin\

• windows 安装可以使用 scoop

  scoop bucket add extras scoop install mkcert

接下来需要创建CA根证书到本地，打开终端，输入 mkcert -install,

然后生成证书，mkcert localhost 127.0.0.1 ，//后面还可以继续空格添加其他域名或IP地址，默认是pem格式,如果想了解更多 mkcert 的命令，可以使用 mkcert -help

在终端中输入 mkcert -CAROOT 命令，找到证书rootCA.pem

在我们demo 项目的根目录中新建一个 .cert 的文件夹，将rootCA.pem 文件放入，然后在项目根目录的终端中执行

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

回车执行，可以看到 .cert 文件夹中多了一个 key.pem 的证书文件

因为 .cert 文件夹的内容只是本地开发中使用的，所以我们可以加入到.gitignore 文件中

然后我们再修改 demo 项目的启动命令

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

3、再次启动项目OK