部署React前端时如何注入API服务器URL？

Question

免责声明：我是一个React新手，所以也许我想做的不是React Way

我正在编写一个React前端，该前端将被部署为由某些云提供商静态地提供服务，例如S3或Google Storage或其他。该前端与生活在云中某个地方（可能在同一提供商中，也许不在同一提供商中）的多个API服务器进行交互。此外，在开发UI或其一部分时，这些服务器的地址可能是本地实例或测试实例。

如何以灵活的方式将API服务器URL注入我的react应用程序中，以便可以使用不同的地址在dev，staging或prod中进行部署？

解决方案：最后我最终使用了建议的解决方案组合：

• 使用.env.production和.env.development文件（确切名称）存储变量REACT_APP_API_URI = 'host'
• 它由create-react-app的构建脚手架自动拾取，并在UI代码中可用 process.env.REACT_APP_API_URI

请注意，这在一定程度上违背了12 Factor Apps的原理，例如，在版本控制中将env变量存储在文件中，但是它可以完成ATM。

Answer 1

你可以试试这个

if(process.env.NODE_ENV === 'development') {
  url = 'https://google.com'
}

if(process.env.NODE_ENV === 'production') {
  url = 'https://stackoverflow.com/'
}