如何在React组件中获取server.js文件内定义的ipAdress变量

问题原因 #

• 模块未导出：你当前的server.js采用CommonJS规范编写，仅定义了ipAdress变量，没有配置对外导出规则，外部文件无法直接引入该变量。
• 引入路径无效：代码中写的././server.js是非法相对路径，需要根据Container组件和server.js的实际相对位置调整路径规则。
• 前后端运行环境隔离：server.js是运行在Node.js服务端的代码，依赖的ip包为服务端专用包，无法在浏览器端的React runtime中运行，即使调整导出和路径也无法拿到正确的服务端IP，甚至会直接打包报错。

正确实现方案 #

根据你的实际需求选择对应方案：

方案1：需要获取用户端本地IP #

直接在React前端代码中通过Web API获取，无需调用服务端逻辑：

// 在Container组件内直接调用即可
const getLocalIp = async () => {
  const peer = new RTCPeerConnection({ iceServers: [] })
  peer.createDataChannel('')
  const offer = await peer.createOffer()
  await peer.setLocalDescription(offer)
  return new Promise(resolve => {
    peer.onicecandidate = (e) => {
      if (!e.candidate) return
      const ip = e.candidate.address
      resolve(ip)
    }
  })
}

方案2：需要获取后端服务的部署IP #

两种实现方式可选：

1. 环境变量注入：在React项目的.env配置文件中添加配置项REACT_APP_SERVER_IP=你的服务端IP，在组件内直接通过process.env.REACT_APP_SERVER_IP调用即可，打包时会自动替换为实际值。
2. 后端暴露接口：在server.js中新增一个接口路由，直接返回ipAdress变量值，React组件通过fetch/axios调用该接口拿到服务端IP。

内容的提问来源于stack exchange，提问作者dvid vid