React JS：使用環境變量根據生產與開發指定兩個API URL

Question

我使用create-react-app作為我的React應用程序的樣板。

我正在使用fetch向我的本地服務器發出請求

fetch("http://localhost:3000/users")
 .then(function(res){
  return res.json()
})
.then(function(res){
  return res.data
})

最終，當我部署到heroku時，我不會使用http：// localhost，而是使用https://safe-escarpment-99271.herokuapp.com/ 。

有沒有辦法將API網址存儲在環境變量中

即。 fetch(API_URL)

因此我可以在Github上部署時使用它，但仍在本地測試，而不必來回更改URL。

我知道了

new webpack.DefinePlugin({
  'process.env':{
     'NODE_ENV': JSON.stringify('production'),
     'API_URL': JSON.stringify('http://localhost:8080/bands')
   }
}),

在許多答案，但這似乎並沒有為我工作。 當我在console.log(process.env) ，唯一顯示的是NODE_ENV和PUBLIC_URL

Answer 1

也許這對你有用：

const url = (process.env.NODE_ENV === 'development') 
    ? 'http://localhost:8080/bands/'
    : 'https://<your-app>.herokuapp.com/bands/';

在heroku默認NODE_ENV =生產： https ：//devcenter.heroku.com/changelog-items/688

Answer 2

嘗試使用EnvironmentPlugin ：

new webpack.EnvironmentPlugin([
    "NODE_ENV",
    "API_URL"
])

Answer 3

您必須在REACT_APP_每個新環境變量的REACT_APP_ 。 在您的情況下，它將是REACT_APP_API_URL 。

其背后的原因是create-react-app忽略了所有自定義環境變量，如果它們不以REACT_APP_ （ NODE_ENV和PUBLIC_URL是例外）。