关于 React 项目本地开发设置 Https 的过程
前言
昨天群里有人问了一个问题,说是 React 项目如何在本地开发的时候开启 Https,看到这个问题,我也很好奇,因为我们有时候在对接第三方 Api 的时候,需要用 Https 发请求,比如地图的一些 Api。就查阅了下相关的文档,做了个 demo 试了下。下面我将自己的相关过程分享出来,希望能够给需要的人提供一点思路。
正文
修改 React 启动命令
首先我们使用 React 的脚手架
CREATE-REACT-APP
初始化一个 demo 项目,打开package.json
文件,修改启动命令
修改后,我们先启动项目,发现浏览器提示不是私密连接
别急,我们才刚开始。
因为我们还没有有效的证书,这里认定我们的连接不安全,因此我们需要一个证书。
证书
证书的生成我们使用 mkcert ,当然了,我们需要先安装 mkcert
MacOs 安装 mkcert 可以使用 brew
Arch Linux 安装可以使用 yay
Ubuntu 安装可以使用 apt-get
windows 安装可以使用 scoop
接下来需要创建 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 项目的启动命令
这时候我们再次启动项目,可以看到已经 ok 了
感谢阅读,欢迎点赞评论
版权声明: 本文为 InfoQ 作者【隔壁的猫】的原创文章。
原文链接:【http://xie.infoq.cn/article/6b0a713897d8061f8fd4efc15】。文章转载请联系作者。
评论