如何使用 Vercel 部署前端

当你的 Next.js 应用完成开发，下一步就是让它被用户访问到。选择部署平台时，Vercel 几乎是 Next.js 项目的「默认答案」——毕竟 Next.js 就是 Vercel 团队创造的框架，两者之间的集成深度是其他平台无法复制的。本章系统讲解如何使用 Vercel 部署前端应用，覆盖从首次部署到生产运维的完整链路。

Vercel 是什么

Vercel 是一个专为前端优化的云平台，提供部署、托管和运维的一站式服务。它的核心能力可以概括为三个关键词：零配置、Git 驱动、全球边缘网络。

零配置意味着你不需要编写 Dockerfile、配置 Nginx 或操心服务器运维。Vercel 自动检测项目使用的框架（Next.js、React、Vue、Svelte 等），完成构建和部署。Git 驱动表示每一次 git push 都会自动触发构建和部署，无需手动操作。全球边缘网络则保证你的静态资源自动分发到全球 CDN 节点，用户从最近的节点获取内容，访问速度有保障。

Vercel 对 Next.js 的支持是原生的——App Router、Server Components、Server Actions、Image Optimization、ISR（增量静态再生）等特性无需额外配置即可工作。这是 Vercel 相对 Netlify、Cloudflare Pages 等平台的核心优势。

能力	Vercel	Netlify	Cloudflare Pages	自建服务器
Next.js 原生支持	✅ 完整支持（零配置）	⚠️ 需要适配器	⚠️ 需要适配器	❌ 需手动配置
自动部署	✅ Git push 触发	✅ Git push 触发	✅ Git push 触发	❌ 需自建 CI/CD
全球 CDN	✅ 自动	✅ 自动	✅ 自动	❌ 需自行配置
Preview 部署	✅ 每个 PR 自动生成	✅ 支持	✅ 支持	❌ 需手动搭建
Serverless Functions	✅ 内置	✅ 内置	✅ Workers	❌ 需自行搭建
免费额度	✅ Hobby 计划	✅ 免费计划	✅ 免费计划	取决于云厂商

对于 AI 产品出海场景，Vercel 的 Hobby 计划足以支撑早期验证阶段。当流量增长后，可以升级到 Pro 计划（每月 $20/用户），获得更高的带宽、更快的构建速度和团队协作能力。

部署流程

方式一：通过 GitHub 连接（推荐）

这是最常用的部署方式，全程在浏览器中完成，不需要本地安装任何工具。

第一步：推送代码到 GitHub。 确保你的项目已经初始化 Git 仓库并推送到 GitHub。仓库应当包含完整的项目源码和 package.json。

第二步：导入项目到 Vercel。 访问 vercel.com/new，使用 GitHub 账号登录。Vercel 会列出你有权限的所有仓库，选择目标项目点击「Import」。

第三步：配置构建设置。 对于 Next.js 项目，Vercel 通常会自动检测框架并填充构建命令。需要确认以下配置：

配置项	默认值	说明
Framework Preset	Next.js	自动检测，通常无需修改
Build Command	`next build`	Next.js 标准构建命令
Output Directory	`.next`	构建产物目录
Install Command	`pnpm install` 或 `npm install`	根据项目包管理器调整
Node.js Version	20.x	建议选择 LTS 版本
Root Directory	`./`	Monorepo 项目需要指向具体应用目录

第四步：部署。 点击「Deploy」按钮，Vercel 开始构建和部署。通常在 1-3 分钟内完成。部署成功后，你会获得一个 *.vercel.app 的域名。

方式二：通过 Vercel CLI

CLI 方式适合需要在 CI/CD 流水线中集成部署，或者不想连接 Git 的场景。

# 安装 Vercel CLI
pnpm i -g vercel
 
# 在项目根目录执行部署
vercel
 
# 部署到生产环境
vercel --prod

首次执行 vercel 命令时，CLI 会引导你完成登录、项目关联和环境选择。执行完成后，当前目录会生成一个 .vercel 目录，存储项目 ID 和组织 ID 等元信息。

方式三：Vercel Drop

如果你只有一个构建好的静态目录（比如 dist/ 或 out/），可以直接访问 vercel.com/drop，将文件夹拖拽到浏览器页面中完成部署。这种方式不需要 Git 仓库，也不需要 CLI，适合快速原型验证。

适读画布 · 130%

Mermaid 流程图加载中...

自定义域名配置

Vercel 分配的 *.vercel.app 域名适合测试和验证，但正式对外提供服务时需要使用自有域名。自定义域名的配置过程分为两个阶段：Vercel 侧添加域名和 DNS 解析配置。

在 Vercel 中添加域名

进入项目的 Settings → Domains 页面，输入你要绑定的域名（如 app.example.com），点击 Add。Vercel 会自动检测域名类型（根域名 / 子域名），并给出对应的 DNS 配置指引。

配置 DNS 解析

根据域名类型，需要在你的 DNS 服务商（Cloudflare、阿里云 DNS、Namecheap 等）处添加相应的记录：

