工具入门 · 基建

Vercel × Supabase

这两个名字几乎在我们每个产品里都出现。简单说:Vercel 管「网站怎么上线、怎么跑」,Supabase 管「数据存哪、谁能动」。一个负责门面与运行,一个负责仓库与账本,拼起来,一个小团队不用自己买服务器、不用养运维,就能做出完整的线上产品。本文从来历讲到能力全景,再落到——我们到底用了哪些、哪些还没用上、为什么

篇幅 6 章 · 约 9 分钟 受众 全员 · 不需要写代码也能看懂 主线 来历 · 能力全景 · 场景 · 我们用了什么 · 没用什么 · 一句话记忆

先用一张图把两者摆清楚。它们不是竞争关系,而是一前一后的搭档

VERCEL
前端 / 全栈托管平台

你写好的网站代码,一推送,它就帮你部署上线,自动配好网址、HTTPS、全球加速。还能跑一些轻量后端逻辑(接口、定时任务)。

类比:开店的「门面 + 后厨 + 收银台」——顾客看到的、点单跑腿的,都归它。

SUPABASE
后端 / 数据库平台

一个开箱即用的数据库(PostgreSQL),外加现成的登录、文件存储、实时推送等后端能力。数据长期存哪、谁能读写,都由它管。

类比:店铺的「仓库 + 账本 + 保险柜」——东西存这、谁能动有规矩。

一句话记住 · Vercel = 让网站「跑起来、被人访问到」;Supabase = 让数据「存得住、有人管」。下面任何细节,都挂在这两句上。
01

SECTION ONE · WHERE THEY CAME FROM

它们各自从哪来

了解来历不是考古,而是能帮你记住它们最擅长什么——一个产品的「出身」往往决定了它今天最强的那块肌肉。

Vercel:从「一行命令上线」长出来的

2015

以 ZEIT 起步,主打产品叫 Now

创始人 Guillermo Rauch(也是开源框架 Next.js 的作者)。最初的卖点极简:开发者敲一行 now,就把网站推上线,不用碰服务器。

2020

改名 Vercel,与 Next.js 深度绑定

从「部署工具」升级为「前端 / 全栈云平台」。因为自家就做 Next.js,所以 Vercel 上跑 Next.js 的体验是全行业最顺的——这也是我们几乎所有 Web 项目用 Next.js + Vercel 的根本原因。

记住它的肌肉 · Vercel 的基因是「部署体验」——把上线这件事做到极致简单。它最强的永远是「让网站快速、稳定地跑在全球各地」。

Supabase:给最经典的数据库套上现成后端

2020

打着「开源的 Firebase 替代品」旗号成立

Firebase 是 Google 的后端服务,好用但封闭、且不是关系型数据库。Supabase 反过来——底子用最成熟、最通用的 PostgreSQL,在它外面包一圈现成能力。

今天

一个数据库 + 一整套「不用自己写」的后端

登录鉴权、文件存储、实时推送、自动生成的 API、向量搜索……都围着那个 Postgres 数据库长出来。开源、可自托管,数据始终是标准 SQL,迁走也不被绑死。

记住它的肌肉 · Supabase 的基因是「一个正经的数据库 + 省掉重复造轮子的后端」。核心永远是那张张数据表;其它能力都是围绕它的赠品。
02

SECTION TWO · THE FULL TOOLBOX

两个工具箱里,各装了什么

下面是它们各自对外提供的能力全景(不是我们用了多少,是它们「能干」多少)。先有这张地图,第 4、5 章「我们用了哪些 / 没用哪些」才看得明白。

Vercel 工具箱

🚀
部署托管
连上 Git,一推送就自动构建、上线。
🔭
预览环境
每个改动 / PR 自动生成一个临时网址,先看效果再合并。
🌍
全球 CDN
静态资源缓存到离用户最近的节点,打开快。
⚙️
Serverless 函数
写后端接口,用时才起、用完即停,按量计费。
Cron 定时任务
配置文件里写好时间,平台到点帮你跑。
🖼️
图片优化
自动压缩、按设备给合适尺寸的图。
Edge / 中间件
在更靠近用户的边缘节点跑轻量逻辑(如改写、鉴权)。
🗄️
存储类(Blob/KV…)
官方的文件存储、键值缓存、配置中心。
📊
Analytics
网站访问量与性能(打开速度)监测。
🤖
AI Gateway
一个入口统一调多家大模型,带计费与容灾。
🛡️
Firewall / WAF
防 DDoS、按规则拦恶意流量。
🧩
微前端
把一个大站拆给多团队各自独立部署。

Supabase 工具箱

🐘
Postgres 数据库
核心。一张张表存所有业务数据,标准 SQL。
🔌
自动 API
建好表,自动生成可调用的 REST / GraphQL 接口。
🔐
Auth 鉴权
注册登录、第三方登录、找回密码,开箱即用。
📏
RLS 行级权限
在数据库层规定「谁只能看自己那几行」。
📡
Realtime 实时
数据一变,前端立刻收到推送(无需轮询)。
📦
Storage 文件存储
存图片 / 视频 / 文件的对象桶,类似 S3。
🔧
Edge Functions
在 Supabase 侧跑自定义后端逻辑。
🧭
Vector 向量搜索
pgvector,做语义检索 / RAG 的地基。
📨
Queues 队列
任务排队、异步处理,削峰。
🕑
pg_cron 定时
在数据库里直接配定时任务。
🌿
Branching 分支
给数据库开「分支」,像 Git 一样改完再合并。
🧰
扩展生态
Postgres 上百个扩展即开即用。
注意 · 工具箱里东西多,不代表都该用。能力越多,越要克制——只用解决当前问题那几样,剩下的知道它在那、需要时再取。下面就看我们的取舍。
03

