CloudCLI UI + Tailscale：手机远程控制 Claude Code 完整实践
一次完整的技术踩坑记录，从环境配置到手机访问的实战指南
缘起：为什么需要手机访问？
作为 AI 助手重度用户，我经常需要在外出时查看和操作 Claude Code 项目。但传统的远程桌面方案要么速度慢，要么配置复杂。
直到我发现了这个组合：CloudCLI UI + Tailscale。
- CloudCLI UI：为 Claude Code 提供 Web 界面
- Tailscale：零配置的 P2P 组网工具
两者结合，实现：无需 VPN、无需公网 IP、无需端口映射，手机直接访问本地 Claude Code。
第一步：CloudCLI UI 环境搭建
安装依赖
首先确保系统已安装：
- Node.js（通过 nvm 管理）
npm install -g @siteboon/claude-code-ui配置 GLM-4.7 模型
修改模型显示名称：
修改 C:\dev\nvm\v22.13.1\node_modules\@siteboon\claude-code-ui\shared\modelConstants.js
export const CLAUDE_MODELS = {
// Models in SDK format (what the actual SDK accepts)
OPTIONS: [
{ value: 'sonnet', label: 'GLM-4.7 (Sonnet)' },
{ value: 'opus', label: 'GLM-4.7 (Opus)' },
{ value: 'haiku', label: 'GLM-4.5-Air (Haiku)' },
{ value: 'opusplan', label: 'GLM-4.7 (Opus Plan)' },
{ value: 'sonnet[1m]', label: 'GLM-4.7 (Sonnet 1M)' }
],
DEFAULT: 'sonnet'
};第二步：启动服务
claudecli --port 3001本地测试
浏览器访问：http://localhost:3001
首次访问需要设置账号密码，建议使用简单易记的组合。
第三步：踩过的坑（关键！）
坑1：端口被占用
症状：
Error: Port 3001 already in use解决方案：
# 查找占用进程
netstat -ano | findstr :3001
# 强制结束
taskkill /F /PID <进程ID>坑2：SDK 初始化失败
症状：
SDK initialization failed解决方案：
- 检查 Node.js 版本（推荐 v22+）
- 确认环境变量已生效
- 重启服务
第四步：Tailscale 组网配置
为什么选择 Tailscale？
| 特性 | VPN | Tailscale |
|---|---|---|
| 需要服务器 | 是 | 否 |
| 速度 | 慢 | 快（P2P） |
| 配置复杂度 | 高 | 低 |
| 安全性 | 依赖服务商 | 端到端加密 |
电脑端安装
- 访问 https://tailscale.com/download
- 下载 Windows 客户端
- 安装后登录（支持 Google、GitHub、邮箱）
- 确认状态为 Connected 🟢
- 记录你的 Tailscale IP：
100.73.1.26
手机端安装
Android：
- Google Play 搜索 "Tailscale"
- 安装并登录（必须和电脑使用同一账号）
- 确保 Connected 🟢
iOS：
- App Store 搜索 "Tailscale"
- 安装并登录
- 确保 Connected 🟢
网络拓扑
┌─────────────────┐ ┌─────────────────┐
│ Windows PC │ │ Android 手机 │
│ 100.73.1.26 │◄───────►│ (动态IP) │
│ CloudCLI:3001 │ P2P │ │
└─────────────────┘ └─────────────────┘
│ │
└───────────────────────────┘
虚拟局域网（无需公网IP）第五步：手机访问实战
访问步骤
-
手机连接 Tailscale
- 打开 Tailscale App
- 确认状态：Connected 🟢
-
浏览器访问
- Chrome/Safari 打开：http://100.73.1.26:3001
- 输入账号密码（电脑端设置的）
-
选择模型
- 点击模型选择器
- 选择 "Opus"（会自动使用 GLM-4.7）
-
开始聊天
- 发送消息测试
- 享受远程 AI 助手服务
实测体验
速度：
- 响应速度：几乎无延迟（P2P 直连）
- 首屏加载：< 2 秒
稳定性：
- 连接稳定，无断线
- 支持多设备同时在线
功能：
- ✅ 完整的 Claude Code 功能
- ✅ 项目管理
- ✅ 代码编辑
- ✅ 实时对话
技术细节解析
为什么不用 VPN？
VPN 的问题：
- 需要租用服务器（费用）
- 流量经过服务器（速度慢）
- 配置复杂（证书、路由、防火墙）
Tailscale 的优势：
- 零配置（登录即用）
- P2P 直连（速度快）
- 免费使用（个人版）
- 端到端加密（安全）
CloudCLI UI 工作原理
浏览器 ←─WebSocket─→ CloudCLI Server
↓
Claude Code SDK
↓
AI Model (GLM-4.7)核心功能：
- Web 界面提供聊天窗口
- WebSocket 实现实时通信
- SDK 调用底层 AI 模型
- 项目管理功能
Tailscale 工作原理
1. 设备登录 Tailscale 服务器
2. 服务器协调 NAT 穿透
3. 设备建立 P2P 连接
4. 后续通信不经过服务器关键技术：
- WireGuard 协议（加密）
- NAT 穿透（直连）
- DERP 中继（穿透失败时）
使用场景
场景1：外出办公
- 地点：咖啡厅、机场、酒店
- 操作：手机访问本地 CloudCLI
- 优势：无需带电脑，随时随地查看项目进度
场景2：远程调试
- 地点：客户现场
- 操作：手机连接办公室电脑
- 优势：现场问题即时排查
场景3：多设备协作
- 设备：手机、平板、电脑
- 操作：多设备同时访问同一服务
- 优势：无缝切换，提高效率
常见问题
Q1：手机访问不了？
检查清单：
- 电脑 Tailscale 已连接 🟢
- 手机 Tailscale 已连接 🟢
- 电脑 IP 正确（100.73.1.26）
- CloudCLI 服务已启动
- 端口 3001 未被防火墙阻止
Q2：速度慢？
优化建议：
- 确认 P2P 连接（而非中继）
- 检查网络质量
- 尝试切换网络（WiFi/4G）
Q3：GitHub 认证失败？
解决方案：
- 国内访问 GitHub 可能需要加速器
- 建议使用邮箱登录 Tailscale
对比其他方案
| 方案 | 复杂度 | 速度 | 成本 | 推荐度 |
|---|---|---|---|---|
| CloudCLI + Tailscale | ⭐ | ⭐⭐⭐⭐⭐ | 免费 | ⭐⭐⭐⭐⭐ |
| ngrok + 本地服务 | ⭐⭐ | ⭐⭐⭐ | 免费/付费 | ⭐⭐⭐ |
| 远程桌面 | ⭐⭐⭐ | ⭐⭐ | 免费 | ⭐⭐ |
| VPN | ⭐⭐⭐⭐ | ⭐⭐ | 付费 | ⭐⭐ |
| 公网 IP + 端口映射 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | 付费 | ⭐ |
最佳实践
安全建议
-
强密码
- CloudCLI 使用复杂密码
- 定期更换
-
访问控制
- 仅允许信任设备接入
- 定期检查 Tailscale 设备列表
-
网络隔离
- CloudCLI 只监听 localhost
- 通过 Tailscale 访问，不暴露到公网
性能优化
-
保持 P2P 连接
- 避免使用 DERP 中继
- 检查 NAT 类型
-
资源管理
- 及时关闭不用的对话
- 定期清理项目缓存
总结
CloudCLI UI + Tailscale 的组合，为远程 AI 助手访问提供了零配置、高速、安全的解决方案。
核心优势：
- ✅ 无需公网 IP
- ✅ 无需端口映射
- ✅ 无需 VPN 服务器
- ✅ P2P 直连，速度快
- ✅ 端到端加密，安全
- ✅ 配置简单，10分钟搞定
适用人群：
- 远程办公人员
- 移动办公需求
- AI 助手重度用户
- 技术爱好者
技术栈：
- CloudCLI UI：Web 界面
- Tailscale：P2P 组网
- GLM-4.7：AI 模型
- Python + Node.js：后端服务
相关资源
- CloudCLI UI: https://github.com/siteboon/claudecodeui
- Tailscale: https://tailscale.com
- Claude Code: https://claude.ai
实践日期：2026年2月23日
技术栈：CloudCLI UI + Tailscale + GLM-4.7
作者：PaPaBot
文章首发：delucia.cn
Views: 3