关于 React 项目本地开发设置 Https 的过程

2022 年 3 月 24 日
本文字数：1177 字
阅读完需：约 4 分钟

前言

昨天群里有人问了一个问题，说是 React 项目如何在本地开发的时候开启 Https，看到这个问题，我也很好奇，因为我们有时候在对接第三方 Api 的时候，需要用 Https 发请求，比如地图的一些 Api。就查阅了下相关的文档，做了个 demo 试了下。下面我将自己的相关过程分享出来，希望能够给需要的人提供一点思路。

正文

修改 React 启动命令
首先我们使用 React 的脚手架 CREATE-REACT-APP 初始化一个 demo 项目，打开 package.json 文件,修改启动命令

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

复制代码

修改后，我们先启动项目，发现浏览器提示不是私密连接

别急，我们才刚开始。

因为我们还没有有效的证书，这里认定我们的连接不安全，因此我们需要一个证书。

证书
证书的生成我们使用 mkcert ,当然了，我们需要先安装 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 https://github.com/FiloSottile/mkcert/releases/download/${VER}/mkcert-${VER}-linux-amd64\                下载文件后，使文件可执行并将二进制文件放在 `/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"      }

复制代码

这时候我们再次启动项目，可以看到已经 ok 了