React项目npm start前如何动态更新IP地址环境变量

原有方案失效的核心原因 #

• IP获取脚本鲁棒性太差：硬编码取Wi-Fi网卡、固定取索引为1的地址，换网络环境、换操作系统就会拿不到IP或者取到错误的IPv6地址；脚本里直接给变量赋值、写return的写法完全无效，Node执行脚本时是独立子进程，默认不会把内部变量传递给后续启动的服务进程。
• 启动命令逻辑错误：Windows下set 变量名=xxx的语法会把等号后所有字符串直接当成变量值，不会执行后面的node脚本拿返回值；分开执行node脚本和react-scripts时，两个进程环境变量完全隔离，脚本里设置的值根本传不到React项目里。

推荐方案：零额外依赖动态生成本地环境配置（跨全平台） #

Create React App默认会优先读取项目根目录下.env.local文件的环境变量，优先级高于你写死的.env文件，且这个文件本来就是用来存本地个性化配置的，适合存动态生成的本机IP地址，完全不需要额外装第三方包，兼容Windows、macOS、Linux所有系统和终端。

1. 把原来的IP获取脚本移到项目根目录，重命名为getIp.js，替换为以下兼容逻辑的代码：

const os = require('os');
const fs = require('fs');
const path = require('path');

// 遍历所有网卡获取可用内网IPv4地址
function getLocalIp() {
  const networkInterfaces = os.networkInterfaces();
  for (const interfaceName of Object.keys(networkInterfaces)) {
    // 跳过回环网卡、Docker/虚拟机虚拟网卡
    if (
      interfaceName.includes('Loopback') ||
      interfaceName === 'lo' ||
      interfaceName.includes('vEthernet') ||
      interfaceName.includes('docker')
    ) continue;

    for (const iface of networkInterfaces[interfaceName]) {
      // 筛选非内部回环的IPv4地址
      if (iface.family === 'IPv4' && !iface.internal) {
        return iface.address;
      }
    }
  }
  // 极端场景兜底返回本地回环地址
  return '127.0.0.1';
}

const localIp = getLocalIp();
const deployDomainValue = `http://${localIp}`;

// 自动写入.env.local配置文件
const envLocalPath = path.resolve(__dirname, '.env.local');
fs.writeFileSync(envLocalPath, `REACT_APP_DEPLOY_DOMAIN=${deployDomainValue}\n`);
console.log(`✅ 已自动设置服务访问地址：${deployDomainValue}`);

2. 修改package.json里的启动、打包命令，在执行react-scripts前先跑这个IP生成脚本：

{
  "scripts": {
    "start": "node getIp.js && react-scripts start",
    "build": "node getIp.js && react-scripts build"
  }
}

注意：记得把.env.local加到.gitignore规则里，不要把你本地生成的IP配置提交到代码仓库，避免影响其他协作者。

可选方案：直接注入环境变量（不生成配置文件） #

如果不想生成额外的.env.local文件，可以通过工具跨平台捕获脚本输出直接注入环境变量：

1. 安装开发依赖：

npm install cross-var cross-env -D

2. 简化getIp.js，只输出最终的访问地址即可：

const os = require('os');
function getLocalIp() {
  const networkInterfaces = os.networkInterfaces();
  for (const interfaceName of Object.keys(networkInterfaces)) {
    if (
      interfaceName.includes('Loopback') ||
      interfaceName === 'lo' ||
      interfaceName.includes('vEthernet') ||
      interfaceName.includes('docker')
    ) continue;
    for (const iface of networkInterfaces[interfaceName]) {
      if (iface.family === 'IPv4' && !iface.internal) return iface.address;
    }
  }
  return '127.0.0.1';
}
console.log(`http://${getLocalIp()}`);

3. 修改package.json启动命令：

{
  "scripts": {
    "start": "cross-env REACT_APP_DEPLOY_DOMAIN=$(cross-var node getIp.js) react-scripts start"
  }
}

如果是Windows默认CMD终端运行这个命令出现兼容问题，直接用上面的零依赖方案即可，没有任何终端适配成本。

内容的提问来源于stack exchange，提问作者Jashan Dhiman