如何在React-Admin中为开发与生产服务器配置不同URL并获取服务器IP？

首先得澄清一个关键问题：你没法在React-Admin的前端代码里直接获取服务器IP——因为React-Admin是运行在用户浏览器里的前端框架，而require("ip")是Node.js的服务器端模块，浏览器环境根本不支持这个模块，所以你之前的代码肯定跑不起来。

不过不用慌，有几种更靠谱的方式来实现「开发/生产服务器用不同接口URL」的需求，下面给你详细说：

方案一：使用环境变量（推荐） #

这是前端项目区分环境配置的标准做法，React-Admin通常基于Create React App或类似构建工具，天生支持环境变量。

1. 创建环境配置文件
   在项目根目录下创建两个文件：

• .env.development（开发环境用）：

  REACT_APP_API_URL=http://你的开发服务器IP:端口/api
  

• .env.production（生产环境用）：

  REACT_APP_API_URL=http://你的生产服务器IP:端口/api
  

  注意：变量名必须以REACT_APP_开头，否则Create React App不会把它注入到前端代码里。

2. 在dataProvider中引用环境变量
   修改你的dataProvider配置文件，直接读取这个环境变量：

import jsonServerProvider from 'ra-data-json-server';

// 从环境变量里获取接口地址
const apiUrl = process.env.REACT_APP_API_URL;
const dataProvider = jsonServerProvider(apiUrl);

export default dataProvider;

3. 对应环境构建/启动项目

• 启动开发环境：npm start（自动加载.env.development）
• 构建生产环境包：npm run build（自动加载.env.production）
  如果需要手动指定环境，也可以在package.json的scripts里加自定义命令：

"scripts": {
  "build:dev": "REACT_APP_API_URL=http://dev-server-ip/api npm run build",
  "build:live": "REACT_APP_API_URL=http://live-server-ip/api npm run build"
}

方案二：根据当前页面域名自动判断 #

如果不想用环境变量，也可以在运行时根据当前页面的域名/主机名来切换接口地址：

import jsonServerProvider from 'ra-data-json-server';

const getApiUrl = () => {
  const currentHost = window.location.hostname;
  // 开发环境的域名/IP，比如localhost或者dev.yourdomain.com
  if (currentHost === 'localhost' || currentHost === 'dev.yourdomain.com') {
    return 'http://dev-server-ip/api';
  }
  // 生产环境的域名/IP
  return 'http://live-server-ip/api';
};

const dataProvider = jsonServerProvider(getApiUrl());

export default dataProvider;

这种方式适合不需要重新构建，直接把同一份代码部署到不同服务器的场景，但灵活性不如环境变量。

为什么你之前的代码不行？ #

再强调一下：ip模块是Node.js专属的，只能在服务器端或者构建阶段运行，而React-Admin的代码最终会打包成静态文件在浏览器里执行，浏览器没有Node.js的模块系统，所以require("ip")会直接报错。

内容的提问来源于stack exchange，提问作者Byung Hun Park