SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场mobile-dev-server-sandbox

mobile-dev-server-sandbox

测试与质量

查看项目

更新于 10-18 13:23

技能介绍

历史版本与核实范围

引用固定历史提交75814da2c5e4decc546b6e958d6503ee199f4e97中的完整主指南。发布者于2026-07-06 14:14:04 UTC移除了不能再编译的React Native/Expo移动原型及相关技能；本页是移除前历史资料，不是当前可用安装说明。2026-10-18 UTC核对精确文件、Git blob及完整正文，中文为全文翻译；代码示例和原始元数据按原样保留。文档中的安装、授权、设备、清理或发布命令均为历史资料，本站未执行；当前安装与运行效果未实测。原条目仓库、名称、标识、网址、安装命令及安装量保持原值。

发布者历史原文

官方停用记录

完整主指南

移动端 + dev-server-sandbox

当需要将移动应用连接到隔离后端时使用此技能，尤其是在 Expo web 中可通过 Chrome MCP 由代理进行交互的 UI 任务。

此工作流中的重要认证行为

make dev-server-sandbox 委托给 make dev-server，且开发服务器以 --no-auth 运行。

对于此沙箱流程：

  • 将移动端 Auth Token 留空
  • 不要期望 token 不匹配会成为有效的失败模式
  • 仅在有意测试启用认证的服务器路径时才配置 token

快速开始（确定性）

首选：一条命令启动后端 + 代理 + 移动 web

BACKEND_PORT=3900 \
VITE_PORT=5174 \
MOBILE_CORS_PROXY_PORT=3901 \
KEEP_SANDBOX=1 \
make mobile-sandbox

这会启动：

  • 位于 127.0.0.1:3900 的隔离后端沙箱（dev-server-sandbox）
  • 位于 127.0.0.1:3901 → 转发到后端的本地 CORS 代理
  • 位于 http://localhost:8081 的 Expo web 应用

代理存在的原因：

  • 针对 /orpc 的后端来源校验被有意设置得很严格
  • 在开发中移动 web 和后端使用不同的来源（:8081 与 :3900）
  • 代理在保持后端严格性的同时，支持本地基于浏览器的移动 UI 测试

手动路径（如需使用独立终端）

  1. 启动隔离后端沙箱
BACKEND_PORT=3900 \
VITE_PORT=5174 \
KEEP_SANDBOX=1 \
make dev-server-sandbox
  1. 启动本地移动 CORS 代理
MOBILE_BACKEND_PORT=3900 \
MOBILE_CORS_PROXY_PORT=3901 \
# Optional when the mobile origin is not localhost:8081:
# MOBILE_CORS_ALLOWED_ORIGINS="http://localhost:8081,http://127.0.0.1:8081"
make mobile-cors-proxy
  1. 启动 Expo web
EXPO_PUBLIC_BACKEND_URL=http://127.0.0.1:3901 make mobile-web

EXPO_PUBLIC_BACKEND_URL 现在为 Expo 的 extra.mux.baseUrl 默认值提供数据。设置仍可覆盖它。

在应用设置中配对连接设置

在移动 UI（http://localhost:8081）中：

  • 打开 Settings
  • 将 Base URL 设置为 http://127.0.0.1:3901（代理）
  • 清除 Auth Token（或将其留空）

此后，该 URL 会持久保存在应用存储中。

代理工作流检查清单

复制此检查清单并在工作时保持更新：

Mobile sandbox progress:
- [ ] Step 1: Start backend + proxy + mobile (`make mobile-sandbox`)
- [ ] Step 2: Verify Base URL points to proxy (:3901) and token is empty
- [ ] Step 3: Verify project/workspace list loads
- [ ] Step 4: Implement UI change
- [ ] Step 5: Re-verify via Chrome MCP + screenshots

使用 bash.monitor 的代理用法

对于一条命令启动移动沙箱的情况，将其作为受监控的后台 bash 运行。这样在 Mux 因后端/代理/移动端就绪或启动错误而被唤醒时，代理可以结束其回合或准备浏览器自动化。

