Vercel / Netlify 部署

使用 Vercel 或 Netlify 部署静态文档站或前端应用，适合中小型项目和 Jamstack 架构。

Vercel 部署

前置条件

• 注册 Vercel 账号（关联 GitHub/GitLab）
• 代码已推送到 Git 仓库

部署 VitePress 文档站

创建 vercel.json：

{
  "buildCommand": "npm run docs:build",
  "outputDirectory": "docs/.vitepress/dist",
  "framework": "vitepress",
  "cleanUrls": true
}

确保 package.json 包含构建脚本：

{
  "scripts": {
    "docs:build": "vitepress build docs"
  }
}

部署步骤：

1. 在 Vercel Dashboard 点击 Add New Project
2. 导入你的 Git 仓库
3. Framework Preset 选 VitePress
4. 环境变量设置：NODE_VERSION=20
5. 点击 Deploy

自定义域名

1. 在 Vercel 项目设置 → Domains 输入域名
2. 在 DNS 服务商添加 CNAME 记录指向 cname.vercel-dns.com
3. 等待 HTTPS 证书自动生成（Let's Encrypt）

环境变量

# Vercel Dashboard → Settings → Environment Variables
LANGSMITH_API_KEY=***
ANTHROPIC_API_KEY=***

对于前端项目，环境变量必须以 NEXT_PUBLIC_ 或 VITE_ 开头才会暴露给客户端。

Netlify 部署

配置文件

创建 netlify.toml：

[build]
  command = "npm run docs:build"
  publish = "docs/.vitepress/dist"

[build.environment]
  NODE_VERSION = "20"

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

部署步骤

1. 在 Netlify Dashboard 点击 Add New Site
2. Import from Git
3. 设置构建命令和发布目录
4. 点击 Deploy

自定义域名

1. 项目设置 → Domain Management
2. Add Custom Domain
3. 配置 DNS：Netlify 会自动提供 DNS 面板

Vercel vs Netlify

特性	Vercel	Netlify
定价	免费额度充足	免费额度充足
构建速度	较快	中等
Serverless	Edge Functions	Netlify Functions
访问速度（国内）	中	慢
优点	Next.js 生态	表单处理、Split Testing
国内访问	可能需要 CDN 加速	推荐配合 Cloudflare

国内加速方案

Vercel/Netlify 在国内访问速度较慢。推荐：

方案 1：Cloudflare 代理

1. 在 Cloudflare 添加站点
2. DNS 设置 CNAME 指向 Vercel/Netlify 默认域名
3. 开启 Proxy（橙色云朵）
4. 速度取决于 Cloudflare 中国节点

方案 2：阿里云 OSS + CDN

# 构建后同步到 OSS
npm run docs:build
ossutil cp -r docs/.vitepress/dist/ oss://your-bucket/ -u

然后在阿里云 CDN 配置域名和 HTTPS。

方案 3：GitHub Pages + CDN

# 使用 gh-pages 部署
npm install -g gh-pages
gh-pages -d docs/.vitepress/dist

配合 Cloudflare 或 阿里云 CDN 加速。

CI/CD 自动部署

GitHub Actions

# .github/workflows/deploy.yml
name: Deploy to Vercel
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm ci
      - run: npm run docs:build
      - uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID}}
          vercel-project-id: ${{ secrets.PROJECT_ID}}
          working-directory: ./

Vercel CLI

# 安装 CLI
npm i -g vercel

# 部署
vercel --prod

注意事项

1. 国内访问：Vercel/Netlify 的国内 CDN 节点不稳定，建议国内用户用阿里云
2. Serverless 限制：免费套餐有执行时间限制（Vercel 10s，Netlify 10s）
3. 构建时间：项目越大构建越慢，免费套餐有每月 600 分钟限制
4. 环境变量：敏感信息不要提交到代码中

参考

• Vercel 文档
• Netlify 文档
• 阿里云 ECS + Nginx 部署