Vercel 踩坑手记
约 2714 字大约 9 分钟
Vercel
2025-07-07
Vercel ServerLess Functions
在Vercel上部署一些后端，并且可以使用框架，比如Nodejs的NestJS，NestJS是一个完整的框架，依赖于各种原生模块，而 Vercel 的 Edge Functions 和 Netlify 的 Edge Functions 一样，是基于 Web 标准的 [V8 Isolates Runtime]：
- 没有完整的 Node.js 环境（如不支持
fs、net、child_process等模块） - 要求函数体积小、冷启动极快（通常在几毫秒内）
- 目标是快速处理边缘计算逻辑（如 A/B 测试、Header 注入、URL 重写）
所以部署NestJS使用的是 Vercel Serverless Functions
- 支持完整的 Node.js 运行时（14.x、16.x 等）
- NestJS 可以打包成一个单独的 Serverless handler 运行在这上面
NestJS 基于 Node.js 原生模块（http、stream、events 等）构建，而 Vercel 的 Serverless Functions 提供了完整 Node.js 运行时支持，这对 Nest 来说是硬性要求。
而Netlify 的 Serverless 环境对 Node 支持较弱，且对大项目支持力不够。
Vercel 不强制要求你的代码结构必须符合某种规范，只要你指定：
"builds": [{ "src": "api/index.ts", "use": "@vercel/node" }]它就可以构建任何你想要的 Node 项目，包括 NestJS、Express、甚至 Koa、Fastify 等。
Vercel 会：
- 自动识别 TypeScript 并构建
- 自动缓存构建输出，加快部署
- 一键生成并部署函数入口，无需复杂配置文件（像
netlify.toml）
零服务器，按需扩展
NestJS 在 Vercel 上运行的是无状态函数：
- 请求触发即启动（cold start），执行完即销毁
- 不需要你维护服务器，也不会被“挂掉”
- 自动扩容（并发量大自动复制多个实例）
Edge 与 Serverless 配合灵活
- 用 Edge Function 做前置处理（如判断区域、权限）
- 用 Serverless Function 执行 NestJS 后端逻辑
注意 ：Vercel Serverless Functions 中的文件操作是临时的、非持久化的、每次 cold start 都会重置！ 简单说：可以读写临时文件，但无法保存状态或持久存储。
你可以读取代码打包时包含的静态文件，这个文件必须是在构建时打包进 Serverless 函数的，可以读取 ✔️，不能修改、删除、持久保存 ❌
import * as fs from 'fs';
const content = fs.readFileSync('./data/config.json', 'utf-8');可以写入到 /tmp 目录，这是每个 Serverless 函数专属的临时文件目录：
fs.writeFileSync('/tmp/hello.txt', 'test');- ✅ 可以写入
- ✅ 读写速度快
- ❌ 函数结束或容器被销毁后文件就没了
- ❌ 不能用于用户上传的文件、日志、缓存等长期存储
只在当前请求期间有效，一旦容器销毁就没了。
🔝 常见免费云存储服务对比
| 服务名称 | 免费额度 | 适合用途 | 是否易于与 Vercel 搭配 |
|---|---|---|---|
| Vercel Blob（官方） | ✔️ 免费 100GB/月（开发阶段） | 文件上传、CDN 文件 | ✅ 原生集成 |
| Cloudflare R2 | ✔️ 10GB 存储 + 1GB 出站流量 | 静态文件、S3 兼容 | ✅ 配合 AWS SDK 使用 |
| Backblaze B2 | ✔️ 10GB 存储 + 1GB/月下载 | 图片、文档等 | ✅ S3 兼容 API |
| Firebase Storage | ✔️ 1GB 存储 + 5GB/月下载 | 移动端/前端文件 | ✅ 多平台支持 |
| Supabase Storage | ✔️ 1GB 存储（免费层） | 与 Supabase 数据库结合 | ✅ 全栈集成好 |
| UploadThing | ✔️ 每月 1GB（带限制） | 前端文件上传托管 | ✅ Vercel 插件 |
| ImageKit.io / Imgix | ✔️ 免费处理 20GB 图片/月 | 图片优化、CDN | ✅ 图片为主 |
Vercel Blob：
| 项目 | 限制 | 是否可配置 |
|---|---|---|
| 单文件大小 | 50MB | ❌ |
| 存储总量 | 100GB（默认） | ❌（付费计划可扩展） |
| 上行带宽 | 没有限制，但无分片上传 | ❌ |
| 出站带宽 | 暂无限制 | ❌（未来可能有） |
| 私有访问 | 支持 token 和 URL 签名 | ✅ |
| 文件生命周期 | 永久保存（除非手动删除） | ❌ |
⚠️ 超过 50MB 上传会失败，目前不适合视频或大数据文件。
注意：不支持子目录，如 images/avatar.png 会变成 images%2Favatar.png，文件名中的 / 会被转义，不是真目录结构，不支持目录操作，所有 Blob 都是平铺的对象名。
权限控制
| 功能 | 支持情况 |
|---|---|
| 公开访问文件 | ✅ 支持 |
| 私有 Blob | ✅ 支持（带 token 的私有访问） |
| URL 签名访问 | ✅ 可设置有效时间 |
| 文件删除 | ✅ 可通过 API 删除 |
签名 URL（Signed URL）是一种带有“访问令牌 + 时效性”的特殊下载链接，只有持有这个链接的人，才能在限定时间内访问目标文件。
场景：
你有一个用户上传了简历 resume.pdf，这个文件是私密的，不能让其他人随便访问。但你希望他自己能下载、分享给 HR，怎么办？
- 上传时设置为私有文件（不可公开访问）
- 需要访问时，通过你的后端生成一个签名 URL，设定：
- 谁可以访问（token 内隐含）
- 什么时候过期（如 5 分钟内有效）
- 用户使用这个 URL 下载文件（有效期间有效）
用户上传文件 → 存储为私有 Blob
↓
用户发请求获取下载链接（需身份验证）
↓
后端生成 Signed URL（5 分钟有效）
↓
返回给用户，用户用 URL 下载Vercel 的 Serverless Functions 存在冷启动现象
什么是冷启动？
当一个 Serverless Function 被首次请求，或一段时间未被访问后，Vercel 会重新创建一个执行实例来处理请求。这种初始化过程就是“冷启动”。
冷启动的典型表现：
| 请求状态 | 响应速度 | 说明 |
|---|---|---|
| 第一次请求 | 🐢 慢（数百毫秒 ~ 2 秒） | 初始化容器、加载依赖、构建上下文 |
| 连续多次访问 | ⚡ 快（几十毫秒） | 函数“热状态”，实例已存在 |
| 几分钟无访问后再次请求 | 🐢 又慢了 | 实例被销毁，重新启动（冷启动） |
Serverless 的核心设是 “按需创建 + 自动销毁”：
| 原因 | 说明 |
|---|---|
| 节省资源 | 没有请求就不占资源，不用付费 |
| 高弹性 | 可同时起多个实例处理并发请求 |
| 生命周期短 | 空闲后几分钟内就被销毁（由平台控制，不能配置） |
冷启动时间范围参考
| 框架类型 | 典型冷启动时间 |
|---|---|
| 轻量函数（Hello World） | 100~300ms |
| 中型框架（Express） | 300~800ms |
| 重型框架（NestJS） | 500ms~2s（视依赖数量而定） |
如何缓解冷启动？
虽然 Vercel 不提供强制“保持热实例”的方式，但你可以尝试以下技巧：
| 方法 | 效果 | 实现方式 |
|---|---|---|
| 代码精简 | ✅ 显著 | 减少不必要的依赖和装饰器 |
| 分包部署 | ✅ 好 | 拆分业务为多个小函数 |
| 预热请求 | ⚠️ 可缓解 | 定时发送请求让函数保持活跃（如用 cron job ping） |
| Edge Function 替代 | ✅ 无冷启动 | 适合处理轻量逻辑，但不能用 NestJS |
不要用 app.listen() | ✅ 必须 | NestJS 在 Serverless 模式下要用 expressAdapter.getHandler() |
轮询或定时心跳请求可以让 Serverless 实例保持“活跃”，避免 Vercel 冷启动，但是带来的两个问题
请求次数（invocations）消耗
Vercel 免费额度为：
- 每月 100 万次函数调用（Serverless）
- 超过会计费
定时轮询如每 5 分钟一次，就会导致：
- 单点 12 次/小时 × 24 小时 × 30 天 = 8640 次/月
- 多个函数、多个用户、多个实例 = 快速吃光配额
函数执行时间（执行量）也会被计费
如果你的函数稍微复杂，哪怕执行几十毫秒，也会累计：
- 免费额度每月约 100 小时
定时请求就会偷偷“吞掉”你的一部分执行时间，尤其 NestJS 冷启动时执行逻辑更多
| 方法 | 描述 | 优点 | 缺点 |
|---|---|---|---|
| 只对核心接口做保温 | 只定时请求关键慢接口（如 /api/init） | 精准高效 | 控制复杂度增加 |
| 客户端访问时 warm up | 用户第一次访问页面时先触发“唤醒 ping” | 避免冷请求卡住 | 仍有首次冷启动 |
| 动态监控 + 热度检测保温 | 判断是否活跃后再保温（需配合 DB） | 节省资源 | 实现复杂 |
| 前端 loading UX 遮挡 | UI 上优化冷启动卡顿体验 | 用户体验较好 | 实质没有变快 |
| Serverless + 常驻服务混合部署 | 把频繁请求放到 Fly.io / Render / Supabase Edge Functions | 高可用 | 成本和复杂度略升 |
定时 ping API：
在前端项目里，用 setInterval 每隔几分钟请求一次 API
外部定时任务 ping
| 工具 | 地址 | 特点 |
|---|---|---|
| EasyCron | 免费支持 HTTP 调用 | 每 X 分钟 ping 一次 |
| Cron-job.org | 免费、支持日志 | 简单好用 |
| GitHub Actions | 自托管 cron（比如每 5 分钟 curl 一次） | 免费但不连续运行 |
| 自己的 VPS | 自定义定时任务 | 自由，但需维护环境 |
如果你部署的是整个 Nest 应用到一个 Serverless 函数（比如 Vercel 的 /api/index.ts），那只要你“心跳”其中任意一个接口，就等于整个框架都预热了，其他接口也热了。
Vercel 会根据你项目的 api/ 目录或 Serverless 入口配置，把每个函数部署为一个独立的 Serverless 实例
在 Vercel 的 Serverless 架构下，函数被调用时不应该自己“监听端口”（app.listen()），而是应该返回一个“请求处理器”函数供平台调用。
不要用 app.listen(...) 直接监听端口，它适合部署在传统服务器（如 Render/Fly.io），不适用于 Vercel Serverless
示例
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { INestApplication } from '@nestjs/common';
let cachedApp: INestApplication;
async function bootstrap(): Promise<INestApplication> {
if (!cachedApp) {
const app = await NestFactory.create(AppModule);
// 添加CORS支持
app.enableCors({
origin: true,
credentials: true,
});
// 设置全局前缀（可选）
// app.setGlobalPrefix('api');
await app.init();
cachedApp = app;
}
return cachedApp;
}
export default async (req, res) => {
const app = await bootstrap();
const httpAdapter = app.getHttpAdapter();
httpAdapter.getInstance()(req, res);
};支持本地调试 + Vercel 部署
// src/main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { INestApplication } from '@nestjs/common';
let cachedApp: INestApplication;
export async function bootstrap(): Promise<INestApplication> {
if (!cachedApp) {
const app = await NestFactory.create(AppModule);
app.enableCors({
origin: true,
credentials: true,
});
await app.init();
cachedApp = app;
}
return cachedApp;
}
// 如果不是在 Vercel 环境下（即本地运行），就执行监听端口
if (!process.env.VERCEL) {
bootstrap().then(app => {
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`🚀 Local server listening on http://localhost:${port}`);
});
});
}
// 如果是 Vercel，则导出 handler
export default async function handler(req, res) {
const app = await bootstrap();
const httpAdapter = app.getHttpAdapter();
return httpAdapter.getInstance()(req, res);
}使用概览
| 项目 | 用量 | 限额 | 说明 |
|---|---|---|---|
| Blob Advanced Operations | 21 / 2000 | 很少用 | 高级 Blob 操作次数，基本没达到瓶颈 |
| Function Invocations | 240 / 100000 | 只用了 0.24% | Serverless 函数调用次数，远未接近上限 |
| Blob Simple Operations | 12 / 10000 | 很少用 | 简单 Blob 操作次数 |
| Edge Requests | 622 / 1000000 | 极少用 | 边缘请求数（Edge Network） |
| Fast Data Transfer | 6.24 MB / 100 GB | 远未用完 | 快速数据传输流量 |
| Function Duration | 0 GB-Hrs / 100 GB-Hrs | 0 | 函数运行时间（貌似没统计？或者很少运行） |
| Fast Origin Transfer | 274.7 KB / 10 GB | 很小 | 快速起源传输流量 |
| Blob Data Transfer | 5.42 KB / 10 GB | 很少用 | Blob 数据传输流量 |
| Blob Data Storage | 22.52 B / 1 GB | 极少用 | Blob 存储空间占用非常小 |
| Edge Request CPU Duration | 0 / 1 h | 很少用 | CPU 计费时间，未用 |