域名类型	DNS 记录类型	主机记录	记录值	说明
子域名（如 `app.example.com`）	CNAME	`app`	`cname.vercel-dns.com`	标准 CNAME 指向
根域名（如 `example.com`）	A	`@`	`76.76.21.21`	Vercel 提供的 Anycast IP
根域名备选	CNAME	`@`	`cname.vercel-dns.com`	部分 DNS 服务商支持根域名 CNAME

如果你使用 Cloudflare 作为 DNS 服务商，需要注意一个常见的坑：Cloudflare 默认开启「代理」（橙色云朵），这会导致 Vercel 的域名验证失败。解决方案有两种——关闭 Cloudflare 代理（改为 DNS only），或者在 Vercel 中添加域名时使用 Cloudflare 的 DNS-only 模式。

SSL 证书

Vercel 会自动为所有自定义域名配置 SSL 证书，包括根域名和子域名。证书由 Let's Encrypt 签发，自动续期，无需手动操作。从域名添加完成到 SSL 生效，通常需要几分钟到几小时不等。

多域名绑定

一个 Vercel 项目可以绑定多个域名。常见场景包括：为不同地区绑定不同域名（如 example.com 和 example.co.uk），或者将旧域名重定向到新域名。Vercel 支持在 Domains 设置中配置域名重定向规则。

环境变量配置

环境变量是部署过程中最容易被忽略却又最关键的环节。数据库连接字符串、API 密钥、第三方服务凭证——这些敏感信息不能提交到 Git 仓库，必须通过环境变量注入。

环境变量的作用域

Vercel 的环境变量支持按环境区分，这是它优于许多竞品的设计：

环境	触发条件	典型用途
Production	推送到 `main` 分支或执行 `vercel --prod`	生产数据库连接、正式 API 密钥
Preview	推送到非 `main` 分支或创建 PR	测试数据库、沙箱 API 密钥
Development	本地执行 `vercel dev`	本地开发用的调试变量

这意味着你可以在 Preview 环境连接测试数据库，在 Production 环境连接正式数据库，而不需要修改任何代码。

添加环境变量

通过 Dashboard 添加。 进入项目 Settings → Environment Variables，点击 Add。填入变量名、变量值，选择作用的环境（Production / Preview / Development），保存即可。

通过 CLI 添加。

# 添加单个环境变量
vercel env add DATABASE_URL production
 
# 拉取环境变量到本地（用于开发）
vercel env pull .env.local

通过代码仓库批量导入。 Vercel 支持在 .vercel/ 目录下放置环境变量文件，也支持通过 Vercel Dashboard 的「Import」功能从 .env 文件批量粘贴。

敏感环境变量的加密

Vercel 对所有环境变量进行静态加密（encryption at rest）。在 Dashboard 中，加密的环境变量显示为 ***，只有拥有项目编辑权限的成员才能查看和修改。这一点对于出海产品尤为重要——API 密钥、数据库密码等敏感信息的安全管理不能掉以轻心。

环境变量的大小限制

Vercel 支持单个部署最多 64 KB 的环境变量总量（Node.js / Python / Go / Ruby 运行时）。需要注意的是，Edge Functions 和 Middleware 使用的 Edge Runtime 限制为单个变量 5 KB。如果你的认证 Token 或证书体积较大，需要留意这个限制。

预览部署

预览部署（Preview Deployment）是 Vercel 的核心特性之一，也是团队协作中价值最高的功能。

工作原理

当你向非生产分支（非 main）推送代码，或者在 GitHub 上创建 Pull Request 时，Vercel 自动创建一个独立的预览部署。每个预览部署拥有唯一的 URL，格式为 https://<project>-<commit-hash>-<team>.vercel.app。

预览部署的意义在于：

评审者可以直接访问真实部署，而不是依赖截图或本地截图。PR 评论中会自动出现预览链接，点击即可查看效果。
测试环境与生产环境完全隔离，预览部署的变更不会影响线上用户。
分支专属 URL 始终指向该分支的最新提交，方便持续跟踪某个功能的开发进度。

预览部署与 GitHub 的集成

当 Vercel 与 GitHub 连接后，每个 Pull Request 会自动收到一条 Vercel 机器人的评论，包含预览链接和部署状态。当 PR 中的代码有新的提交时，预览 URL 自动更新。

预览部署的环境变量

Preview 环境变量作用于所有非生产分支的部署。如果你需要为特定分支设置不同的变量（比如某个分支使用独立的测试 API），可以添加分支级别的环境变量。分支级别的变量会覆盖同名的 Preview 通用变量。

自定义预览部署域名（Preview Deployment Suffix）

默认的 vercel.app 预览 URL 有时不够专业。Vercel 支持自定义预览部署的域名后缀，将 vercel.app 替换为你自己的域名。例如，将预览 URL 从 my-app-abc123.vercel.app 变为 my-app-abc123.preview.example.com。这个功能在 Pro 及以上计划中可用。

常见问题处理

