使用 Vercel 部署
Next.js、Astro 和静态站点的零配置部署，支持边缘函数和预览部署。
平台入门
为什么
Vercel 消除了前端全栈应用的基础设施管理。Git push 自动触发构建、预览部署和生产提升。边缘函数在全球靠近用户运行，冷启动低于 50ms。
何时使用
选择 Vercel 用于 Next.js/Astro/Remix 应用、需要每个 PR 预览部署的团队，以及需要边缘中间件但不想管理 Kubernetes 的项目。
如何做
1. 安装 Vercel CLI — npm i -g vercel
2. 关联项目 — 在项目根目录运行 "vercel"，导入或创建项目
3. 配置构建 — vercel.json 设置框架覆盖、环境变量、路由
4. 预览部署 — 每次 git push 自动创建预览 URL
5. 生产部署 — 合并到 main 分支或运行 "vercel --prod"
6. 自定义域名 — 在面板添加，配置 DNS CNAME 或域名服务器
7. 边缘函数 — 在 /api 创建函数，导出 config = { runtime: "edge" }
示例
// vercel.json — Astro 项目配置
{
"framework": "astro",
"buildCommand": "npm run build",
"outputDirectory": "dist_astro",
"functions": {
"api/*.ts": { "runtime": "edge" }
},
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "X-Content-Type-Options", "value": "nosniff" },
{ "key": "X-Frame-Options", "value": "DENY" }
]
}
],
"redirects": [
{ "source": "/old-path", "destination": "/new-path", "permanent": true }
]
}
// 边缘函数 — api/geo.ts
export const config = { runtime: "edge" };
export default function handler(req: Request) {
const country = req.headers.get("x-vercel-ip-country") || "unknown";
return Response.json({ country, message: `来自 ${country} 的问候` });
}
常见问题
- ⚠Vercel 上构建失败但本地通过 — 面板中缺少环境变量
- ⚠边缘函数超过 1MB 限制 — 动态导入或大依赖撑爆包体积
- ⚠Hobby 计划 100GB 带宽超限 — 图片优化或视频流快速消耗配额
- ⚠Serverless 函数冷启动延迟 — 空闲后首次请求需 2-5 秒
最佳实践
- ✓每个 PR 使用预览部署 — 合并前发现集成问题
- ✓在 Vercel 面板设置环境变量，不要提交 .env 到 git
- ✓为 Next.js 启用 Skew Protection — 处理发布期间的双版本部署
- ✓用 vercel.json rewrites 做 SPA 回退，不要用于 API 代理 — 改用边缘函数
常见问题解答
为什么 Vercel 上构建失败但本地通过？
Vercel 文件系统只读（除 /tmp）且 node_modules 缓存不同。检查构建不写项目根目录，Node 版本一致（用 .nvmrc 或 vercel.json）。
如何为预览和生产分别设环境变量？
Vercel 面板按环境作用域设变量。密钥标 Encrypted 绝不提交。预览变量默认作用于所有预览部署，除非限定到特定 Git 分支。
为什么 Next.js 在 Vercel 上慢？
可能每页都用 SSR。将静态页转 SSG（getStaticProps）或 ISR（revalidate）。Vercel Analytics 显示哪些路由是 SSR 及其 TTFB。
如何部署 monorepo 到 Vercel？
vercel.json 设 rootDirectory 为应用文件夹，Vercel 只构建该工作区。用 Turborepo 缓存——Vercel 原生支持，跳过未变应用。
vercel deploy 和 vercel --prod 有什么区别？
vercel deploy 创建预览部署（唯一 URL，不影响生产）。vercel --prod 提升到生产域名。先在预览测试再提升。