如何在生产环境下通过 HTTPS 部署 React 应用？

Question

我有一个 React 应用程序，通过包含以下内容的.env.production 文件可以在 HTTPS 上完美工作：

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上。有任何想法为什么？！

- gamest

---

react-scripts start 启动开发服务器。不要在生产环境中使用它。要在生产环境中使用React，请构建项目并在适当的Web服务器上提供服务。 - Krumelur

Answer 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"

- Maxim Orlov

---

很晚了，但你是怎么知道的呢？我在文档中找不到它。 - Libra

@Laif，关于 CRA，请参考此处 https://create-react-app.dev/docs/using-https-in-development#custom-ssl-certificate。关于 serve，您可以运行 serve --help 来获取 CLI 选项列表。 - Maxim Orlov

服务文档非常非常糟糕。 - Khalil Khalil