|
1 | | -# 移动端使用指南 |
| 1 | +# 移动端与远程访问指南 |
2 | 2 |
|
3 | | -这篇文档介绍如何通过手机浏览器使用 Coder Studio。移动端适合查看状态、监控 Agent 进度和轻量操作。 |
| 3 | +这篇文档介绍如何通过手机浏览器使用 Coder Studio，以及如何把本机运行的 Coder Studio 安全地开放给其他设备或外网访问。移动端适合查看状态、监控 Agent 进度和轻量操作。 |
4 | 4 |
|
5 | 5 | ## 这篇文档解决什么问题 |
6 | 6 |
|
7 | | -如何在手机上访问和使用 Coder Studio，包括界面导航、会话管理和文件查看。 |
| 7 | +如何在手机上访问和使用 Coder Studio，包括局域网访问、远程访问、界面导航、会话管理和文件查看。 |
8 | 8 |
|
9 | 9 | ## 前置条件 |
10 | 10 |
|
11 | 11 | - Coder Studio 服务已在电脑上运行（`coder-studio serve` 或 `coder-studio open`） |
12 | | -- 手机和电脑在同一局域网 |
13 | | -- 手机浏览器访问 `http://<电脑IP>:<端口>` |
| 12 | +- 如果要从其他设备访问，建议先设置密码：`coder-studio config --password <强密码>` |
| 13 | +- 如果要从局域网其他设备访问，服务需要监听非 localhost 地址：`coder-studio config --host 0.0.0.0` |
| 14 | +- 修改配置后重启服务：`coder-studio serve --restart` |
14 | 15 |
|
15 | | -> 如果不知道本机 IP 和端口，执行 `coder-studio status` 查看 "Listen URL"。 |
| 16 | +> 如果不知道本机 IP 和端口，执行 `coder-studio status` 查看监听地址和端口。 |
| 17 | +
|
| 18 | +## 选择访问方式 |
| 19 | + |
| 20 | +| 场景 | 推荐方式 | 适合谁 | |
| 21 | +|------|----------|--------| |
| 22 | +| 手机和电脑在同一个 Wi-Fi | 局域网 IP 访问 | 家里、办公室内网、临时查看 | |
| 23 | +| 只有自己的设备需要远程访问 | Tailscale | 多设备开发者、长期使用 | |
| 24 | +| 临时给外网一个访问地址 | ngrok | 演示、临时测试、Webhook | |
| 25 | +| 有自己的域名并想长期暴露 | Cloudflare Tunnel | 固定域名、长期远程访问 | |
| 26 | + |
| 27 | +不建议直接把 Coder Studio 端口暴露到公网。至少先启用密码，并优先使用 Tailscale、ngrok 或 Cloudflare Tunnel 这类反向隧道/VPN 方案。 |
| 28 | + |
| 29 | +## 局域网访问 |
| 30 | + |
| 31 | +局域网访问适合手机和电脑在同一 Wi-Fi 下的情况。 |
| 32 | + |
| 33 | +### 1. 启用密码 |
| 34 | + |
| 35 | +```bash |
| 36 | +coder-studio config --password <强密码> |
| 37 | +``` |
| 38 | + |
| 39 | +### 2. 监听局域网地址 |
| 40 | + |
| 41 | +默认如果服务只监听 `localhost`，手机无法访问电脑上的服务。改成监听所有网卡： |
| 42 | + |
| 43 | +```bash |
| 44 | +coder-studio config --host 0.0.0.0 |
| 45 | +coder-studio serve --restart |
| 46 | +``` |
| 47 | + |
| 48 | +### 3. 查看地址 |
| 49 | + |
| 50 | +```bash |
| 51 | +coder-studio status |
| 52 | +``` |
| 53 | + |
| 54 | +在手机浏览器中访问： |
| 55 | + |
| 56 | +```text |
| 57 | +http://<电脑局域网IP>:<端口> |
| 58 | +``` |
| 59 | + |
| 60 | +例如： |
| 61 | + |
| 62 | +```text |
| 63 | +http://192.168.1.23:4173 |
| 64 | +``` |
| 65 | + |
| 66 | +### 4. 如果打不开 |
| 67 | + |
| 68 | +- 确认手机和电脑在同一个 Wi-Fi，且没有开启访客网络隔离 |
| 69 | +- 确认电脑防火墙允许该端口的入站连接 |
| 70 | +- 确认 Coder Studio 不是只监听 `localhost` |
| 71 | +- 如果正在使用 VPN、公司网络或校园网，网络可能禁止设备互访 |
| 72 | +- 在电脑上重新执行 `coder-studio status`，确认端口没有变化 |
| 73 | + |
| 74 | +## Tailscale 访问 |
| 75 | + |
| 76 | +Tailscale 适合“只让自己的设备访问”。它会把你的电脑、手机、平板加入同一个私有 tailnet，不需要把服务直接暴露到公网。 |
| 77 | + |
| 78 | +基本流程： |
| 79 | + |
| 80 | +1. 在电脑和手机上安装并登录 Tailscale |
| 81 | +2. 在电脑上启动 Coder Studio |
| 82 | +3. 启用密码并重启服务 |
| 83 | +4. 在手机上用电脑的 Tailscale IP 或 MagicDNS 名称访问 |
| 84 | + |
| 85 | +```bash |
| 86 | +coder-studio config --password <强密码> |
| 87 | +coder-studio config --host 0.0.0.0 |
| 88 | +coder-studio serve --restart |
| 89 | +tailscale status |
| 90 | +``` |
| 91 | + |
| 92 | +然后在手机浏览器访问： |
| 93 | + |
| 94 | +```text |
| 95 | +http://<电脑的 Tailscale IP>:<端口> |
| 96 | +``` |
| 97 | + |
| 98 | +如果你希望使用 Tailscale 的 HTTPS/Serve/Funnel 能力，请参考官方文档： |
| 99 | + |
| 100 | +- Tailscale Serve：适合 tailnet 内设备访问 |
| 101 | +- Tailscale Funnel：适合公开到互联网，风险更高，启用前确认访问控制和认证 |
| 102 | + |
| 103 | +## ngrok 临时外网访问 |
| 104 | + |
| 105 | +ngrok 适合临时把本机服务暴露给外网，例如演示或测试。它会生成一个公开 HTTPS 地址，并转发到本机端口。 |
| 106 | + |
| 107 | +先确认端口： |
| 108 | + |
| 109 | +```bash |
| 110 | +coder-studio status |
| 111 | +``` |
| 112 | + |
| 113 | +假设 Coder Studio 运行在 `4173`： |
| 114 | + |
| 115 | +```bash |
| 116 | +ngrok http 4173 |
| 117 | +``` |
| 118 | + |
| 119 | +ngrok 会显示一个 `https://...ngrok...` 地址。用手机打开这个地址即可。 |
| 120 | + |
| 121 | +使用 ngrok 前请注意： |
| 122 | + |
| 123 | +- 一定先设置 Coder Studio 密码 |
| 124 | +- 不要把生成的公网地址发给不可信的人 |
| 125 | +- 演示结束后停止 ngrok 进程 |
| 126 | +- 免费/付费能力、固定域名和访问控制以 ngrok 官方说明为准 |
| 127 | + |
| 128 | +## Cloudflare Tunnel 长期外网访问 |
| 129 | + |
| 130 | +Cloudflare Tunnel 适合你有自己的域名，并希望长期通过 HTTPS 访问本机服务。它通过 `cloudflared` 从你的电脑主动连接 Cloudflare，不需要在路由器上开公网入站端口。 |
| 131 | + |
| 132 | +临时 Quick Tunnel 示例： |
| 133 | + |
| 134 | +```bash |
| 135 | +cloudflared tunnel --url http://localhost:<端口> |
| 136 | +``` |
| 137 | + |
| 138 | +长期使用建议在 Cloudflare Zero Trust 中创建受管理的 Tunnel，并绑定自己的域名，例如： |
| 139 | + |
| 140 | +```text |
| 141 | +https://coder.example.com -> http://localhost:<端口> |
| 142 | +``` |
| 143 | + |
| 144 | +使用 Cloudflare Tunnel 前请注意： |
| 145 | + |
| 146 | +- 一定先设置 Coder Studio 密码 |
| 147 | +- 更推荐配合 Cloudflare Access 或其他身份校验 |
| 148 | +- 如果电脑关机、休眠或 `cloudflared` 停止，远程地址也会不可用 |
| 149 | +- 固定域名和访问策略以 Cloudflare 官方文档为准 |
| 150 | + |
| 151 | +## 安全建议 |
| 152 | + |
| 153 | +- 只在可信网络中使用局域网访问 |
| 154 | +- 开放给其他设备前先执行 `coder-studio config --password <强密码>` |
| 155 | +- 不要把无密码的 Coder Studio 暴露到公网 |
| 156 | +- 不要在公开链接中打开敏感项目，除非你确认认证、网络和访问控制都已配置好 |
| 157 | +- 如果只是自己跨设备使用，优先选择 Tailscale，而不是直接公网暴露 |
| 158 | +- 临时分享结束后，停止 ngrok、Cloudflare Tunnel 或 Tailscale Funnel |
16 | 159 |
|
17 | 160 | ## 移动端界面结构 |
18 | 161 |
|
|
89 | 232 | 确保 Provider 已正确安装且服务在运行。 |
90 | 233 |
|
91 | 234 | **Q：手机上怎么知道访问地址？** |
92 | | -在电脑上执行 `coder-studio status`，找到 "Local URL" 对应的地址。确保手机和电脑在同一网络。 |
| 235 | +在电脑上执行 `coder-studio status`，找到当前监听地址和端口。如果手机和电脑在同一局域网，访问 `http://<电脑局域网IP>:<端口>`。如果使用 Tailscale，访问 `http://<电脑 Tailscale IP>:<端口>`。 |
| 236 | + |
| 237 | +**Q：为什么电脑能打开，手机打不开？** |
| 238 | +常见原因是服务只监听 `localhost`、手机和电脑不在同一网络、Wi-Fi 开启了设备隔离，或电脑防火墙阻止端口访问。先执行 `coder-studio config --host 0.0.0.0`，再执行 `coder-studio serve --restart`。 |
| 239 | + |
| 240 | +**Q：可以直接把端口映射到公网吗？** |
| 241 | +不建议。Coder Studio 能操作本机项目、终端和 AI 会话，公网暴露前至少要启用密码。更推荐使用 Tailscale、ngrok 或 Cloudflare Tunnel。 |
| 242 | + |
| 243 | +## 参考文档 |
| 244 | + |
| 245 | +- [Tailscale Funnel 文档](https://tailscale.com/docs/features/tailscale-funnel) |
| 246 | +- [Tailscale Funnel CLI 参考](https://tailscale.com/docs/reference/tailscale-cli/funnel) |
| 247 | +- [ngrok HTTP Endpoints 文档](https://ngrok.com/docs/http/) |
| 248 | +- [Cloudflare Tunnel 文档](https://developers.cloudflare.com/tunnel/) |
| 249 | +- [Cloudflare Quick Tunnels](https://try.cloudflare.com/) |
93 | 250 |
|
94 | 251 | ## 下一步 |
95 | 252 |
|
|
0 commit comments