如何在iPad Mini上运行多前端ReactJS应用？

基础网络排查 #

• 确保iPad Mini和开发设备处于同一Wi-Fi网络，确认网络未开启设备隔离（部分企业/公共网络会限制设备间互访）。
• 关闭开发设备的本地防火墙（Windows Defender防火墙、Mac防火墙），或为React开发服务器的端口添加允许访问规则。

正确配置React开发服务器 #

• 启动服务器时绑定到0.0.0.0，允许所有IP访问：

  # Create React App项目直接启动
  HOST=0.0.0.0 npm start
  # 或修改package.json的scripts字段
  "start": "HOST=0.0.0.0 react-scripts start"
  

• 确认服务器启动日志中显示的访问地址包含你的本地IP（如http://192.168.x.x:3000），而非仅localhost:3000。

处理多前端架构的特殊配置 #

• 若为微前端（如Module Federation）架构：
  • 每个子应用的开发服务器都需绑定0.0.0.0，并通过本地IP暴露服务。
  • 主应用配置子应用远程地址时，替换localhost为开发设备的本地IP。
• 若使用BrowserRouter，需设置PUBLIC_URL环境变量确保路由正确：

  PUBLIC_URL=http://192.168.x.x:3000 npm start
  

iPad Mini端访问验证 #

• 在Safari中直接输入开发设备的本地IP+端口（如http://192.168.1.100:3000）。
• 若访问失败，先测试网络连通性：在iPad上尝试访问开发设备的其他服务（如http://192.168.x.x:80），或关闭iPad的VPN/代理设置。

备选方案：打包后本地部署 #

• 先打包React应用：

  npm run build
  

• 使用静态文件服务器部署打包产物：

  npm install -g serve
  serve -s build -l 3000 --host 0.0.0.0
  

• 再在iPad上访问相同的IP+端口即可。

内容的提问来源于stack exchange，提问作者Ujjwal Gautam