SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场vercel-deployment

vercel-deployment

部署与运维

查看项目

更新于 10-15 12:07

技能介绍

用途

该技能帮助你在 Vercel 上部署和配置 Next.js 应用，并遵循最佳实践。它围绕部署流程、环境变量、边缘函数、构建配置、数据库、预览部署、故障排查、监控、域名与安全等主题提供操作指引。

主要能力

快速部署检查清单

  • 在 Vercel 控制台设置环境变量
  • 配置构建命令（默认：next build）
  • 确认输出目录正确（默认：.next）
  • 指定 Node.js 版本（推荐 20.x）
  • 确保数据库可从 Vercel 网络访问
  • 不将密钥提交到 git

环境变量

  • 设置方式：Vercel 控制台（推荐用于密钥）的 Project Settings → Environment Variables，可为变量设置作用域：Production（仅生产部署）、Preview（PR 与分支预览）、Development（本地 vercel dev）。也可通过 CLI：vercel env add VARIABLE_NAME production、vercel env pull .env.local。
  • 命名规范：仅服务端使用（不暴露给浏览器）如 DATABASE_URL、SESSION_SECRET、ANTHROPIC_API_KEY；客户端暴露需加前缀 NEXT_PUBLIC_，如 NEXT_PUBLIC_APP_URL、NEXT_PUBLIC_ANALYTICS_ID。
  • 大小限制：每次部署总计 64 KB；Edge Functions 每个变量 5 KB；单个变量最大 64 KB。
  • 项目所需变量示例：认证（必需）SESSION_SECRET；AI 集成（聊天所需）ANTHROPIC_API_KEY；数据库（如使用外部）DATABASE_URL；推送通知（可选）VAPID_PUBLIC_KEY、VAPID_PRIVATE_KEY、VAPID_SUBJECT；OAuth（可选）GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET、GITHUB_CLIENT_ID、GITHUB_CLIENT_SECRET、APPLE_CLIENT_ID、APPLE_CLIENT_SECRET。

vercel.json 配置

可配置 buildCommand、framework、regions、headers（如对 /api/(.) 设置 Cache-Control: no-store, must-revalidate，对 /(.) 设置 X-Content-Type-Options、X-Frame-Options、X-XSS-Protection）、redirects、rewrites。

TypeScript 配置（2025 新增）

可使用 vercel.ts 与 @vercel/config 的 defineConfig 进行类型安全配置，支持 regions、headers、redirects 等异步函数形式。

Edge Functions

  • 适用场景：认证/授权、A/B 测试、基于地理位置的内容、请求/响应转换、简单快速操作。
  • 不适用：数据库连接（应使用 serverless）、长时间运行操作、大型依赖。
  • 示例：src/middleware.ts 中通过 matcher 匹配路径，检查 session cookie，未授权重定向到 /login，并添加 X-Request-Id 响应头。
  • API 路由中可设置 export const runtime = 'edge'，但仅限边缘兼容 API。

构建配置

  • package.json 脚本示例：build 为 next build，postbuild 为 npm run db:generate。
  • Node.js 版本可在 Vercel 控制台 Settings → General → Node.js Version 设置，或在 package.json 的 engines 中指定（如 "node": "20.x"）。
  • 本地检查构建：npm run build；分析包：ANALYZE=true npm run build。

数据库注意事项

  • SQLite 与 better-sqlite3 可在 Vercel serverless 函数中运行，但文件系统除 /tmp 外只读，数据在调用之间不持久，不适合生产数据存储。
  • 生产数据库选项：Turso（SQLite 边缘数据库，使用 @libsql/client）、Vercel Postgres（使用 @vercel/postgres）、PlanetScale（MySQL）、Neon（Postgres）。

预览部署

  • 每次 git push 创建预览部署，URL 形如 https://<project>-<branch>-<team>.vercel.app。
  • 可为预览环境设置独立环境变量（如 DATABASE_URL 生产与预览使用不同值）。
  • Vercel 自动在 PR 上评论预览 URL、构建状态与性能指标。

故障排查

  • 构建失败：先在本地运行 npm run build，常见问题包括缺少环境变量、TypeScript 错误、ESLint 错误（严格模式）、缺少依赖。
  • 环境变量问题：vercel env ls 验证，vercel env pull .env.local 拉取到本地调试。
  • 函数超时：可在 vercel.json 的 functions 中设置 maxDuration（Pro 最大 60s，Hobby 10s）。
  • 内存问题：可设置 memory（如 1024，会影响成本）。

监控

  • Vercel Analytics：在 layout 中引入 @vercel/analytics/react 的 Analytics 组件。
  • Speed Insights：引入 @vercel/speed-insights/next 的 SpeedInsights 组件。
  • 函数日志：vercel logs <deployment-url>，实时日志加 --follow。

域名

  • 自定义域名：Vercel 控制台 → Domains 添加域名，配置 DNS（A 记录 76.76.21.21 或 CNAME cname.vercel-dns.com），SSL 自动配置。
  • 重定向：可在 vercel.json 中按 host 条件重定向到新域名。

安全

  • 受保护路由：使用中间件进行认证检查。
  • 速率限制：Vercel 不为 serverless 函数提供内置速率限制，需在应用层实现。
  • 密钥管理：不提交 .env 文件，使用 Vercel 加密环境变量，定期轮换密钥，预览与生产使用不同密钥。

使用方式

该技能以文档形式提供部署与配置指引，包含检查清单、配置示例与命令。使用时按主题查阅对应章节，并在本地与 Vercel 控制台执行相应操作。

适用场景

需要将 Next.js 或 React 应用部署到 Vercel，并处理环境变量、边缘函数、构建配置、数据库连接、预览部署、故障排查、监控、域名与安全等任务的开发者。

限制

资料未提供该技能的安装方式、收费信息、平台限制或效果保证。部分内容（如数据库选项、超时与内存上限）为 Vercel 平台本身的约束说明。