如何使用 HTTPS 启动 React 项目答案

【问题标题】：How to start React project with HTTPS如何使用 HTTPS 启动 React 项目
【发布时间】：2020-02-10 12:31:15
【问题描述】：

我正在尝试使用 HTTPS 而不是 HTTP 来启动我的 React 项目。我在 Ubuntu 服务器中有我的项目，我想用 HTTPS 尝试它。我已经用 Certbot 为我的域创建了一个 SSL 证书，我想在 React 中使用它。

我曾尝试修改node_module/webpack-dev-server/lib/Server.js中的文件Server.js如下：

// 证书

  const privateKey = fs.readFileSync('/etc/letsencrypt/live/adan.appha.es/privkey1.pem', 'utf8');
  const certificate = fs.readFileSync('/etc/letsencrypt/live/adan.appha.es/cert1.pem', 'utf8');
  const ca = fs.readFileSync('/etc/letsencrypt/live/adan.appha.es/fullchain1.pem', 'utf8');

并改变：

this.listeningApp = require('spdy').createServer(options.https, app);

到

this.listeningApp = https.createServer(credentials, app);

然后执行npm start并在我的浏览器中写入https://mydomain:3000，但它仍然不起作用。

【问题讨论】：

您几乎不应该在 node_modules/ 内编辑代码，仅供参考。
你想在开发中从https开始吗？
哦，我不知道编辑 node_modules/ 不是一个好习惯，我发现了一些关于它的东西，我试过了。是的@Ashish，我想从开发中的https开始，原因是我的webapp上有一个使用麦克风的iframe，并且由于安全问题它不起作用。我试图开始做 HTTPS=true npm start 但出现安全提示窗口，我说我信任并且浏览器在非安全模式下打开它...

标签： reactjs linux ssl webpack webpack-dev-server

【解决方案1】：

您可以在开发中设置 HTTPS，如下所示。

Windows (cmd.exe)

set HTTPS=true&&npm start

Windows (Powershell)

($env:HTTPS = "true") -and (npm start)

Linux、macOS (Bash)

HTTPS=true npm start

请注意，服务器将使用自签名证书，因此您的网络浏览器几乎肯定会在访问页面时显示警告。

【讨论】：

我已经尝试过了，在 Firefox 中它可以工作，但在 chrome 中仍然无法工作...感谢您的帮助！
您使用的是哪个操作系统？

【解决方案2】：

在 package.json 文件中的 scripts 部分更改

"start": "react-scripts start"

到

"start": "set HTTPS=true&&react-scripts start".

【讨论】：

这对我有用，谢谢。