为什么 Vercel

Vercel = Next.js 的亲妈（Next.js 作者 Guillermo Rauch 创办）—— Next.js 在 Vercel 上跑得最丝滑。

  • 零配置部署
  • 自动 HTTPS（Let's Encrypt）
  • 全球 CDN
  • Serverless Functions
  • Preview 部署（每个 PR 一个 URL）
  • 免费档够个人项目

3 步部署

1. 推到 GitHub

cd my-site
git init
git add .
git commit -m "init"
git remote add origin git@github.com:you/my-site.git
git push -u origin main

2. 在 Vercel 关联

去 vercel.com：

  1. 用 GitHub 登录
  2. New Project → Import Git Repository
  3. 选你的仓库
  4. 完全不用改任何设置 → Deploy

1-2 分钟后给你一个 URL：https://my-site-xyz.vercel.app。

3. 后续

每次 git push 到 main → 自动部署。 每个 PR → 自动生成 preview URL（独立环境，可分享给同事看）。

绑定自家域名

Vercel Dashboard → 项目 → Settings → Domains → Add：

51testgame.com
www.51testgame.com

Vercel 给你两个值（A 记录 / CNAME）—— 去你的 DNS 提供商（腾讯云 DNSPod）加：

A    @       76.76.21.21              ← Vercel 的 IP
CNAME www    cname.vercel-dns.com

几分钟后访问 https://51testgame.com 看到你的站，HTTPS 自动生效。

环境变量

Vercel Dashboard → Settings → Environment Variables → 加：

DATABASE_URL=postgresql://...
NEXTAUTH_SECRET=...
NEXT_PUBLIC_API_URL=https://api.example.com

注意：

  • NEXT_PUBLIC_* 前缀变量会注入到浏览器代码（公开的）
  • 其他只在服务端可用（安全）

数据库

Vercel 自家产品：

  • Vercel Postgres（基于 Neon）—— 免费起步
  • Vercel KV（Redis）—— 缓存 / session
  • Vercel Blob（对象存储）—— 文件上传

或接外部：

  • Supabase（Postgres + Auth + 实时）
  • Neon（Postgres serverless）
  • Turso（SQLite 边缘）
  • PlanetScale（MySQL serverless）
# 关联 Vercel Postgres
vercel env pull       # 自动写入 .env.local

看部署日志

npm install -g vercel
vercel login
vercel logs               # 看运行时日志
vercel logs --follow      # 实时

或 Dashboard → 项目 → Logs。

本地预览生产构建

vercel build              # 构建
vercel dev                # 本地跑 vercel 环境

限制（免费档）

  • Bandwidth：100 GB/月（充足够个人站）
  • Builds：6000 分钟/月
  • Functions：100K invocations/天
  • 超出：自动降级 / 限速

商业项目 / 流量上去考虑 Pro（$20/月起）。

国内访问

⚠ Vercel 节点不在国内——国内访问可能慢 / 偶尔不通。

应对：

方案 备注
接受现状 偶尔慢，但 Vercel 香港 / 新加坡节点对部分国内运营商还行
走 Cloudflare 前面套一层 部分情况帮（也部分情况害）
国内服务器部署（自家 VPS） 见 17-deploy-vps
双端部署 Vercel 国际 + 阿里云国内，DNS 智能解析分流

替代品

如果不想用 Vercel：

平台 特点
Cloudflare Pages 免费 + 全球 CDN（国内访问看运营商）
Netlify Vercel 早期对手，仍可用
Railway 类 Heroku，简单部署
Render Web service + static + DB 一站

但它们对 Next.js 支持不如 Vercel 深——一些高级特性（边缘函数 / 流式 SSR）可能阉割。

国内特别推荐：Cloudflare Pages + Workers

npm install -D wrangler @cloudflare/next-on-pages
npx @cloudflare/next-on-pages

跑通后能部署到 Cloudflare 全球网络——国内访问比 Vercel 略好。

坑

  • 服务端代码用 Node API（fs / path）—— Vercel Functions 支持但有限制
  • Server Action 大 body 慢——超过 Function 限制会失败
  • 长任务（> 30 秒）需要 Edge Functions 或后台任务
  • 国内业务用 Vercel 要做好用户偶尔投诉慢的准备

下一篇：部署到自家 VPS。