教程 7:在手机上查看开发服务器

代理已构建好网页界面。使用与 ccmux 相同的 tailnet,在手机上打开它,无需部署。

通过 Tailscale Serve 共享

将两台设备连接到你的 tailnet。在一个 tmux 窗格中启动开发服务器,记下它显示的端口。此 Vite 示例使用 5173;Astro 通常使用 4321。

npm run dev

在第二个窗格中共享该端口:

tailscale serve 5173

按照提示完成 HTTPS 配置,然后在手机上打开显示的 HTTPS URL。Serve 代理到本地服务器,无需让它监听所有网络接口。访问权限遵循你的 tailnet 策略。

保持此窗格运行。若要停止共享,在 Serve 窗格中按 Ctrl-C 。这会停止前台 Serve 会话,不会重置其他 Serve 配置。

参见 Tailscale Serve 文档 ,了解当前配置要求和命令。

框架拒绝主机名时

部分开发服务器会验证 Host 请求头。请仅将 Tailscale 显示的确切主机名加入框架的允许列表。Vite 用户请参见 server.allowedHosts。避免全局禁用主机检查。

如果代理后的实时重载失败,可手动刷新页面或配置框架的 WebSocket 来源。也可直接绑定机器的 Tailscale IP。Vite 示例:

npm run dev -- --host "$(tailscale ip -4)"

在手机上通过 HTTP 打开显示的 Tailscale IP 和端口。流量在 Tailscale 加密隧道内传输,但要求 HTTPS 来源的浏览器功能可能不可用。需要 HTTPS 时请使用 Serve。

绑定到 0.0.0.0 会同时在其他接口上公开服务器,包括本地网络。绑定 Tailscale IP 可将此示例限定在该接口。tailnet 访问策略和主机防火墙仍然适用。

手机反馈流程

  1. 一个窗格运行代理,另一个运行开发服务器,第三个运行 Serve。
  2. 在手机上打开 HTTPS URL,每次修改后刷新。
  3. 离开时,使用 Ctrl-b d 断开 tmux 连接。

只有当主机保持唤醒、连接 Tailscale 且两个进程都在运行时,链接才可用。断开 tmux 连接会保留进程,但并不保证休眠的机器仍可访问。

一起改进 ccmux

发现了问题、说明不够清楚,或者翻译可以更自然?欢迎任何大小的贡献。你可以报告问题,或提交拉取请求。


发现错误或过时内容? 在 GitHub 上编辑此页.