ZhenYu's 知识库

外观

Vercel 全栈部署与数据存储

约 1252 字大约 4 分钟

vercel全栈Serverless数据库

2026-04-03

前后端项目部署架构

Vercel 的全栈部署基于 前端 + Serverless Functions 模式，不需要单独维护后端服务器。

用户请求
  ├── 静态页面 / SSR → Vercel CDN（全球边缘节点）
  ├── API 请求 → Serverless Function
  │     └── 读写数据 → Vercel Storage / 外部数据库
  └── 文件上传 → Vercel Blob

项目目录结构

以 Next.js 为例，前后端代码在同一仓库中：

project/
├── app/                 # 前端页面（App Router）
│   ├── page.tsx
│   └── layout.tsx
├── api/                 # 后端 API（Serverless Functions）
│   ├── hello.ts         → /api/hello
│   └── users/
│       └── [id].ts      → /api/users/:id
├── lib/                 # 共享逻辑（数据库连接等）
├── vercel.json
└── package.json

提示

非 Next.js 项目也可以使用 api/ 目录，Vercel 会自动将其中的文件部署为 Serverless Functions。

Serverless Functions 特性

  • 无状态：每次请求独立执行，不能在内存中持久化数据
  • 自动扩缩容：根据请求量自动伸缩，无需手动管理
  • 冷启动：不活跃的函数首次调用会有延迟（通常几百毫秒）

数据存储方案

Vercel 提供了一套官方存储服务，也支持接入外部数据库。

Vercel 官方存储

Vercel Postgres

基于 Neon 的 Serverless PostgreSQL，适合关系型数据存储。

# 安装
pnpm add @vercel/postgres
import { sql } from '@vercel/postgres'

// 查询
const { rows } = await sql`SELECT * FROM users WHERE id = ${userId}`

// 插入
await sql`INSERT INTO users (name, email) VALUES (${name}, ${email})`

特点：

  • 自动连接池管理，无需担心 Serverless 环境下的连接数问题
  • 兼容标准 PostgreSQL，可配合 Prisma / Drizzle 等 ORM 使用
  • 免费版：256 MB 存储，60 计算小时/月

Vercel KV

基于 Redis 的键值存储，适合缓存、Session、排行榜等场景。

pnpm add @vercel/kv
import { kv } from '@vercel/kv'

// 设置
await kv.set('user:1', { name: 'ZhenYu', role: 'admin' })
await kv.set('session:abc', 'user:1', { ex: 3600 }) // 1 小时过期

// 获取
const user = await kv.get('user:1')

// 自增（适合计数器、排行榜）
await kv.incr('page:views')

特点：

  • 读写延迟极低（毫秒级）
  • 支持 Redis 常用数据结构（String、Hash、List、Set、Sorted Set）
  • 免费版：256 MB 存储，30,000 请求/天

Vercel Blob

对象存储，适合文件上传、图片存储等场景。

pnpm add @vercel/blob
import { put, del, list } from '@vercel/blob'

// 上传文件
const blob = await put('avatars/user1.png', file, {
  access: 'public',
  contentType: 'image/png'
})
console.log(blob.url) // 返回 CDN 加速的公开 URL

// 列出文件
const { blobs } = await list({ prefix: 'avatars/' })

// 删除
await del(blob.url)

特点：

  • 自动 CDN 分发
  • 免费版：500 MB 存储

Vercel Edge Config

超低延迟的只读键值存储，适合 Feature Flags、A/B 测试配置等。

pnpm add @vercel/edge-config
import { get } from '@vercel/edge-config'

// 读取配置（< 1ms 延迟）
const isFeatureEnabled = await get('feature_new_ui')

if (isFeatureEnabled) {
  // 新 UI 逻辑
}

特点：

  • 读取延迟 < 1ms（数据部署在边缘节点）
  • 通过 Vercel Dashboard 或 API 更新数据
  • 适合读多写少的配置场景

官方存储对比

方案类型适用场景免费额度
Vercel Postgres关系型数据库用户数据、业务数据256 MB
Vercel KVRedis 键值存储缓存、Session、计数器256 MB
Vercel Blob对象存储文件上传、图片500 MB
Edge Config只读键值Feature Flags、配置512 条目

外部数据库接入

Vercel 也支持连接外部数据库服务，适合更大规模或特殊需求：

服务说明适用场景
PlanetScaleServerless MySQLMySQL 生态、分支管理
SupabasePostgreSQL + Auth + Realtime需要实时功能的应用
MongoDB Atlas云端 MongoDB文档型数据
UpstashServerless Redis / Kafka消息队列、更灵活的 Redis
Turso基于 libSQL 的边缘数据库超低延迟读取

注意

使用外部数据库时，需注意连接池管理。Serverless 环境下每次调用可能创建新连接，容易耗尽数据库连接数。建议：

  • 使用数据库服务自带的 HTTP/Serverless 连接模式
  • 使用 Prisma 的 Data Proxy 或 @prisma/adapter-*
  • 将数据库凭证配置在 Vercel 的环境变量中，避免硬编码

全栈项目示例

一个完整的 Next.js + Vercel Postgres 全栈应用：

// app/api/todos/route.ts
import { sql } from '@vercel/postgres'
import { NextResponse } from 'next/server'

export async function GET() {
  const { rows } = await sql`SELECT * FROM todos ORDER BY created_at DESC`
  return NextResponse.json(rows)
}

export async function POST(request: Request) {
  const { title } = await request.json()
  const { rows } = await sql`
    INSERT INTO todos (title) VALUES (${title}) RETURNING *
  `
  return NextResponse.json(rows[0], { status: 201 })
}
// app/page.tsx
'use client'
import { useState, useEffect } from 'react'

export default function Home() {
  const [todos, setTodos] = useState([])

  useEffect(() => {
    fetch('/api/todos').then(r => r.json()).then(setTodos)
  }, [])

  const addTodo = async (title: string) => {
    const res = await fetch('/api/todos', {
      method: 'POST',
      body: JSON.stringify({ title })
    })
    const todo = await res.json()
    setTodos(prev => [todo, ...prev])
  }

  return (
    <main>
      {/* UI 省略 */}
    </main>
  )
}

关键注意点

  1. 执行时长限制：Hobby 计划 Serverless Functions 最长 10s，Pro 计划 60s，不适合长时间任务
  2. Edge Functions 限制：运行更快但不能使用 Node.js 专有 API（如 fs、child_process）
  3. 冷启动优化：选择较小的 Function 体积、减少依赖可降低冷启动时间
  4. 费用控制：关注数据库读写次数和带宽用量，合理使用缓存（Vercel KV）减少数据库压力
  5. 数据安全：数据库凭证必须通过环境变量配置，切勿提交到代码仓库