Vercel 简介
约 905 字大约 3 分钟
vercelbuild部署github
2024-08-16
1. 简介
Vercel 是一个面向前端开发者的云平台,专注于静态站点和 Serverless Functions 的部署。它由 Next.js 的创建者开发,提供了从开发到生产的完整工作流。
核心特点:
- 零配置部署:连接 GitHub/GitLab/Bitbucket 仓库后,Push 即自动部署
- 全球 Edge Network:基于全球 CDN 分发,访问速度快
- Preview Deployments:每个 PR/分支自动生成独立的预览链接
- Serverless Functions:支持 API Routes,无需单独维护服务器
- 支持主流框架:Next.js、Nuxt、Vue、React、Astro、VuePress 等开箱即用
2. 部署流程
2.1 通过 Git 自动部署(推荐)
- 在 Vercel Dashboard 中导入 Git 仓库
- 选择 Framework Preset(如 VuePress、Next.js 等)
- 配置构建命令和输出目录
- 点击 Deploy,后续每次 Push 到主分支会自动触发部署
2.2 通过 CLI 部署
# 安装 Vercel CLI
npm i -g vercel
# 登录
vercel login
# 部署(在项目根目录执行)
vercel
# 部署到生产环境
vercel --prod3. 项目配置
3.1 vercel.json
项目根目录下创建 vercel.json 进行配置:
{
"buildCommand": "pnpm build",
"outputDirectory": "docs/.vuepress/dist",
"framework": null,
"installCommand": "pnpm install"
}3.2 常用配置项
{
// 重定向
"redirects": [
{ "source": "/old-path", "destination": "/new-path", "permanent": true }
],
// 自定义 Headers
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "X-Content-Type-Options", "value": "nosniff" }
]
}
],
// URL 重写(不改变浏览器地址栏)
"rewrites": [
{ "source": "/api/:path*", "destination": "https://api.example.com/:path*" }
]
}3.3 环境变量
在 Vercel Dashboard 的 Settings → Environment Variables 中配置:
- Production:仅在生产部署中生效
- Preview:仅在预览部署中生效
- Development:通过
vercel env pull拉取到本地.env.local
# 拉取环境变量到本地
vercel env pull .env.local4. 自定义域名
- 进入项目的 Settings → Domains
- 添加自定义域名
- 按提示在域名服务商处配置 DNS 记录:
- A 记录:
76.76.21.21 - CNAME 记录:
cname.vercel-dns.com
- A 记录:
- Vercel 会自动签发 SSL 证书
5. Serverless Functions
在项目中创建 api/ 目录,每个文件即一个 API 端点:
// api/hello.ts
import type { VercelRequest, VercelResponse } from '@vercel/node'
export default function handler(req: VercelRequest, res: VercelResponse) {
const { name = 'World' } = req.query
res.status(200).json({ message: `Hello ${name}!` })
}访问 https://your-project.vercel.app/api/hello?name=ZhenYu 即可调用。
注意事项:
- 免费版单个函数执行时间限制 10s,Pro 版 60s
- 支持 Node.js、Go、Python、Ruby 运行时
- 函数冷启动可能有轻微延迟
6. Edge Functions
比 Serverless Functions 更快,运行在边缘节点:
// api/edge-hello.ts
export const config = {
runtime: 'edge',
}
export default function handler(request: Request) {
return new Response(JSON.stringify({ message: 'Hello from Edge!' }), {
headers: { 'Content-Type': 'application/json' },
})
}Edge Functions 使用 Web 标准 API(Request/Response),无法使用 Node.js 专有 API。
7. 常见问题排查
7.1 构建失败
# 查看构建日志
# Vercel Dashboard → Deployments → 点击失败的部署 → 查看 Build Logs
# 常见原因:
# 1. Node.js 版本不匹配 → Settings → General → Node.js Version 调整
# 2. 依赖安装失败 → 检查 package.json 和 lock 文件是否一致
# 3. 构建命令错误 → 检查 vercel.json 或 Dashboard 中的 Build Command7.2 路由 404
对于 SPA 应用,需要配置 rewrites 将所有路由指向 index.html:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}7.3 部署超时
- 检查构建脚本是否有死循环或长时间操作
- 免费版构建时间限制 45 分钟
- 尝试使用
vercel build本地预构建排查问题
8. 免费版限制
| 项目 | 免费版(Hobby) | Pro 版 |
|---|---|---|
| 带宽 | 100 GB/月 | 1 TB/月 |
| Serverless 执行时间 | 10s | 60s |
| 构建时间 | 45 分钟 | 45 分钟 |
| 团队成员 | 仅个人 | 无限制 |
| 商业用途 | ❌ 不允许 | ✅ 允许 |
| 并发构建 | 1 | 12 |
提示
个人项目和开源项目使用免费版完全够用。本知识库站点就部署在 Vercel 免费版上。
