在React服务器端渲染中如何使用process.env

Question

我有一个React应用程序，在客户端上运行得非常好，现在我想让它在服务器端运行。我正在使用create-react-app模板：https://github.com/facebookincubator/create-react-app。但是，我遇到了一个问题，即我将一些环境变量存储在.env文件中，但是在服务器上我无法访问这些变量。因此，类似于axios.get(process.env.API_URL + 'something')这样的代码会抛出404错误，因为process.env.API_URL是undefined。据我所知，.env是我应该使用的文件来存储这些内容，我错了吗？我应该使用其他方法来存储常见的环境变量吗？或者是否有一种方法可以让Node服务器识别这些值？

- Gurnzbot

Answer 1

你可以（应该）提供生产版本。

当你运行“npm run build”时，Webpack会将你的“.env”文件中的条目替换为相应的值并构建。

对于服务器端渲染，你需要在你的Node服务器中定义环境变量，可以作为系统环境变量或由后端服务器读取的“.env”文件。这个后端服务器可能是Webpack-dev-server使用的服务器。

- SrThompson

Answer 2

根据Create React App文档，为了在静态和SSR应用程序中向React公开环境变量，变量名称必须以REACT_APP_为前缀。这可以防止敏感和/或不必要的变量被包含在JavaScript捆绑包中。

- vspedr