免责声明:我是一个 React 菜鸟,所以也许我想做的不是 React 方式
我正在编写一个 React 前端,该前端将部署为由某些云提供商静态提供服务,例如S3 或 Google Storage 或其他什么。该前端与位于云中某个位置的多个 API 服务器进行交互,这些服务器可能在同一个提供商中,也可能不在同一提供商中。此外,在开发 UI 或其一部分时,这些服务器的地址可能是本地或测试实例。
如何将 API 服务器 URL 灵活地注入(inject)到我的 React 应用程序中,以便我可以使用不同的地址在开发、登台或生产中部署?
解决方案:我最终使用了建议的解决方案组合:
- 使用
.env.development
和.env.development
文件(确切名称)来存储变量REACT_APP_API_URI = 'host'
< - 这会被 create-react-app 的构建脚手架自动获取,并在 UI 代码中以
process.env.REACT_APP_API_URI
的形式提供
请注意,这有点违背 12 Factor Apps 中的原则,例如将环境变量存储在版本控制的文件中,但它完成 ATM 的工作。
最佳答案
你可以试试这个:
// http.js
const getBaseUrl = () => {
let url;
switch(process.env.NODE_ENV) {
case 'production':
url = 'https://stackoverflow.com';
break;
case 'development':
default:
url = 'https://google.com';
}
return url;
}
export default axios.create({
baseURL: getBaseUrl(),
});
关于reactjs - 部署React前端时如何注入(inject)API服务器URL?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51024542/