视频中提到的服务器在这: https://curl.qcloud.com/8ztPAuM9
skill地址：https://github.com/Leochens/gt-frp-dev-tunnel (欢迎star!!!)
如果skill下载失败可以备用下载: https://pan.quark.cn/s/2a9e18e0bebc
罐头的博客: https://guantou.site/
罐头的作品集: https://world.guantou.site/
远程Vibe Coding的最大痛点
当你在外面用手机远程连接vibe Coding Agent写代码时，Agent经常会告诉你：“预览已启动在localhost:3000端口，你可以打开进行预览了”。这时你一定会想：人在外面，去哪访问localhost呢？
这是远程vibe Coding最常遇到的“最后一公里”问题——页面预览。本期就教你如何在外面实时预览Agent的编码结果。
现有远程预览方案分析
在调研远程预览方案时，主要需求包括：连接稳定、访问快、成本低、数据隐私可控。市面上现有方案主要有这几类：
*异地组网工具**：Tailscale、ZeroTier、蒲公英等
*第三方公网隧道**：Cloudflare Tunnel、Ngrok等
*公网部署平台**：Vercel等
但这些方案体验下来，稳定性并不理想，有的还需要付费，且存在各种使用限制。因此更好的选择是自建服务器搭配FRP内网穿透，性价比高，只需要一台低配服务器即可。
**注**：FRP开源项目在手机和家中的vibe Coding电脑之间建立桥梁，让你在公网也能访问家里电脑的服务。具体原理可参考相关往期视频，本文不再赘述。
准备阶段：选购与配置云服务器
以腾讯云为例，你可以通过优惠链接选购服务器。
选择合适的配置 FRP转发主要依赖公网带宽，对CPU和内存性能要求不高。推荐选择最低配置即可，如两核2G、4M带宽的组合就完全够用。
推荐组合购 推荐新老用户都选组合购，因为可以1元购买一个域名。给域名起个名字，这样在任何地方访问域名都能打开对应网页。
在选择域名时，输入你想要的域名并选择信息模板。注意信息模板需要实名认证，如果还没有模板，新建后等待约10分钟即可刷新页面继续使用。
服务器与镜像设置 建议选择离你近的地域让访问速度更快，镜像选择预装好的服务器控制面板（如宝塔镜像），后续使用会更方便。
确认无误后点组合购买，购买成功后进入管理页面，等待服务器创建完成即可看到服务器详情和IP地址。
域名审核 进入域名列表搜索刚购买的域名，会显示“域名命名审核中”的状态，实际审核很快，大约两三分钟就会恢复正常状态。
核心环节：使用SKILL一键部署FRP服务端
FRP的配置原本非常繁琐，需要编写各种配置文件、设置转发规则等。为了节省时间并方便部署，这里开了一个专门的SKILL——gt-frp-dev-tunnel，内含一键部署FRP服务端的脚本。
服务端部署步骤
1. 获取部署命令
来到gt-frp-dev-tunnel开源仓库，复制带有域名的部署命令。
2. 在服务器执行命令
在服务器控制面板中点击应用管理登录，打开命令行粘贴命令。然后把命令中的域名改成你的实际域名，建议在主域名前加一个 dev 前缀。
3. 配置DNS解析
命令执行完成后会出现DNS泛域名解析指引。按照指引去云服务器控制台： 搜索你的域名 点击解析 添加对应的解析记录
4. 放行防火墙端口
部署指引会要求放行7111端口。回到服务器控制面板的防火墙设置，添加一条规则： 端口：7111 备注：frps
配置完成后可以在客户端电脑上测试是否联通，如果显示“可以从当前机器访问”，说明部署成功。
客户端配置：让Agent自动安装SKILL
服务端配置完成后，只需将仓库提供的prompt直接发送给本地编码Agent（如Codex），它会自动安装SKILL并配置隧道。
Agent会检测隧道状态，识别本地服务运行端口，并生成公网访问的预览URL。点击这个URL，就可以在公网访问你本地的Web服务了。
手机端验证
在手机上打开Codex的同一条绘画，直接点击公网地址，页面即可顺利打开。这意味着你在外面工作时，可以实时预览Agent的编码修改内容，随时查看效果。
多项目使用与隧道管理
在新项目中使用SKILL
如果想在其他项目中使用，只需要在对话中告诉Agent：“使用FRP技能，打一个预览隧道给我预览一下”。Agent会自动添加新的预览隧道，点击即可看到新项目的公网预览地址。
