Codex 一句话发布 Vibe Coding 作品：零运维上线还能自动迭代

你的 Vibe Coding 作品，是不是还在用 localhost:3000 来访问？

你是不是也遇到过这种情况：做了一个特别棒的项目，想分享给别人，想让大家也来试试你的产品，结果发现这个地址只有自己能打开，只能自己用。

那 Vibe Coding 的作品，到底应该怎么发布到线上，让别人也能用？又该怎么持续迭代呢？

这一期我们就来讲：如何用 Codex 发布你的 Vibe Coding 作品，并且实现长期迭代。不用配置服务器，不用懂运维，不用写任何命令和代码，只用免费的工具就能轻松实现。

下面是本期用到的所有工具，注册和配置都可以从这里找到入口：

本期演示用的是最常见的组合：Vercel 做托管 + Supabase 做数据库。

在动手之前，先用一分钟搞清楚一件事：这个项目在你电脑上跑起来，到底由哪几部分组成？

本地：都在你自己的电脑上

• 服务器：你的电脑本身就是一台服务器，它负责运行程序，把网页跑起来。
• 地址：你经常看到的 localhost:3000 就是这台服务器的地址。localhost 的意思就是“本地”，3000 是端口。
• 数据库：如果你的项目要存信息、有增删改查（比如留言、记账记录），那你电脑本地还有一个数据库。

因为这些东西都在你的电脑本地，所以就只有你自己能用。想让别人也能用，就得把这一套全部搬到网上。

线上：对应的也是三样东西

一个请求是怎么跑通的

一个人在浏览器里输入你的域名，请求就会找到你的服务器，服务器打开这个网页展示出来；如果需要数据，就去数据库里取出来，再送回给这个人。

你在用的每一个网站，背后都是这套流程。

对 Vibe Coding 新手，我推荐直接用线上的托管平台来代替服务器。

• 服务器 → 托管平台：比如 Vercel、Netlify。它们相当于一个轻量级的服务器，帮你把代码跑起来，还能给你一个访问地址。
• 数据库 → Supabase：Supabase 跟托管平台可以联动，两边一连，你的网站就能在线上存数据、读数据了。
• 域名 → 平台默认网址：因为已经用了托管平台，平台送的那个默认网址就可以直接拿来用。

本期就用 Vercel 做托管 + Supabase 做数据库，来演示怎么把一个有前后端和数据库的项目部署到线上。

注册账号

1. 先准备一个 GitHub 账号，直接去官网注册就行，非常简单。
2. Vercel 和 Supabase 的账号都可以用 GitHub 授权登录——去它们官网注册一下即可，中间没有任何会卡住你的地方。

注册好 Supabase 账号后，还需要做一点准备工作，把线上数据库建起来。

操作步骤：

1. 新建一个项目
2. 给这个项目取一个名字
3. 设置一个数据库密码
4. 选一个时区
5. 等上一两分钟，线上数据库就准备好了

到这里，账号和线上数据库项目就都准备好了，接下来所有上线动作都在 Codex 里完成。

账号和项目都准备好了，接下来就在 Codex 里面完成整个上线过程。

安装插件并登录

1. 点击 Codex 的插件，找到 GitHub、Vercel、Supabase 三个插件，全部安装上。
2. 安装时会出现登录选项，直接用刚才注册好的账号登录就行。

把项目加进来

点击左侧项目旁边的加号，选择你 Vibe Coding 时工作的那个文件夹。

先在本地启动看一下

直接在对话框里说：“帮我在本地启动项目”。

本期演示的是一个简单的活动报名页面，虽然简单，但已经包含了前端、后端和数据库三部分：

现在用 Codex 把这个项目发布到线上。

选中插件，发出指令

点击对话框的加号，在插件选项里选择 Vercel 和 Supabase 插件，然后把下面这段话发给它：

请把当前项目发布到我现有的 Supabase 和 Vercel。先部署并验证预览版本，等我确认后再正式上线，最后连接 GitHub 用于后续自动更新。如果需要我授权登录的地方，告诉我

你只需要把这段话发给它，它就能帮你完成线上部署。中间如果出现你不会操作的部分，也可以直接问它。

Codex 会依次做这些事

1. 确认项目用的是什么框架、数据库结构放在哪里、需要哪些环境变量，以及能不能完成生产构建。
2. 依次发起 GitHub、Supabase、Vercel 登录——浏览器会弹出授权页面，你自己点确认，再回到 Codex 继续。
3. 把本地的数据库结构正式推送到 Supabase。
4. 创建 Vercel 项目，并把 Supabase 的网址和 Key 配置到 Vercel 的预览环境和生产环境。
5. 先发布一个预览版本。

验证预览版本

打开预览地址，新建一条数据，再刷新页面——数据还在。然后打开 Supabase，也能看到刚刚提交的内容已经写进数据库。前端、后端、数据库就全部跑通了。

确认上线

注意，现在还不是正式上线。Codex 会再生成一份使用生产环境配置的版本，全部通过后，它会停下来问你要不要正式发布。

你只需要回复一句 “确认上线”，Codex 就会把刚才验证过的版本提升为正式版本。打开 Vercel 给出的生产网址，一个真正在线的网站就发布完成了。

整个过程中你真正需要动手的只有几次：登录账号、授权、测试预览版本、确认上线。剩下的项目检查、数据库迁移、环境变量配置、构建、发布和错误检查，都交给 Codex。

上线只是第一步，更日常的事情是：我改了东西，怎么让线上也跟着更新？

因为 Vercel 是和你的 GitHub 仓库绑定的，所以以后每次用 Codex 改完代码，只要让它把最新代码推送到 GitHub，Vercel 就会自动检测更新、自动重新部署。

比如让 Codex 改一下按钮样式、加一个加载动画，然后直接告诉它：“改完之后部署线上”。

过上一两分钟，刷新一下网址，线上就是最新版了。

不是所有网站都适合这套方式。

我自己的搞定空间站就不是这么做的。因为它功能比较复杂——有后台、有数据统计，还有邮件服务，所以我用的是最常规的方式：自己买服务器、自己注册域名。每次更新，要先把代码上传到服务器，再在服务器上重新构建、重新部署。

如果你对“服务器 + 域名”这套上线方式感兴趣，可以在评论区告诉我，后面的视频里详细讲一遍。

以上就是用轻量级的线上工具部署 Vibe Coding 项目的完整流程。最后快速回顾一下，整个过程你真正需要动手的只有四步：

发布流程也就三步：先发预览 → 验证数据跑通 → 确认上线；之后每次改完代码，让 Codex 推到 GitHub，Vercel 自动重新部署。

现在，你的 localhost:3000 就变成了一个谁都能打开的线上网址，还能持续迭代了。