SECTION THREE · WHEN TO USE THEM

什么场景,适合这套组合

不是所有项目都该用这套,但对我们这种「小团队、要快、不想养运维」的情况,它几乎是默认答案。典型适配场景:

✅ 很适合

面向用户的 Web 产品 / 官网 / 后台、需要数据库存账号与业务数据、要频繁迭代上线、团队人少没专职运维。—— 我们的产品基本都在这一类。

vs

⚠️ 未必合适

需要长时间运行的重后台 / 常驻进程(如挂着浏览器自动化、跑大模型)、对单机性能 / 成本有极致要求的场景——这类我们会放到 Fly.io 这种能跑常驻服务的地方。

所以在我们这,常见的分工是三层

典型分工 · Vercel 跑「门面 + 轻接口 + 定时任务」 · Supabase 当「唯一的数据真相源」 · Fly.io 跑「需要常驻、重活的后台」。三者通过 Supabase 这个数据库互相对齐。

这也是为什么很多功能要「绕一下数据库」——不同机器之间,靠 Supabase 这张共享账本交接。这一点单独有一篇讲:自动回复为什么要「绕」数据库 →

04

SECTION FOUR · WHAT WE ACTUALLY USE

我们日常,到底用到了哪些部分

把上面两个工具箱拿过来,勾一遍我们实际用到的✅ 在用 ◐ 部分项目用 ○ 基本没用

Vercel — 我们用了什么

能力我们怎么用状态
部署托管所有 Web 项目(含 upio.ai 这个站本身)都靠它:推代码 → 自动上线,约一分钟生效。✅ 在用
预览环境改动先在临时网址看效果、给团队 review,确认了再合并到正式站。✅ 在用
Serverless 函数产品的后端接口(API 路由)大量跑在这——例如某个产品就有几十个接口。✅ 在用
Cron 定时任务重度使用。我们的获客类产品里有几十个定时任务(巡检、跑批、生成)都挂在 Vercel Cron 上。✅ 在用
全球 CDN / 图片优化跟着 Next.js 默认就吃到了,基本「免费白拿」,没特意配。✅ 在用

Supabase — 我们用了什么

能力我们怎么用状态
Postgres 数据库核心中的核心。所有业务数据——用户、聊天记录、任务状态、跑批结果——都存这。多个产品各有自己的库。✅ 在用
「中转台」用法不同机器(云端服务器、云电脑、Fly 后台)之间靠它交接:一方写进表,另一方读出来接着干。数据库是它们的「公共信箱」。✅ 在用
状态机 + 审核闸给每条记录打状态(待处理 / 可发 / 等人工)。比如 AI 生成的回复草稿先存库、过一道安全闸,敏感的拦下来等人看,不直接发。✅ 在用
Auth 鉴权看项目——有的产品直接用 Supabase 登录体系,有的自建。不是全员统一。◐ 部分项目
小结 · 我们把 Vercel 当成「上线 + 接口 + 定时」三件套,把 Supabase 当成「唯一数据真相源 + 跨机器交接台」。两者最核心的肌肉,正好被我们吃得最透。
05

SECTION FIVE · WHAT WE SKIP

哪些部分,我们还没用上 —— 以及为什么

「没用上」不等于「该用没用」。大多数是当前用不到,或我们用别的方式解决了。知道它们在那,等需要时能想起来,就够了。

Vercel 里我们基本没碰的

能力为什么没用状态
存储类 Blob / KV文件和数据我们统一放 Supabase / 别处,没必要再开一套 Vercel 自己的存储,避免数据散落。○ 没用
AI Gateway我们调大模型走 OpenRouter(统一入口、比价、容灾)已经够了,没叠 Vercel 这层。○ 没用
Edge / 中间件大部分逻辑放普通 Serverless 函数或 Fly 后台就够,边缘计算的低延迟需求还没到。○ 没用
Firewall / 微前端防护规模没到、团队也不大,这些「大厂级」能力暂时用不上。○ 没用

Supabase 里我们基本没碰的

能力为什么没用 / 替代方案状态
Realtime 实时本可以「数据一变前端立刻知道」,但我们多数场景用定时轮询(每隔几分钟醒一次去查)就够,简单、可控、好排障。○ 没用
Storage 文件桶目前文件类需求不多,或放在了别的地方,没专门用它的对象存储。○ 没用
Edge Functions后端逻辑放 Vercel 函数或 Fly 后台,没必要再在 Supabase 侧跑一套。○ 没用
Vector 向量搜索还没做语义检索 / RAG。等要给 AI 接「长期知识库」时,这是第一个会启用的能力。○ 未来候选
Queues 队列用「数据库状态字段 + 定时轮询」土法实现了排队效果,量级没大到非上专业队列。○ 没用
Branching 分支改库直接走迁移脚本,团队小、协作冲突少,还没到要数据库分支的复杂度。○ 没用
一个值得记的取舍 · 我们多处「用定时轮询代替实时推送 / 队列」。代价是慢几分钟,换来的是简单、可预测、出问题好查。小团队阶段,这种「土但稳」的选择往往是对的——别为还没出现的规模提前上复杂方案。
06

SECTION SIX · TAKEAWAY

一句话装进脑子

不用记那一长串功能名。把这页浓缩成一行,以后听到这两个词,脑子里浮现这句就够:

Vercel 让网站跑起来,Supabase 让数据存得住
其余能力都是「需要时再取」的赠品。
速记 · Vercel = 部署上线 + 接口 + 定时任务(我们吃透的三件套); Supabase = 数据真相源 + 跨机器交接台 + 状态/审核闸; 重活常驻交给 Fly.io。三者靠那个数据库对齐。
延伸阅读 · 想再深一点理解「为什么很多功能要绕数据库」,看 自动回复为什么要「绕」数据库 →