基于Tailscale实现Claude Code WebUI远程安全访问教程

前两天折腾 Claude Code WebUI 这个项目，编译完成功运行后，突然意识到一个问题：如果只能在本地访问，这个 Web UI 相比 CLI 的意义在哪？

文档里写着 “designed for local use”（为本地使用设计），还特别强调不要暴露到公网。听起来很安全，但想想真实场景：

• 上班时在公司电脑运行 Claude Code
• 下班回家想继续写代码，难道要 SSH 到公司电脑开 CLI？
• 通勤路上想用手机看看代码生成进度？
• 躺床上用 iPad 继续开发？

如果做不到这些，Web UI 只是把 CLI 换了个皮肤而已。 所以我决定：必须能远程访问，而且要安全。

方案选择：为什么是 Tailscale?

快速对比了几个方案：

方案	优点	缺点	结论
SSH 端口转发	熟悉	每次连接都要输命令，麻烦	太原始
Nginx + Basic Auth	能加密码	需要公网 IP 或域名，配置复杂	太重
Cloudflare Tunnel	免费，自动 HTTPS	域名每次重启会变，流量过 Cloudflare	可选
Tailscale	零配置，端到端加密，穿透 NAT	需要装客户端	最优

选 Tailscale 的理由：

1. 5 分钟配置完成（事实证明确实如此）
2. 端到端加密，比大多数 VPN 还安全
3. 自动穿透 NAT，公司防火墙也能用
4. 全平台支持，手机电脑都有 App
5. 免费版够用（100 台设备）

实际操作流程

1. 安装 Tailscale（macOS）

brew install tailscale
sudo brew services start tailscale

第一步就遇到个小插曲：brew services start 需要 sudo 权限，会警告要手动 sudo rm 卸载。不过这是正常的，Tailscale 需要 root 权限创建虚拟网卡。

2. 登录认证

sudo tailscale up

执行后会输出一个 URL，浏览器自动打开（或手动复制），用 Google/GitHub/Microsoft 账号登录就行。

登录成功标志：

Your device MyMac-mini is logged in to the
yourname@gmail.com tailnet.

3. 查看分配的 IP

tailscale ip -4

输出类似：100.x.x.x

这就是你电脑在 Tailscale 虚拟网络里的地址，全球唯一，永久不变（除非你删除设备）。

4. 启动 WebUI

原来的启动方式：

./dist/claude-code-webui # 默认只监听 127.0.0.1

改成绑定所有网络接口：

./dist/claude-code-webui --host 0.0.0.0 --port 8080

为什么用 0.0.0.0：

• 127.0.0.1：只能本机访问
• 0.0.0.0：监听所有网络接口（包括 Tailscale 虚拟网卡）

5. 手机端配置

1. App Store 搜索 “Tailscale”，安装
2. 用同一个账号登录（和电脑同一账号）
3. 连接成功后，能看到 “MyMac-mini” 设备
4. 浏览器访问：http://100.x.x.x:8080

理论上 到这里就能用了。但实际遇到了两个坑。

遇到的坑

坑 1：端口被占用

Failed to start server: AddrInUse: Address already in use (os error 48)

检查发现是 VS Code 占了 8080：

lsof -i :8080
# Code Helper  15056  ... localhost:http-alt (LISTEN)

解决方法：

# 方案1：换端口
PORT=3001 ./dist/claude-code-webui

# 方案2：杀掉占用进程（我选这个）
kill 15056

坑 2：iOS 后台断线

手机上访问成功了，但发现消息发送后没响应。查看 Tailscale 状态：

tailscale status | grep "iphone"
# 100.x.x.x  iphone-12  iOS  offline, last seen 1m ago

原因： iOS 会杀后台进程，Tailscale 被挂起了。

解决方法：

1. 打开 Tailscale App 设置
2. 开启 “Always On” 或 “On-Demand”
3. 保持 App 在后台运行（不要完全退出）

坑 3：中继连接慢

再次查看状态发现：

tailscale status | grep "iphone"
# relay "hkg"  ...

原因： 手机和电脑没有直连，走的是香港中继服务器。

为什么会用中继：

• 两台设备在不同网络
• NAT 穿透失败
• Tailscale 自动降级到中继模式

影响：

• 延迟高（10-30 秒才有响应）
• 流式响应容易中断

解决方法： 如果手机和电脑在同一 WiFi，直接用本地 IP 更快：

# 查看本地 IP
ifconfig | grep "inet " | grep -v 127.0.0.1
# 192.168.1.100

# 手机访问
http://192.168.1.100:8080 # 秒回，流畅

两种访问方式对比：

方式	地址	速度	使用场景
WiFi 直连	http://192.168.1.100:8080	快	同一网络
Tailscale	http://100.x.x.x:8080	慢但能用	随时随地

最终效果

配置完成后，真的很爽。

昨晚躺床上用手机继续调试代码，通勤路上在地铁里也能看生成进度。甚至出差住酒店，连上酒店 WiFi 就能访问家里的开发环境。只要手机有网，全球任何地方都能用。

安全性方面也不用担心。Tailscale 用的是 WireGuard 协议做端到端加密，只有我账号下的设备能访问，不需要把服务暴露到公网。公司那种变态级别的防火墙也能穿透，这点不得不说很厉害。

一些思考

Web UI 的真正价值在哪

折腾完才发现，Web UI 的价值不在于界面好看，而在于真正能随时随地访问。

CLI 确实强大，但你不可能在手机上开终端敲命令吧？Web UI 就不一样了，手机上快速看看代码生成进度，iPad 上翻翻对话历史，在不同设备间无缝切换，这才是实用场景。

Tailscale 和传统 VPN 有什么不同

传统 VPN 要搭中心服务器，流量要绕一圈，还得配证书、路由表，贼麻烦。Tailscale 就简单多了，点对点连接，配置就是登录一下账号，NAT 穿透自动处理。

本质区别是：Tailscale 是 “虚拟局域网”，不是 “远程网络代理”。你的设备就像在同一个 WiFi 下，直接通信。

绑定 0.0.0.0 安全吗

可能有人会担心：绑定 0.0.0.0 不是很危险吗？

关键在于网络隔离。Tailscale 的虚拟网卡是独立网络，只有你授权的设备能加入。即使你绑定了 0.0.0.0，外网也访问不到，因为它只监听 Tailscale 这个虚拟网络。

打个比方：就像家里 WiFi，路由器确实监听所有设备，但只有知道密码的人才能连上。

命令速查

# 安装和启动
brew install tailscale
sudo brew services start tailscale
sudo tailscale up

# 查看状态
tailscale status
tailscale ip -4

# 启动 WebUI
./dist/claude-code-webui --host 0.0.0.0 --port 8080

# 查看端口占用
lsof -i :8080

# 查看本地 IP
ifconfig | grep "inet " | grep -v 127.0.0.1

后续

如果要在团队内共享（比如给同事演示），可以：

1. 在 Tailscale 后台邀请同事加入你的 tailnet
2. 设置 ACL 控制谁能访问哪些设备
3. 共享节点（Share Node）功能

但对于个人使用，现在的配置已经足够了。如果你想了解更多此类实用的开发者工具和教程，欢迎前往 云栈社区 探索交流。

---

项目地址：https://github.com/sugyan/claude-code-webui
Tailscale：https://tailscale.com