常见问题

什么是 Vercel?它主要解决什么问题?

Vercel 是一个面向前端开发者的云平台,专注于提供静态网站和 Jamstack 应用的全球部署与托管服务。它由 Next.js 的创建者团队开发,深度整合了 Git 工作流,让开发者只需将代码推送到 Git 仓库,Vercel 就能自动完成构建、优化和全球 CDN 分发。它的核心价值在于零配置部署、即时预览、边缘函数以及自动化的 HTTPS 和图片优化,大大简化了前端项目的上线流程。

Vercel 与 Netlify、AWS Amplify 相比有什么独特优势?

Vercel 与 Next.js 的集成最为紧密,能够利用 Next.js 的增量静态再生(ISR)和服务器端组件等高级特性,而这些在 Netlify 上需要额外配置或无法完全支持。此外,Vercel 的边缘网络建立在 Cloudflare 之上,但提供了更精细的缓存控制和边缘函数(Edge Functions),延迟更低。AWS Amplify 功能强大但配置复杂,Vercel 则更注重开箱即用的开发体验,尤其适合以 React 和 Next.js 为中心的团队。

Vercel 的免费计划有哪些限制?适合个人项目还是商业项目?

Vercel 的 Hobby 计划完全免费,包括每月 100 GB 带宽、100 小时构建时长、无限个人项目和自动 SSL 证书。主要限制是并发部署数量(1 个生产环境 + 1 个预览环境)和带宽超出后的费率。个人博客、作品集、小型 SaaS 原型完全够用。但如果是高流量商业项目,建议升级到 Pro 计划(20美元/月),可获得 1 TB 带宽、3000 小时构建时长、团队协作功能以及更高的并发限制。

Vercel 如何支持动态内容?必须用 Next.js 吗?

Vercel 不仅支持静态站点,还通过 Serverless Functions 和 Edge Functions 处理动态逻辑。Serverless Functions 以 Node.js、Python、Go、Ruby 等语言编写,运行在 AWS Lambda 上;Edge Functions 基于 V8 引擎,运行在全球边缘节点,延迟极低。虽然 Next.js 是官方最推荐的框架,但 Vercel 也支持 Nuxt、SvelteKit、Astro、Hugo、Remix 等多种框架,以及自定义 Docker 容器部署。只要项目输出静态文件或使用适配器,都能部署。

部署 Vercel 时如何配置自定义域名和 SSL?

在项目设置中的 Domains 部分添加你的自定义域名。Vercel 会自动配置 SSL 证书(由 Let’s Encrypt 提供)并强制 HTTPS。如果你的域名 DNS 托管在 Vercel 上,它会自动添加 CNAME 记录;如果托管在外部,你需要手动添加一条 CNAME 记录指向 `cname.vercel-dns.com`。整个流程通常几分钟内生效。Vercel 还支持裸域(apex domain)的配置,通过 ALIAS 或 A 记录实现。

Vercel 的预览部署(Preview Deployments)是如何工作的?对团队协作有什么帮助?

每当你在 Git 仓库中创建 Pull Request 或推送新分支,Vercel 会自动生成一个独立的预览 URL,例如 `project-name-git-branch-xxxx.vercel.app`。这个预览环境与生产环境完全隔离,包含完整的构建产物、环境变量和数据库连接(可配置)。团队成员可以在合并前直接点击链接查看功能效果,进行 UI 审查或集成测试,避免了本地环境不一致的问题。Vercel 还支持评论和检查功能,与 GitHub、GitLab 等深度集成。

Vercel 的 Analytics 和 Speed Insights 是免费的吗?

Vercel Analytics 和 Speed Insights 对 Hobby 和 Pro 用户都免费提供。Analytics 展示页面浏览量、访问来源、地域分布等基础指标,不设数据采样,但只保留过去 30 天的数据。Speed Insights 通过 Core Web Vitals 指标(LCP、CLS、FID)衡量页面性能,同样免费。这些工具默认开启,无需额外脚本,但隐私方面需要注意:Vercel 会收集用户 IP 并匿名化处理。如果需要更高级的付费分析功能,可以集成第三方工具如 Plausible 或 Umami。

Vercel 如何处理环境变量和敏感信息?

在项目 Settings → Environment Variables 中可以添加键值对,并选择作用域:Production、Preview 或 Development。值在保存后会被加密存储,且不会再显示在界面上(只能覆盖或删除)。Vercel 支持通过 `.env` 文件本地管理,但不会将这些文件上传到平台。对于数据库密码、API 密钥等敏感信息,建议使用 Vercel 的环境变量功能,避免硬编码在代码库中。同时,Vercel 支持团队共享环境变量,但每个成员只能查看自己有权访问的变量。

