node.js - 为基于 create-react-app 的项目运行 npm build 后在运行时读取环境变量

Question

我是 React 新手，我将部署一个 React 项目。 React项目由create-react-app创建，然后生产代码由“npm build”构建，并由Express托管。

在项目中，有一些对 API 服务器的 fetch 调用，其 URL 需要可配置。在开发中，我可以通过在文件 .env 的环境变量中设置它(例如 REACT_APP_API_URL= http://somewhere/ )并在代码中导入来完成此操作。

但是，似乎这些环境变量在运行“npm build”后变得静态，我无法再更改它，即使在启动服务器时执行“REACT_APP_API_URL= http://otherserver/ node express_server.js”之类的操作也是如此。

我想问一下，在“npm build”之后，是否有办法为代码获取一些配置，如果可以从文件或.env中获取是最好的，从环境变量中获取对我来说也可以.

谢谢。

Answer 1

环境变量在构建步骤中嵌入到文件中，因此您需要在调用 react-scripts build 时为它们分配正确的值。

示例

"scripts": {
  "start": "cross-env REACT_APP_API_URL=http://somewhere/ react-scripts start",
  "build": "cross-env REACT_APP_API_URL=http://otherserver/ react-scripts build",
}