mcpField
V
vercel

vercel

github.com/dicklesworthstone云与 DevOps7357 次安装8 周前更新
代码仓库

关于 vercel

面向开发者的 Vercel SaaS 部署工作流技能，涵盖托管、成本与配置管理。内容侧重命令行控制、预构建部署，以及应用与静态站点的托管拆分。

主要功能

  1. 01通过命令行设置和部署项目
  2. 02手动及预构建部署流程
  3. 03自动构建控制与成本指导
  4. 04环境变量和密钥管理
  5. 05Cloudflare DNS 与托管拆分指导

适用场景

  1. 01在 Vercel 上设置 Next.js SaaS 项目
  2. 02避免不必要的 Vercel 构建和用量
  3. 03管理部署密钥与环境变量
  4. 04拆分 SSR 应用和静态营销页面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dicklesworthstone/agent_flywheel_clawdbot_skills_and_integrations --skill vercel

安装后在 Claude Code 中输入/vercel确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
API-BUILD-CONTROL.md
ARCHITECTURE.md
AUTOMATION-BLUEPRINT.md
BUILD-CONTROL.md
CLI-COMMANDS.md
CLOUDFLARE-OFFLOAD.md
FOOTGUNS.md
TOKEN-AND-KEY-MANAGEMENT.md

详细介绍

面向 SaaS 的 Vercel

**核心洞见：**优化三个方面：运维控制（CLI 优先）、成本控制（避免意外构建）、正确性（缓存和身份验证不能破坏 SSR）。

目录

完整提示词

Set up [Next.js app / SaaS] on Vercel with:
1. Cloudflare DNS at: [domain.com]
2. Supabase project: [project-ref]
3. Build control: [manual deploys only / CI-triggered / default]
4. Cost offload: [R2 for assets / Cloudflare Pages for marketing / none]

Follow vercel-for-saas skill patterns.

架构决策

Where should traffic go?
│
├─ Authenticated app (SSR/RSC) ─────► Vercel (app.example.com)
│  • DNS-only in Cloudflare (no proxy)
│  • Manual deploys, prebuilt artifacts
│
├─ Marketing/docs (static) ─────────► Cloudflare Pages (www.example.com)
│  • Direct Upload for deploy control
│  • Aggressive caching, cheap bandwidth
│
└─ Uploads/assets (storage) ────────► Cloudflare R2 (assets.example.com)
   • Worker-signed URLs
   • No egress fees

**为何采用这种拆分方式：**Vercel 不建议使用反向代理。拆分主机名既能享受 Cloudflare 的优势，又不会破坏 Vercel 的边缘网络。

快速开始：手动部署

# 1. Pull settings + env (creates .vercel/)
vercel pull --yes --token $VERCEL_TOKEN

# 2. Build locally (skips Vercel build minutes)
vercel build --prod

# 3. Upload prebuilt artifact
vercel deploy --prebuilt --prod --token $VERCEL_TOKEN

这是成本控制中效果最显著的模式。

避免构建消耗额度

方法方式效果
禁用自动部署vercel.json："git": { "deploymentEnabled": false }★★★★★
预构建工作流在 Vercel 外部构建，再使用 --prebuilt 上传★★★★☆
忽略构建步骤退出码 0 = 跳过，退出码 1 = 构建（常被弄反！）★★☆☆☆
部署钩子仅通过 HTTP 触发部署★★★☆☆

配置即代码（推荐）：

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "git": { "deploymentEnabled": false }
}

详情：BUILD-CONTROL.md

环境变量

# List
vercel env ls

# Add secret (interactive)
vercel env add SECRET_NAME production

# Pull to local .env
vercel env pull .env.local

# Bulk sync via REST (for agents)
curl -X POST "https://api.vercel.com/v10/projects/$PROJECT/env?upsert=true" \
  -H "Authorization: Bearer $VERCEL_TOKEN" \
  -d '{"key":"VAR","value":"val","target":["production"]}'

关于 OIDC + Vault：TOKEN-AND-KEY-MANAGEMENT.md