我可以在 Vercel 上运行后端 API 或全栈应用吗?

可以。Vercel 的 Serverless Functions 和 Edge Functions 能够处理 HTTP 请求和响应,支持 RESTful API、GraphQL、WebSocket(通过边缘函数)等。例如,在 Next.js 项目中使用 API Routes 自动映射到 Serverless Functions。Vercel 还提供了 Postgres 数据库(Vercel Postgres)和 KV 存储(Vercel KV),以及 Blob 存储(Vercel Blob),用于持久化数据。这意味着你可以构建一个完全在 Vercel 生态中运行的、无需后端服务器的全栈应用,但需要注意无服务器函数的冷启动和 10 秒超时限制(Pro 计划可提升至 60 秒)。

Vercel 的 Edge Functions 与 Serverless Functions 有什么区别?我应该选哪个?

Edge Functions 运行在 V8 引擎上,部署在全球 100+ 个边缘节点,延迟极低(通常在 30ms 以内),但支持的运行时有限(JavaScript 和 TypeScript),且无法依赖 Node.js 原生模块(如 `fs`、`child_process`)。适合处理重定向、A/B 测试、身份验证、地理定位等轻量逻辑。Serverless Functions 基于 Node.js 或 Python,运行在集中区域(如 us-east-1),冷启动时间较长(约 200ms-1s),但可以访问文件系统、数据库和任意 npm 包。如果逻辑涉及复杂计算或数据库连接,用 Serverless Functions;如果追求极速响应且逻辑简单,用 Edge Functions。

Vercel 的构建日志和部署历史可以保存多久?

Hobby 计划保留最近 10 次生产部署日志,预览部署日志保留 10 次。Pro 计划保留 90 天的部署历史记录,可以回溯查看每一次构建的输出和错误信息。如果需要更长的保留期或导出功能,可以配置外部日志服务(如 Datadog、Logtail)。Vercel 还支持在部署时通过 `VERCEL_LOGS` 环境变量将日志发送到自定义 Webhook。

如何将 Vercel 项目从 Hobby 升级到 Pro 或 Enterprise?

在 Vercel Dashboard 中进入 Team Settings → Plans,选择 Upgrade 即可。升级后立即生效,不会中断现有部署。Pro 计划按团队月付 20 美元/成员,Enterprise 计划需联系销售团队定制(通常包括 SLA、单点登录、审计日志、专用基础设施等)。如果之前使用 Hobby 的免费额度,升级后超出部分按用量计费。如果需要降级,可以在下一个计费周期切换回 Hobby,但注意某些功能(如带宽超额)可能会受限。

Vercel 是否支持自定义构建命令和输出目录?

支持。在项目 Settings → Git 中可以设置根目录、构建命令(如 `npm run build`)和输出目录(如 `dist`、`build`、`out`)。Vercel 会自动检测主流框架并预填默认值,但你可以手动修改。对于 monorepo,你可以在根目录的 `vercel.json` 配置文件中为每个子项目指定单独的构建配置。构建命令的执行环境基于 Node.js 20(可配置其他版本),并预装了常见的包管理器(npm、yarn、pnpm)。

Vercel 的自动 SSL 和 CDN 缓存策略是怎样的?

Vercel 为所有部署自动提供 SSL/TLS 证书,支持 HTTP/2 和 HTTP/3。CDN 缓存由边缘网络智能控制:对于静态资源(CSS、JS、图片),默认设置一个长缓存时间(基于文件哈希);对于 HTML 页面,Vercel 使用增量静态再生(ISR)技术,允许你设置 `revalidate` 时间,在缓存过期后按需重新生成页面。你也可以通过自定义 `Cache-Control` 头或使用 `vercel.json` 中的 `headers` 配置来覆盖默认缓存行为。注意,预览部署默认不缓存,以便实时反映代码变更。

我的网站使用了 Vercel,如何优化性能并降低带宽消耗?

首先,启用 Vercel 的自动图片优化功能:在 `next/image` 组件中只需指定本地图片路径,Vercel 会自动压缩、调整尺寸并提供 WebP/AVIF 格式。其次,利用 ISR 替代全量静态生成,减少构建次数。第三,部署边缘函数处理重定向和身份验证,避免不必要的服务器函数调用。第四,配置 `vercel.json` 中的 `cleanUrls` 和 `trailingSlash` 来简化 URL。最后,监控 Speed Insights 中的 Core Web Vitals,针对性地优化 LCP(比如使用预加载关键资源)。如果带宽依旧紧张,可考虑升级到 Pro 计划以获得更高额度。