写点什么

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

作者:隔壁的猫
  • 2022 年 3 月 24 日
  • 本文字数:1177 字

    阅读完需:约 4 分钟

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

前言

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

正文

  1. 修改 React 启动命令

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


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

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


别急,我们才刚开始。


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


  1. 证书

  2. 证书的生成我们使用 mkcert ,当然了,我们需要先安装 mkcert

  3. 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 了



mkcert Github


感谢阅读,欢迎点赞评论

发布于: 2022 年 03 月 24 日阅读数: 44
用户头像

隔壁的猫

关注

种一棵树最好的是十年前,其次是现在。 2019.12.15 加入

大多数人所成为的,并非是他们想成为的人,而是不得不成为的人。“责任”是最大的文明,也是最大的虚伪。

评论

发布
暂无评论
关于React项目本地开发设置Https的过程_前端_隔壁的猫_InfoQ写作平台