域名设置

# Add domain to Vercel
vercel domains add example.com --token $VERCEL_TOKEN

# Then in Cloudflare DNS (DNS-only, not proxied):
# A record → Vercel IP  OR
# CNAME → cname.vercel-dns.com

工作流检查清单

阶段 1：初始设置
  • 安装 CLI：vercel、supabase、wrangler、jq
  • 设置令牌：VERCEL_TOKEN、CLOUDFLARE_API_TOKEN
  • 关联项目：vercel link --yes
  • 拉取环境变量：vercel pull --yes
阶段 2：成本优化
  • 将 "git": { "deploymentEnabled": false } 添加到 vercel.json
  • 在 CI 中设置预构建部署工作流
  • 将营销站点迁移到 Cloudflare Pages — CLOUDFLARE-OFFLOAD.md
  • 将资源迁移到 R2 — CLOUDFLARE-OFFLOAD.md
阶段 3：密钥与身份验证
  • 使用 vercel env add 或 REST API 存储密钥
  • 为云凭据配置 OIDC — TOKEN-AND-KEY-MANAGEMENT.md
  • 设置 Supabase 身份验证集成
阶段 4：数据库
  • 创建迁移：supabase migration new
  • 应用迁移：supabase migration up（本地）/ supabase db push（CI）
  • 生成类型：supabase gen types typescript

双按钮部署（适合 Agent）

# Marketing (Cloudflare Pages)
pnpm -C apps/marketing build
npx wrangler pages deploy apps/marketing/dist --branch=main

# App (Vercel prebuilt)
vercel pull --yes && vercel build --prod && vercel deploy --prebuilt --prod

关键注意事项

注意事项解决方法
忽略构建步骤的退出码逻辑相反0 = 跳过，1 = 构建（不太直观）
忽略的构建仍会计入配额改用 git.deploymentEnabled: false
Cloudflare 代理 + Vercel = 问题Vercel 域名使用仅 DNS 模式
提交了 .vercel/ 文件夹添加到 .gitignore
在配置文件中存放密钥使用 vercel env 或 wrangler secret put

完整列表：FOOTGUNS.md

核心命令

任务命令
部署预览vercel
部署生产环境vercel --prod
拉取设置vercel pull
本地构建vercel build
部署预构建产物vercel deploy --prebuilt
列出环境变量vercel env ls
添加环境变量vercel env add NAME target
将环境变量拉取到文件vercel env pull

完整 CLI 参考：CLI-COMMANDS.md

AGENTS.md 说明

将以下内容复制到项目的 AGENTS.md 中：

### Vercel

Vercel CLI is installed and authenticated.

Project: `<PROJECT_NAME>`

Common commands:

\`\`\`bash
vercel pull --yes         # Fetch settings + env
vercel build --prod       # Build locally (saves build minutes)
vercel deploy --prebuilt --prod  # Deploy prebuilt artifact
vercel env ls             # List env vars
vercel env add SECRET production  # Add secret
\`\`\`

**Cost tip:** Use prebuilt workflow to avoid burning build credits.

参考资料

主题参考资料
架构与成本模型ARCHITECTURE.md
停止构建消耗BUILD-CONTROL.md
基于 API 的构建控制API-BUILD-CONTROL.md
所有 CLI 命令CLI-COMMANDS.md
密钥、环境变量、OIDC、VaultTOKEN-AND-KEY-MANAGEMENT.md
R2 + Pages 成本分流CLOUDFLARE-OFFLOAD.md
完整自动化蓝图AUTOMATION-BLUEPRINT.md
常见错误FOOTGUNS.md

令牌设置（非交互式身份验证）

# Vercel: https://vercel.com/account/tokens
export VERCEL_TOKEN=xxx

# Cloudflare: https://dash.cloudflare.com/profile/api-tokens
export CLOUDFLARE_API_TOKEN=xxx

# Supabase: project settings → API
export SUPABASE_ACCESS_TOKEN=xxx

所有 CLI 都会自动读取这些内容，无需交互式登录。

评论

支持 Markdown