在实际部署过程中，以下问题出现的频率较高。提前了解可以避免踩坑。

构建失败：内存不足

Next.js 项目在构建时可能消耗较多内存，尤其是页面数量较多或使用了大量图片的场景。Vercel Hobby 计划的构建环境内存限制为 1 GB，Pro 计划为 4 GB。如果构建日志中出现 JavaScript heap out of memory 错误，说明内存不足。解决方案包括：升级 Vercel 计划、优化构建时的内存占用（如减少 getStaticProps 中一次加载的数据量），或启用 experimental.cpus 配置限制并行构建的 CPU 数量。

环境变量未生效

环境变量修改后不会自动更新已有部署，只对新的部署生效。如果你发现环境变量未生效，需要重新触发一次部署。另外，vercel env pull 拉取的是 Development 环境的变量，如果混淆了环境作用域，可能拉到错误的值。

自定义域名验证失败

域名验证失败的常见原因包括：DNS 记录尚未传播（全球 DNS 传播通常需要几分钟到 48 小时）、CNAME 记录指向了错误的地址、或者 Cloudflare 的代理模式未关闭。建议使用 dig 或 nslookup 命令检查 DNS 记录是否正确解析。

部署成功但页面 404

这通常是因为项目路由配置与 Vercel 的路由规则不匹配。Next.js App Router 项目一般不会有这个问题，但如果你使用了自定义 rewrites 或 redirects，需要确保 vercel.json 或 next.config.js 中的路由配置正确。

图片优化功能不可用

Vercel 的 Next.js Image Optimization 在 Hobby 计划中有每月 1000 次的限制。如果产品的图片量大，需要考虑升级到 Pro 计划，或者在 next.config.js 中使用外部图片优化服务（如 Cloudinary、imgix）。

问题	可能原因	解决方案
构建失败（OOM）	内存不足	升级计划或优化构建内存
环境变量未生效	修改后未重新部署	重新触发部署
域名验证失败	DNS 未传播或指向错误	检查 DNS 记录，等待传播
页面 404	路由配置问题	检查 `vercel.json` 路由规则
图片优化超限	Hobby 计划每月 1000 次限制	升级计划或使用外部服务
Serverless Function 超时	函数执行超过 Hobby 计划 10s 限制	优化函数逻辑或升级计划

实战案例

案例一：AI 写作工具 SaaS 的部署架构

一个典型的 AI 写作工具 SaaS，前端使用 Next.js 15 + Tailwind CSS，后端 API 部署在独立服务器上。部署架构如下：

生产环境：main 分支推送到 Vercel，绑定域名 app.example.com，环境变量指向生产数据库（Neon PostgreSQL）和 OpenAI API 密钥。
预览环境：每个功能分支自动创建预览部署，环境变量指向测试数据库。产品经理和设计师通过预览链接直接验收功能，无需本地搭建环境。
CI 流程：GitHub Actions 运行测试和 Lint，通过后合并到 main。Vercel 自动触发生产部署，整个流程从代码合并到上线不超过 5 分钟。

这个架构的优势在于：预览部署让非技术人员也能参与验收，环境变量按环境隔离避免了误操作风险，Vercel 的全球 CDN 保证了海外用户的访问速度。

案例二：多语言营销站点的部署

一个面向全球市场的多语言营销站点，使用 next-intl 管理 5 种语言（英语、西班牙语、法语、日语、中文），静态导出 + ISR 混合模式。

部署策略：

使用 Vercel 的 Edge Network 分发静态内容，全球访问延迟控制在 100ms 以内。
next.config.js 中配置 images.remotePatterns，允许从 CMS 域名加载图片。
通过 Vercel 的 vercel.json 配置 redirects 和 rewrites，实现语言路由和旧链接重定向。
环境变量中按环境区分 CMS API 地址：Production 指向正式 CMS，Preview 指向 staging CMS。

上线后的关键指标：首屏加载时间（LCP）从自建服务器的 2.8 秒降低到 1.2 秒，全球平均延迟从 350ms 降低到 80ms。

部署检查清单

在将应用推向生产之前，逐项确认以下内容：

所有环境变量已在 Vercel Dashboard 中配置，并按环境区分（Production / Preview / Development）
敏感信息（API 密钥、数据库密码）没有提交到 Git 仓库
自定义域名已添加并完成 DNS 解析配置
SSL 证书已自动签发并生效
Preview 部署功能正常——创建一个测试 PR，确认预览链接可以访问
构建命令和输出目录配置正确，构建日志无错误和警告
Node.js 版本与本地开发环境一致
Monorepo 项目的 Root Directory 已指向正确的应用目录
vercel.json 中的路由规则（redirects / rewrites / headers）已经过验证
图片优化配额确认满足需求，或已配置外部图片服务
Serverless Function 的执行时间和内存使用在计划限制之内
生产部署后访问核心页面，确认功能正常
配置了 Vercel Analytics 或接入了外部监控（如 Sentry）
团队成员的权限已正确分配（Viewer / Developer / Admin）