为基于 create-react-app 的项目在 运行 宁 npm 构建后 运行 时间读取环境变量

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",
}

Answer 2

我找到了一种从后端获取自定义 conf.json 文件并在我的 React 应用程序的 index.tsx 文件中应用参数的方法：

const CURR_ENV = process.env.REACT_APP_ENV;

console.log('ENV: ' + CURR_ENV)

if (CURR_ENV === 'prod') {
    console.log("fetching conf.json ...")
    fetch('conf.json')
        .then(response => response.json())
        .then(data => {
            console.log("data=" + JSON.stringify(data))
            const amplify = data['amplify'];
            console.log("amplify=" + JSON.stringify(amplify))
            Auth.configure(amplify);
            Auth.configure(amplify);

            const backendUrl = data['backendUrl'];
            console.log("backendUrl=" + JSON.stringify(backendUrl))
            localStorage.setItem('backend_url', backendUrl);
            console.log("successfully configured amplify and apigw")
        })
        .catch(error => console.error(JSON.stringify(error)))
}
else {
    localStorage.setItem('backend_url', process.env.REACT_APP_BACKEND_URL?process.env.REACT_APP_BACKEND_URL:"");
    Amplify.configure(awsmobile);
    Auth.configure(awsmobile);
}

ReactDOM.render(
  <Router>
      <div>
          <Route path="/" component={App}/>
      </div>
  </Router>,
  document.getElementById('root')
);