Vercel 简介

约 905 字大约 3 分钟

vercelbuild部署github

2024-08-16

官网：https://vercel.com/

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 --prod

3. 项目配置

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.local

4. 自定义域名

进入项目的 Settings → Domains
添加自定义域名
按提示在域名服务商处配置 DNS 记录：
- A 记录：76.76.21.21
- CNAME 记录：cname.vercel-dns.com
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 Command

7.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 免费版上。