Question

我正在向Heroku部署React应用程序（版本15.4.2），但我无法访问环境变量 - 我们将非常感谢您的澄清。

我最初使用create-react-app启动了此应用，但最终将其弹出以便我可以进行更多控制。

在config/env.js中，我设置了我想要的变量API_URL，如下所示：

function getClientEnvironment(publicUrl) {
  var processEnv = Object
    .keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce((env, key) => {
      env[key] = JSON.stringify(process.env[key]);
      return env;
    }, {
      'NODE_ENV': JSON.stringify(
        process.env.NODE_ENV || 'development'
      ),
      'PUBLIC_URL': JSON.stringify(publicUrl),
      'API_URL': JSON.stringify(
        process.env.API_URL || 'http://localhost:4000/api/v1'
      )
    });
  return {'process.env': processEnv};
}

module.exports = getClientEnvironment;

此模块在webpack.config.prod.js中引用（释义）......

var env = getClientEnvironment(publicUrl);

module: {
    plugins: [
        new webpack.DefinePlugin(env)
    ]
}

最后，我想在API_URL中的脚本中引用src/static/scripts/fetch.js：

fetch(`${API_URL}${url}`, {
    method: 'GET',
    headers: headers()
})
.then(parseResponse)

但是当我试图把它推到Heroku时，它失败了

remote:   24:21  error  'API_URL' is not defined  no-undef

我是否错误地设置了API_URL变量？或许我没有正确部署应用程序？虽然我弹出了应用程序，但我仍然将其部署为一个未经注意的create-react-app应用程序 - https://blog.heroku.com/deploying-react-with-zero-configuration - 但可能还不够。

Answer 1

我最终能够通过重组一点来解决这个问题 - 我在使用弹出create-react-app应用程序后出现的文件结构，并在我的应用程序的顶部只包含一个webpack.config.js文件级别目录。在那个文件中，我包括了

plugins: [
    new webpack.DefinePlugin({
        'API_URL': JSON.stringify(process.env.API_URL || 'http://localhost:4000/api/v1')
    })
]

并且照顾它。所以这并没有完全回答我的问题，因为我最终改变了一点文件结构，但确实解决了这个问题。

React - 定义和访问环境变量

1 个答案: