|
思路 我们使用Claude Code时，正常需要通过命令行与其交互，但这往往要求我们需要在一台电脑前待着。 思考一下，我们与Claude Code的交互，实质上只是两种： 事实上，要实现和它的交互，我们完全不必使用电脑。也就是说，理论上我们完全可以只使用手机，以一种方式连接到电脑，实现交互。 这么说来，已经有一种现成的朴素方法：通过手机远程控制电脑，然后和Claude Code进行交互。但这种朴素方法在交互时有所不便，例如输入文字的输入法问题、选择批准/拒绝时需要使用方向键等。 如果在移动设备上有用户友好的应用，或是使用一个类似vscode的server版本，那么体验就会好很多。 那么剩下的就是网络配置上的问题了。我的需求是，即使和我的电脑不在一个局域网内，也能可以连接在我电脑上运行的该服务。 我想到了Cloudflare Tunnels，可用于打洞，再通过Cloudflare绑定自己的域名即可实现远程访问。 Cloudflare Tunnels 是由 Cloudflare 提供的免费服务，可用于安全地将本地或私有网络中的服务暴露到公网，而无需开放防火墙端口、配置公网 IP 或使用反向代理（如 Nginx）。
前置要求想要和我一样远程指挥Claude Code干活，需要以下前置条件： - 电脑本地可用的Claude Code；
- 一个绑定在Cloudflare上的域名。
详细教程安装claude-code-webui首先确保已安装Node.js 20。 克隆项目：
安装依赖。
启动服务器
此时在本地访问localhost:5173即可测试是否可以在网页中正常使用Claude Code。初次使用是需要设置一个唯一的用户名和密码。一切正常后，我们继续配置。 Cloudflare Tunnels配置- Cloudflare Tunnels 是由 Cloudflare 提供的免费服务，可用于安全地将本地或私有网络中的服务暴露到公网，而无需开放防火墙端口、配置公网 IP 或使用反向代理（如 Nginx）。
配置时，按照说明下载cloudflared命令行工具。下载后，注意使用管理员权限运行提示的命令。连接成功后，网页下方应该会显示已连接的连接器。 下一步，第一行填写的是需要选择你的域名，第二行选择本地服务的URL（注：url注意选择你本地的端口，默认为5173） 一步完成后，在手机上访问你配置的域名，应该就能正常访问服务了。 Cloudflare Zero Trust（可选）由于现在该域名直接通过Cloudflare Tunnels直接连接到电脑，且该项目是一个较新的项目，可能存在潜在的安全问题。我们还可以给服务添加外部鉴权，通过配置Cloudflare Zero Trust进一步加强安全。 注意，这一步需要先完成Free Plan的支付方式认证。使用国区PayPal可成功绑定。
前往Access > 应用程序，选择创建。 公共主机名填写前面的域名。 接下来需要添加策略，这里我选择的是使用邮箱验证，值填写你的邮箱即可。 返回在创建的应用程序中，选择该策略。这样在访问域名的时候，需要先向你的邮箱发送一个验证码，才能访问。 现在就可以在手机上指挥Claude Code了。 在下方可以切换模式，包括自动接受编辑、Plan mode和Bypass permissions（跳过权限检查）等模式。 Cloudflare的Tunnels在电脑本地会以守护进程的方式自启动，当需要远程使用的时候，使用npm run dev启动项目即可。有需要的话，读者也可以自行设置项目的自动启动。
| 
微信登陆 