bash({
  script:
    "BACKEND_PORT=3900 VITE_PORT=5174 MOBILE_CORS_PROXY_PORT=3901 KEEP_SANDBOX=1 make mobile-sandbox",
  display_name: "Mobile Sandbox",
  run_in_background: true,
  timeout_secs: 1800,
  monitor: {
    filter: "localhost:8081|127\\.0\\.0\\.1:3901|ready|ERROR|EADDRINUSE|failed|Failed",
    cooldown_ms: 1000,
    max_events: 5,
  },
});

将唤醒作为就绪/错误信号。如果你需要确切的端口块或周围日志，调用一次 task_await({ task_ids: ["bash:Mobile Sandbox"], timeout_secs: 0 })。

Chrome MCP 前置条件

  • 确保已安装 Google Chrome 且 MCP 可以发现它。
  • 如果 MCP 提示缺少 Chrome 可执行文件，请在重试前安装 Chrome。
  • 使用 MCP 时避免手动终止 Chrome 进程（pkill、kill -9）；如果 MCP 卡住，请改为重启工作区。

Chrome MCP 循环（用于 UI 工作）

为实现可靠的 UI 自动化，请使用此确切顺序：

  1. chrome_navigate_page → http://localhost:8081
  2. 使用移动视口执行 chrome_emulate：
    • 宽度 390
    • 高度 844
    • deviceScaleFactor: 3
    • isMobile: true
    • hasTouch: true
  3. chrome_take_snapshot 以识别可交互元素
  4. chrome_click / chrome_fill 以驱动流程
  5. 在每个有意义的步骤后使用 chrome_take_screenshot 进行视觉确认

可选：直接设备测试（手机/平板）

如果从物理设备进行测试，请在 LAN 上暴露后端：

BACKEND_HOST=0.0.0.0 \
BACKEND_PORT=3900 \
VITE_PORT=5174 \
KEEP_SANDBOX=1 \
make dev-server-sandbox

然后运行一个设备可访问的代理主机，并将移动端 Base URL 设置为该代理 URL。

验证循环（不要跳过）

  1. 后端可访问：
    • http://127.0.0.1:3900/health 有响应
  2. 代理可访问：
    • http://127.0.0.1:3901/health 有响应
  3. 移动端已连接：
    • 项目列表加载时没有认证/CORS 错误
  4. 流式传输正常工作：
    • 打开工作区并确认实时聊天更新
  5. 如果任何检查失败，修复配置并重新运行相同的检查。

故障排查

  • 意外的认证错误：此沙箱流程为 no-auth；确认 token 为空。
  • 更改设置后立即出现 Failed to fetch：从 Settings 返回后按一次 Retry；初始 fetch 可能仍反映过期状态。
  • 代理返回 Origin not allowed：在 MOBILE_CORS_ALLOWED_ORIGINS 中包含你的移动 web 来源。
  • 连接被拒绝：端口错误或后端/代理未运行。
  • 后端返回 CORS 403：验证 Base URL 是代理 :3901（不是后端 :3900）。
  • 桌面浏览器可用，真实设备失败：设备无法使用 localhost；请使用 LAN/VPN IP。
  • 退出后沙箱消失：使用 KEEP_SANDBOX=1 重新运行。

实现参考

在需要确认行为时使用这些文件：

  • scripts/dev-server-sandbox.ts
  • scripts/mobile-cors-proxy.ts
  • mobile/src/orpc/client.ts
  • mobile/src/contexts/AppConfigContext.tsx
  • mobile/src/shims/backendBaseUrl.ts
  • mobile/app.config.js
  • mobile/metro.config.js
  • src/node/orpc/server.ts
  • src/node/services/serverLockfile.ts
  • Makefile 目标：mobile-sandbox、mobile-cors-proxy、dev-server-sandbox、mobile-web、test-mobile、typecheck-react-native

原始元数据

name: mobile-dev-server-sandbox
description: Connects Mux mobile (Expo web/native) to an isolated dev-server sandbox with deterministic port setup, backend pairing, and Chrome MCP interaction. Use when implementing or validating mobile features against a sandboxed Mux backend.