夜雨聆风vibe coding 教程都停在"工具装好开始干活"这一步。我撞上了下一关：AI 给我一个 HTML 文件，然后呢？
半个月前，我让 agent 帮我整理一份新疆旅行路书。我之前在公众号写过一篇新疆行程的复盘，里面有不少地图、景点、餐厅、住宿的零散信息，很不直观，就想做的是一份按天展开、每天去哪里、中午吃什么、晚上住哪、雨天的备选行程是什么，出门在手机上随时能翻的形式。
资料丢给 agent，跟它说"做一个我和我媳妇出门能直接看的页面，用高德mcp最真实的数据，以最真实的地图路线信息展示"。然后它就解析、归类、调用... 做了个挺像样的网页，甩过来一个 .html 文件。
我自己打开看挺好的。下意识就把文件丢进微信发给我媳妇，当时没多想，agent 给了文件我就转手发出去。
接着我媳妇下载、双击在浏览器打开，看完提了几条改的：第三天那个 5A 景点的顺序排反了、有一段住宿想换个性价比更高的、能不能在每天行程下面加上天气预告、海拔和穿衣信息。我让 agent 改，改完一版我又发给她，她再下载、再打开。
来回到第四版，她就受不了了，"好麻烦，手机上微信看不了！你自己看吧！"
我才意识到我做这件事的姿势就不对。我电脑上的版本是干净的，agent 也知道哪个是最新的，版本管理在我这一端没问题。但只要我交给她的是文件，她那一端永远在做"翻聊天记录找最新版、点下载、再打开"这件事。文件这种交付方式天然就不适合"反复改、给一个人看"。
我以为这只是我们家的特殊情况。
直到上周，一个做摄影的朋友拿 AI 给自己工作室搭了一套棚拍预约的小系统，让我帮他看看。他打包了一个文件夹给我，HTML、CSS、JS 都在里面。
我本地打开，是空的。
他在自己电脑上演示给我看是好的，里面有他测试录入的几条预约。但我打开就是空的——AI 默认给他写的方案是把数据存在浏览器的 localStorage 里，数据从来没出过他那台电脑。他没意识到这件事，因为 AI 写代码的时候没特别提，他自己电脑上看也没异常。
直到他想发给店里前台用，前台说"我点开是空白页"；直到他想发到客户群让客户自己预约，文件打开还是空的；直到他问我："这种东西怎么发出去给别人用？"
两件事到一起，我才反应过来。AI 默认给你写的，是"在你这台电脑上能跑就行"的东西。你哪怕自己解决了版本管理，只要交付方式是一个 .html 文件，对方那端永远是混乱的；如果数据还存在浏览器里，那你的东西连"被别人完整看到一次"都做不到。
教程停在了你看不见的地方
我看过几个 vibe coding 教程，每一个都在"工具装好了，可以开始写东西了"这一步收尾。Claude Code 装好了、Hermes 装好了、APIkey配置好了，拉起来了，开始干活。
之后呢？
agent 写完的东西怎么变成别人能打开的链接？数据存在哪里别人才能看到？这两关在 vibe coding 教程里很少作为主线讲。
这种状态有多普遍？网上有个流传很广的截图：有人把 localhost:3000 的浏览器地址栏截下来发给朋友说"这是我做的网站"，朋友回"打不开啊"。听起来像段子，但跟没接触过 web 的人讲"localhost""本地服务""部署到服务器"这些词，他确实就是这个状态。
对做过 web 部署的人，这一关是透明的，部署嘛，推到 Vercel；数据嘛，丢数据库，这是默认的背景知识。但对没接触过的人，"部署"和"后端"是两个根本不存在的概念。文件就是文件，数据就是浏览器里看见的那些。中间还有一层叫"服务"的东西、一个叫"数据库"的东西，从来没人提过。
更关键的是，就算你做过开发，你也不一定会想到一件事：这两关都可以让 agent 自己去办。
大部分人的分工是 agent 写代码、我自己再去搞部署搞数据库。这两件事在脑子里是断开的。但如果你把这两关的权限也给 agent，它给你的就不只是文件，是一个能直接打开的链接，一份所有人都能看到的同一份数据。
接下来这一篇的目的，不是教你怎么手动配 Cloudflare，这些 agent 都能做。是让你作为指挥 agent 的人，知道有哪些层、有哪些选项、什么时候让它走哪一条。知识打底，活让 agent 干。
两条路：让 agent 知道部署的选项
往下走之前先分一个岔。让 HTML 被别人看到，主要有两条路。
公网部署。 推到一个外网能访问的地方，任何设备、任何地方、有网就能打开。我跟我媳妇这份旅行路书走的就是公网，她在家里电脑上看，我在路上手机上看；出门在新疆，她查餐厅、我查景点，永远是同一份最新的。我改一个地方，她刷新就是新版，不再"下载文件—打开—翻聊天记录找上一版"。
局域网部署。 在本地起一个服务，办公室 WiFi 内或家里 WiFi 内的设备能访问，出了这个网就看不到。技术上不复杂，python -m http.server、npx serve 一行命令就能起。数据不出局域网。缺点是你电脑得开着，离开这个 WiFi 就没了。
你不用记python -m http.server这种命令——agent 知道。你要心里有底的是：这件事有公网和局域网两条路，按场景告诉它选哪条。临时给同事看一份内部数据，说"起个局域网服务"；要让人从手机随时打开，说"部署到公网"。
一个 key，把整套部署交给 agent
公网部署这条路，Cloudflare 有一个东西叫 Global API Key。账号邮箱加上这个 key，就拿到了 Cloudflare 账户下所有服务的操作权限。
把这个 key 配进 agent，从此你说"做一个页面部署上去"，它的动作是一整串：写 HTML、推到 Pages、Pages 自动构建、构建完拿回 URL、把 URL 发给你。中间你不动手。
Cloudflare 个人免费额度里能用的东西：
个人项目日常用几乎不会超额度。
CF 自己还有两个 AI 相关的服务：Workers AI 是直接跑开源模型（每天有免费的推理额度），AI Gateway 是给外部 AI 调用做代理和监控（自己挂个 DeepSeek 或者 OpenAI 都可以走这一层）。AI 这块按场景用，不一定非要走 CF。
这些服务都是同一个账号、同一个 API key、同一个免费额度。agent 知道这套服务都能用，自己决定"这里要存数据，调一下 D1""这里要做后端逻辑，写一个 Workers"。你不用告诉它怎么搭。你说"做一个能让客户提交预约、能让前台查看的小系统"，它给你的就是这个完整东西的 URL，数据在云上，谁登录都能看到。
跟传统流程"先注册 Vercel、再开通数据库、再申请 AI API"比，区别是一个 key 全打通。
不只是部署，连数据也要搬到云上
回到摄影师朋友的预约系统。
部署到 Pages 解决的只是"页面能被打开"。但他真正的问题在另一关——他需要客户在预约页面填的内容能被他自己、被前台、被不同时间打开页面的不同客户都看到。
localStorage 做不到这件事。它存的是每个浏览器各自的数据，A 客户提交的预约 B 客户看不见，连他自己换台电脑都看不见。
得有一个真正的服务端 + 数据库。Cloudflare 里的对应物就是上面那张表里的 Workers + D1：
• 客户在预约页面填表，前端通过 fetch 调一个 Workers 写的接口 • Workers 把数据写进 D1 • 摄影师本人或前台打开管理页面，前端调另一个 Workers 接口从 D1 读出来 • 所有人看到的是同一份数据
你需要知道的是"客户填的东西要落到一个共享的地方去"这件事。怎么落、用什么 SDK、表怎么建、接口怎么写——agent 全做。
域名和备案
域名建议直接买。
Cloudflare 默认给你的 xxx.pages.dev（以及 Workers 的 xxx.workers.dev）域名，在国内访问不稳定——具体原因你可以让 AI 给你展开讲讲背景。挂上自定义域名之后，链路是 Cloudflare 自己的 CDN，访问稳定性会好很多。
不用买 .com，.xyz、.top 这类域名第一年常常几块钱到十几块钱。Cloudflare 自己就能买，买完 DNS 自动配好。告诉 agent 域名是什么，它知道怎么把 Pages 绑过去。
ICP 备案 你不是在做对国内用户开放的正式商业服务，就不用现在做。给自己用、给家人用、群里发几个朋友用，不在备案范围里。先把东西跑起来。
这一篇讲到这里
到这一步，HTML 不再是只能在你自己电脑上跑的文件，数据也不再是只能在你自己浏览器里看到。它们变成了一个真的能发给身边人的链接、一份所有人都能看到的同一份数据。
但这只是"给身边人用"。如果你的目标更进一步——想让陌生人能注册账号、想让每个用户都看到自己的私人数据并且互相看不到、想让这个东西变成一个能持续运行、能解决隐私分级的小产品——还需要另外一层：用户系统、登录、权限隔离。
这一层 Cloudflare 自己能做一部分，但配上 Supabase 会更省心。下一篇写。
