如何通过 https 在生产环境中部署 React 应用程序？答案

【问题标题】：How to deploy a react app in production over https?如何通过 https 在生产环境中部署 React 应用程序？
【发布时间】：2020-09-23 01:34:51
【问题描述】：

我有一个使用 .env.production 文件在 HTTPS 上运行良好的 React 应用程序，该文件包含：

HTTPS=true
SSL_CRT_FILE=/etc/ssl/certs/mycert.crt
SSL_KEY_FILE=/etc/ssl/private/mykey.key

package.json 文件包含：

"scripts": {
   "start": "env-cmd -f .env.production react-scripts start",
   "build:production": "env-cmd -f .env.production react-scripts build"
}

当我这样做时：

npm start

一切正常，我可以从任何地方通过 HTTPS 访问我的服务器。现在，这很有趣，现在我做：

npm run build:production

这也很好，我得到：

The build folder is ready to be deployed.
You may serve it with a static server:

serve -s build

现在，这就是失败的原因：

1) 当我使用上面的serve 命令时，.env.production 文件中的环境变量没有被拾取！为什么？

2) 如果我手动传递环境变量，如下所示：

HTTPS=true SSL_CRT_FILE=/etc/ssl/certs/mycert.crt SSL_KEY_FILE=/etc/ssl/private/mykey.key PORT=8580 serve -s build

似乎只选择了 PORT 变量，但服务器现在在 HTTP 上运行。任何想法为什么？！

【问题讨论】：

react-scripts start 启动 development 服务器。切勿将其用于生产。要在生产环境中使用 React，请在适当的 Web 服务器上构建项目和服务器。

【解决方案1】：

当您运行 npm start 时，会在后台为您启动一个开发服务器，该服务器配置为自动获取 SSL_CRT_FILE、SSL_KEY_FILE 和 HTTPS 环境变量。

serve 不这样做，您需要使用这些 CLI 标志让它知道：

serve -s build --listen 8580 --ssl-cert "/etc/ssl/certs/mycert.crt" --ssl-key "/etc/ssl/private/mykey.key"

【讨论】：