AI AI 工具指南
独立开发 / 建站指南

Vercel 是什么（和 Firebase Hosting 有什么区别）

Vercel 是框架原生平台——Next.js / Astro / SvelteKit 一等公民。给出心智模型、示例 vercel.json、5 分钟上线流程。

发布于: 作者: AI Productivity Guide Team 🌐 查看英文版本

Vercel 是 Next.js 背后的公司，Vercel 平台围绕”把 Next.js 跑得比任何地方都好”建起来，逐渐扩展到 Astro / SvelteKit / Nuxt。如果说 Firebase Hosting 是”会调用你后端的 CDN”，Vercel 就是”端到端把你框架跑起来的 runtime”。下面给出心智模型、基础 vercel.json、5 分钟上线流程。

问题背景

Vercel 从”30 秒部署 Next.js”发展成完整平台：serverless function、edge function、ISR、图片优化、分析。2026 年它是 Next.js 的默认选择、Astro 的强力选择，但它是带观点的平台——按用量计费的方式和 Firebase 的免费 Spark 档完全不同，签约前要先想清楚。

判断标准

  • 你在用 Next.js / Astro / SvelteKit 或其它支持的框架。
  • 你想要零配置的 SSR、ISR、图片优化。
  • 你重视每个 PR 自动 preview deploy 和按分支独立 URL。
  • 能接受按用量计费（不是固定免费额度天花板）。

快速结论

用 JavaScript 框架做项目、希望框架特性”开箱即用”，选 Vercel。技术栈已经是 Firebase、或者站本身是纯静态 HTML，跳过——纯静态在 Firebase Hosting 长期更便宜。

开始前准备

  • 仓库在 GitHub/GitLab/Bitbucket。
  • 框架已确定（Next.js、Astro 等）。
  • 自定义域名准备好（可选）。

实操步骤

  1. 通过 git host 注册 vercel.com。Vercel 直接继承仓库列表。

  2. Import 仓库 + 自动识别框架。 Vercel 预填 build 命令和输出。Astro 项目：

Framework Preset:    Astro
Build Command:       astro build
Output Directory:    dist
Install Command:     npm install
Root Directory:      ./
  1. 加 vercel.json（可选但有用）——控制响应头、跳转、cleanUrls：
{
  "cleanUrls": true,
  "trailingSlash": true,
  "redirects": [
    { "source": "/blog/(.*)", "destination": "/articles/$1", "permanent": true }
  ],
  "headers": [
    {
      "source": "/(.*)\\.(jpg|png|svg|webp|woff2)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=2592000" }
      ]
    },
    {
      "source": "/_astro/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ]
}
  1. CLI 部署便于复用：
npm install -g vercel
vercel link            # 本地仓库关联 Vercel 项目
vercel --prod          # 生产部署
# Production: https://your-project.vercel.app

  1. 加自定义域名。 Project → Settings → Domains → 加 yourdomain.com。配 DNS（apex A 76.76.21.21、www CNAME cname.vercel-dns.com）。

  2. 配 Production 和 Preview 环境变量：

vercel env add OPENAI_API_KEY production
vercel env add SITE_URL production
# https://yourdomain.com

  1. PR 用 preview 部署。 每个 PR 自动拿到独立 URL。PR 评论自动贴出链接。preview 默认 noindex。

  2. Lighthouse + curl 验证：

curl -sI https://your-project.vercel.app/ | grep -i x-vercel
# x-vercel-cache: HIT
# x-vercel-id: ...
npx lighthouse https://your-project.vercel.app/ --only-categories=performance,seo --chrome-flags="--headless"

执行检查清单

  • 框架 preset 与实际匹配。
  • vercel.json（如用）与框架在 trailing slash / cleanUrls 上一致。
  • Production 环境变量已配；Preview 需要的也配上。
  • 自定义域名 SSL 有效。
  • Preview 部署对团队可访问。

上线后验证

  • vercel.app 和自定义域名都返回 200。
  • DevTools Network 显示 hashed 资源 immutable 缓存。
  • 换域后 Search Console 流量只走主域 URL。

容易踩的坑

  • 把 Vercel Hobby 当成固定免费配额——它有流量和函数执行的限速，是限流不是限单。
  • 把大流量纯静态站放 Vercel——Firebase Hosting 或 Cloudflare Pages 长期更便宜。
  • 把巨型单体 API 塞进一个 serverless function——冷启动和 15 分钟上限会让你后悔。
  • 不看 vercel.json 框架相关选项，硬跟平台对着干。
  • preview 需要环境变量但只加到 Production——preview 静默失败。

FAQ

  • Vercel 免费吗？: Hobby 个人非商业用途免费，有流量和函数执行配额。商业 / 团队用要 Pro。
  • Vercel 是不是只能跑 Next.js？: 不是。Astro / SvelteKit / Nuxt / Vite 等都是一等公民，只是 Next.js 集成最深。
  • Vercel 能跑长任务后端吗？: 不太行。Hobby 函数 60 秒上限，Pro 15 分钟。长任务要用队列或独立 worker。
  • 一句话 Vercel vs Firebase Hosting？: Vercel 跑你的框架。Firebase Hosting 发文件、调你后端。
  • 静态站用 Vercel 行吗？: 行——零配置完美。问题是你这个规模成本能不能打过 Cloudflare Pages 或 Firebase Hosting。

相关阅读

标签: #独立开发 #Vercel #部署 / 托管 #入门 #对比

相关文章