疯狂的技术宅

以前出于工作目的,编写和翻译了大量的技术文章,以前端为主,删掉了过时的、毫无营养的内容,留下的都是精华。


  • 首页

  • 分类

  • 标签

  • 归档

  • 关于本站

  • 回到主站

  • 搜索

给本机运行的 React 程序配置 HTTPS

时间: 2020-10-14 分类: 前端技术   字数: 489 字 阅读: 1分钟
标签: #React# #HTTPS#
  • 本文译自:https://flaviocopes.com/react-how-to-configure-https-localhost/
  • 译者:疯狂的技术宅

如果用 create-react-app 构建一个程序,并且在本地运行,默认情况下会用 HTTP 协议为该程序提供服务。

而在生产环境中运行的程序都用 HTTPS 进行服务。

尽管说把 HTTPS 配置出来非常简单,但是想在本地配置要复杂一些。

我们都知道,create-react-app 程序是用 npm run start(或简称为 npm start)运行的,在 package.json 文件的 scripts 部分中,有这样一行配置:

"start": "react-scripts start"

把它修改为:

"start": "HTTPS=true react-scripts start"

把环境变量 HTTPS 的值设置为 true 。

但是还不够,还需要生成本地证书。

注意:以下命令是在 macOS 上执行的,Linux 下可以用相同的方式操作。但是不保证在 Windows 下也能成功。

在项目根目录中运行:

openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365

然后运行:

openssl rsa -in keytmp.pem -out key.pem

在当前目录下会生成 cert.pem 和 key.pem 两个文件。

现在把 package.json 文件中的 start 脚本改为:

"start": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start",

现在运行 npm run start 并访问 React 程序,应该能看到下面的警告消息:

img

这是因为默认浏览器不信任本地证书。

单击地址栏附近的“不安全”小图标,然后会出现一个小面板:

单击“证书”,会看到另一个面板,其中包含证书详细信息:

现在用鼠标把证书图标拖到桌面或某个文件夹中,就会得到证书文件。然后双击证书安装,设置为“受信任的证书或签发机构”。

设置完成后,就可以通过 HTTPS 在本地访问自己的 React 程序了:

img

标签: #React# #HTTPS#

标题:给本机运行的 React 程序配置 HTTPS

链接:https://fe-tech.viewnode.com/post/202010/14/

作者:疯狂的技术宅

声明: 本博客文章除特别声明外,均采用 CC BY-NC-ND 4.0 国际许可协议( 知识共享署名-非商业性使用-禁止演绎 4.0),转载请注明出处!

用 EventEmitter 处理 Node.js 中的事件
用Node.js处理CORS
  • 文章目录
  • 站点概览
疯狂的技术宅

疯狂的技术宅

退休程序员,硬件发烧友,人工智能爱好者。写写代码喝喝茶,晒晒太阳带带娃。

457 日志
8 分类
583 标签
GitHub
友情链接
  • viewnode
  • mofish
标签云
  • Javascript 172
  • Node.Js 62
  • Vue 36
  • Typescript 28
  • 实战项目 28
  • 面试 21
  • React 20
  • Css 17
  • 面试题 16
  • 教程 13
  • Promise 12
  • Chrome 9
  • Debug 9
  • 调试 9
  • 资源 9
  • Deno 8
  • Dom 8
  • 杂谈 8
  • 正则表达式 8
  • 测试 8
© 2018 - 2022 疯狂的技术宅 All Rights Reserved
Powered by - Hugo v0.99.0 / Theme by - NexT
Storage by 俺的服务器 / 冀ICP备2022010157号
0%