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 个人免费额度里能用的东西：

服务干什么用个人免费额度Pages部署静态页面，自带 HTTPS无限带宽，500 次构建/月Workers写一段后端逻辑、API、定时任务10 万次请求/天D1SQLite 数据库5GB 容量，500 万次读/天KV键值存储1GB，10 万次读/天R2文件存储10GB，出口流量免费

个人项目日常用几乎不会超额度。

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 会更省心。下一篇写。