无涯教程网

Reactjs 部署react前端时如何注入 API 服务器 URL

发布于06月25日

Disclaimer:我是一个react 迟钝的人，所以也许我想做的不是React Way

我正在编写一个React前端，它将由一些云Provider (如S3或谷歌存储等)静态部署.这个前端与云中某个地方的多个API服务器交互，可能在同一个Provider 中，也可能不是.此外，在开发UI或其一部分时，这些服务器的地址可能是本地或测试实例.

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

SOLUTION:我最终使用了一系列建议的解决方案:

使用.env.production和.env.development个文件(确切名称)存储变量REACT_APP_API_URI = 'host'
这是由create react应用程序的build scaffolding自动获取的，用户界面代码为process.env.REACT_APP_API_URI

注意，这有点违背了12 Factor Apps的原则，例如，在版本控制中的文件中存储env变量，但它确实起到了作用.

推荐答案

你可以试试这个:

switch(process.env.NODE_ENV) {
  case 'production':
    url = 'https://stackoverflow.com';
    break;
  case 'development':
  default:
    url = 'https://google.com';
}

Reactjs相关问答推荐

为什么我的功能React组件中的setInterval只更改一次值？

webpack 5中动态导入的路径

全局上下文挂钩-替代不起作用

NextJS(AppRouter)、Apollo(客户端)，在根布局中使用ApolloProvider时出错

关于同一位置的不同组件实例的react S规则被视为相同组件

生成Reaction Vite应用程序的停靠容器时无法识别环境变量

不同步渲染

左边框不在图表中显示

滚动视图样式高度没有任何区别

如何在 ChartJS 中创建此图表？在 NEXTjs 和 TSX 中

useState数组不更新

如何渲染子路径并触发react 路由父加载器？

为什么我会收到此错误：无法在我的react 包上读取 null 的属性(读取useState)？

使用带有搜索字符串的全局过滤器时如何在 React-Table 中进行精确匹配？

顶点图表甜甜圈项目边框半径

使用 React.lazy 调试 webpack 代码拆分

使用 useRef(uuid()) 的目的是什么？

仅在重新渲染后设置状态

axios post方法中的请求失败，状态码为500错误

Context Api React 的问题

实用课程推荐

相关教程推荐