heroku 環境變量返回未定義

Question

我試圖設置一些環境。 Heroku 上的變量，我做到了，我可以在打開 Heroku 儀表板時看到應用程序中的變量。 但是當我嘗試從我的應用程序訪問變量時，它返回undefined任何想法？

componentDidMount() {
    console.log('this env' , process.env.backEndServer) // undefined
}

檢查 Heroku cli：

$ heroku config:get backEndServer // https://myserver.com

Answer 1

您正在嘗試訪問客戶端的環境變量，這是不可能的。

如果要在客戶端應用程序中使用環境變量，則需要設置 Webpack 來處理不同的環境。

在 Webpack 配置文件中，您將使用Webpack 的定義插件為每個環境定義全局變量。

另外不要忘記將NODE_ENV配置變量添加到您的 heroku 應用程序並將其設置為true. So you'll be sure that by accessing true. So you'll be sure that by accessing process.ENV.NODE_ENV will force runtime to use node.js` 環境。

現在您可以按如下方式配置您的生產環境：

/* in webpack.config-prod.js */
...,
plugins: [    
  new webpack.DefinePlugin({           
    NODE_ENV: JSON.stringify(process.env.NODE_ENV),      
    API_HOST: JSON.stringify(process.env.API_HOST)
  })
],
...

現在，您可以在客戶端應用程序中輕松訪問您的環境變量。

Answer 2

如果您查看 Heroku 構建日志，它建議您指定 nodejs 版本。 如果您在 package.json 中指定節點版本，它可能會解決問題。

包.json

{
...
  "engines": {
   "node": "12.13.1"
   },
...
}