如何使用 HTTPS 启动 React 项目

Question

我正在尝试使用 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 但它仍然不起作用。

Answer 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

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

Answer 2

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

"start": "react-scripts start"

到

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

如何使用 HTTPS 启动 React 项目

How to start React project with HTTPS

linux

ssl

reactjs

webpack

webpack-dev-server

Windows (cmd.exe)

Windows（Powershell）

Linux、macOS (Bash)