使用 mkcert 本地开发设置 https 之后如何删除恢复 http 访问

大豹豹

已于 2022-07-14 18:34:14 修改

阅读量1k

点赞数

文章标签： http https

于 2022-06-27 14:50:49 首次发布

本文链接：https://blog.csdn.net/sinat_38324690/article/details/125483723

版权

使用 mkcert 配置本地 https 开发环境就不废话了，网上很多。

这里随便复制了一篇

修改 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 了