Vercel
Vercel是一个基于云的静态网站托管和部署平台，旨在帮助开发者快速、安全地将静态网站部署到全球各地。Vercel提供了一组易于使用的CLI工具和API，可以支持从GitHub、GitLab、Bitbucket等代码托管服务中自动构建和部署静态网站。Vercel的托管服务基于CDN和HTTP/2技术，可以为全球用户提供快速和可靠的访问体验，并且支持自定义域名、SSL证书等高级特性。Vercel还提供了实时协作、预览、分支部署等功能，以帮助开发者更有效地管理和部署静态网站。由于Vercel的易用性、高性能和可扩展性，它已经成为一个备受欢迎的静态网站托管和部署平台，并被许多企业和开发者使用。
查看更多相关内容
Vercel 的 Serverless Functions 有哪些特点和限制？## Vercel 的 Serverless Functions 有哪些特点和限制？
Vercel 的 Serverless Functions 是一个强大的功能，允许开发者在 Vercel 平台上部署和运行后端逻辑，而无需管理服务器。这些函数具有许多独特的特点，同时也存在一些限制需要了解。
### Serverless Functions 的特点
#### 1. 自动扩展
**按需扩展**：
- 函数根据请求量自动扩展
- 从零到无限并发
- 无需手动配置服务器容量
- 自动处理流量峰值
**弹性伸缩**：
- 低流量时自动缩减到零
- 高流量时快速扩展
- 基于实际使用量计费
- 无需预付资源
#### 2. 全球边缘网络
**边缘部署**：
- 函数部署在全球边缘节点
- 请求路由到最近的节点
- 降低延迟，提升响应速度
- 更好的用户体验
**地理分布**：
- 50+ 全球边缘位置
- 自动地理位置路由
- 支持自定义区域配置
- 智能负载均衡
#### 3. 冷启动优化
**快速启动**：
- 优化的冷启动时间
- 保持函数热状态
- 预热机制
- 智能资源分配
**持续运行**：
- 活跃函数保持运行状态
- 减少冷启动频率
- 更快的响应时间
- 更好的性能
#### 4. 多种运行时支持
**支持的运行时**：
- Node.js（推荐）
- Python
- Go
- Ruby
- 其他（通过自定义配置）
**Node.js 版本**：
- 支持 Node.js 14.x、16.x、18.x、20.x
- 自动检测项目使用的 Node.js 版本
- 可在 `vercel.json` 中指定版本
- 支持最新的 Node.js 特性
#### 5. 简单的 API 设计
**导出默认函数**：
```javascript
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Hello World' });
}
```
**支持多种 HTTP 方法**：
```javascript
export default function handler(req, res) {
if (req.method === 'GET') {
// 处理 GET 请求
} else if (req.method === 'POST') {
// 处理 POST 请求
}
}
```
**Edge Runtime**：
```javascript
export const runtime = 'edge';
export default function handler(request) {
return new Response('Hello from Edge!');
}
```
#### 6. 环境变量支持
**安全的环境变量**：
- 在 Dashboard 中配置
- 支持不同环境（Production、Preview、Development）
- 自动注入到函数运行环境
- 不暴露在客户端代码中
**访问环境变量**：
```javascript
const apiKey = process.env.API_KEY;
```
#### 7. 内置中间件支持
**Next.js Middleware**：
```javascript
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
return NextResponse.next();
}
```
**自定义中间件**：
- 请求预处理
- 响应后处理
- 认证和授权
- 日志记录
### Serverless Functions 的限制
#### 1. 执行时间限制
**免费计划**：
- 最大执行时间：10 秒（Hobby 计划）
- Pro 计划：60 秒
- Enterprise 计划：可协商
**超时处理**：
```javascript
// 设置合理的超时时间
export const config = {
maxDuration: 30, // 30 秒
};
```
**最佳实践**：
- 避免长时间运行的任务
- 使用异步处理模式
- 将长任务拆分为多个函数
- 使用队列处理后台任务
#### 2. 内存限制
**内存配额**：
- 免费计划：1024 MB
- Pro 计划：最高 3008 MB
- Enterprise 计划：可协商
**内存配置**：
```javascript
// 在 vercel.json 中配置
{
"functions": {
"api/**/*.js": {
"memory": 2048
}
}
}
```
**内存优化**：
- 避免加载大型数据集
- 使用流式处理
- 及时释放不再使用的资源
- 监控内存使用情况
#### 3. 请求体大小限制
**限制**：
- 最大请求体大小：4.5 MB
- 包括文件上传、JSON 数据等
**处理大文件**：
```javascript
// 使用流式处理
export default async function handler(req, res) {
const chunks = [];
for await (const chunk of req) {
chunks.push(chunk);
}
const buffer = Buffer.concat(chunks);
// 处理数据
}
```
**替代方案**：
- 使用对象存储（如 Vercel Blob）
- 使用第三方存储服务
- 实现分片上传
- 使用直接上传到云存储
#### 4. 并发限制
**免费计划**：
- 每个函数的并发请求数有限制
- 超过限制的请求会被排队或拒绝
**Pro 计划**：
- 更高的并发限制
- 更好的性能保证
- 优先处理
**优化策略**：
- 使用缓存减少函数调用
- 实现请求去重
- 使用 CDN 缓存静态响应
- 优化函数性能
#### 5. 冷启动延迟
**冷启动时间**：
- 首次请求可能需要额外时间
- 通常在几百毫秒到几秒之间
- 取决于函数复杂度和运行时
**减少冷启动**：
- 保持函数轻量
- 避免不必要的依赖
- 使用 Edge Runtime（更快的冷启动）
- 实现预热机制
#### 6. 文件系统限制
**只读文件系统**：
- 函数运行在只读环境中
- 不能写入本地文件系统
- 临时文件在函数结束后被删除
**解决方案**：
```javascript
// 使用外部存储
import { put } from '@vercel/blob';
export default async function handler(req, res) {
const { url } = await put('file.txt', 'Hello World', {
access: 'public',
});
res.json({ url });
}
```
**推荐存储方案**：
- Vercel Blob
- AWS S3
- Cloudflare R2
- 其他对象存储服务
#### 7. 网络限制
**出站网络**：
- 支持所有出站网络请求
- 可以调用外部 API
- 可以连接数据库
**入站网络**：
- 只能通过 HTTP/HTTPS 访问
- 不支持原始 TCP/UDP 连接
- 不支持 WebSocket（除非使用 Edge Runtime）
**数据库连接**：
```javascript
import { MongoClient } from 'mongodb';
let client;
export default async function handler(req, res) {
if (!client) {
client = new MongoClient(process.env.MONGODB_URI);
await client.connect();
}
const db = client.db('mydb');
const data = await db.collection('users').find({}).toArray();
res.json(data);
}
```
### 最佳实践
#### 1. 函数设计
**单一职责**：
- 每个函数只做一件事
- 保持函数简单和专注
- 便于测试和维护
**轻量级**：
- 最小化依赖
- 优化代码大小
- 避免不必要的库
**异步处理**：
- 使用 async/await
- 避免阻塞操作
- 使用 Promise 处理异步任务
#### 2. 性能优化
**缓存策略**：
```javascript
// 使用 Vercel KV 缓存
import { kv } from '@vercel/kv';
export default async function handler(req, res) {
const cached = await kv.get('data');
if (cached) {
return res.json(cached);
}
const data = await fetchData();
await kv.set('data', data, { ex: 3600 });
res.json(data);
}
```
**数据库连接池**：
- 重用数据库连接
- 使用连接池
- 避免每次请求都创建新连接
**响应压缩**：
- 启用 gzip 压缩
- 减小响应体大小
- 提升传输速度
#### 3. 错误处理
**完善的错误处理**：
```javascript
export default async function handler(req, res) {
try {
const data = await fetchData();
res.status(200).json(data);
} catch (error) {
console.error('Error:', error);
res.status(500).json({
error: 'Internal Server Error',
message: error.message
});
}
}
```
**日志记录**：
- 记录重要事件
- 使用结构化日志
- 监控错误率
#### 4. 安全性
**输入验证**：
```javascript
import { z } from 'zod';
const schema = z.object({
email: z.string().email(),
name: z.string().min(1),
});
export default async function handler(req, res) {
try {
const data = schema.parse(req.body);
// 处理数据
res.status(200).json({ success: true });
} catch (error) {
res.status(400).json({ error: 'Invalid input' });
}
}
```
**认证和授权**：
- 实现适当的认证机制
- 使用 JWT 或 session
- 验证用户权限
- 保护敏感端点
**环境变量安全**：
- 不要在代码中硬编码密钥
- 使用环境变量存储敏感信息
- 定期轮换密钥
#### 5. 监控和调试
**实时日志**：
- 查看 Vercel Dashboard 中的日志
- 使用 `console.log` 调试
- 监控函数执行时间
**性能监控**：
```javascript
export default async function handler(req, res) {
const start = Date.now();
try {
const data = await fetchData();
const duration = Date.now() - start;
console.log(`Function executed in ${duration}ms`);
res.status(200).json(data);
} catch (error) {
console.error('Error:', error);
res.status(500).json({ error: 'Internal Server Error' });
}
}
```
**错误追踪**：
- 使用 Sentry 等错误追踪服务
- 设置错误告警
- 分析错误模式
### 使用场景
#### 1. API 端点
**RESTful API**：
```javascript
// pages/api/users/[id].js
export default async function handler(req, res) {
const { id } = req.query;
if (req.method === 'GET') {
const user = await getUser(id);
res.status(200).json(user);
}
}
```
**GraphQL API**：
- 使用 Apollo Server
- 集成 GraphQL
- 类型安全的 API
#### 2. Webhook 处理
**GitHub Webhook**：
```javascript
export default async function handler(req, res) {
if (req.method === 'POST') {
const event = req.headers['x-github-event'];
// 处理 webhook 事件
res.status(200).json({ received: true });
}
}
```
**第三方 Webhook**：
- Stripe Webhook
- Slack Webhook
- 自定义 Webhook
#### 3. 表单处理
**表单提交**：
```javascript
export default async function handler(req, res) {
if (req.method === 'POST') {
const { name, email } = req.body;
// 处理表单数据
res.status(200).json({ success: true });
}
}
```
**文件上传**：
- 使用 Vercel Blob
- 实现分片上传
- 处理大文件
#### 4. 数据库操作
**CRUD 操作**：
```javascript
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export default async function handler(req, res) {
if (req.method === 'GET') {
const users = await prisma.user.findMany();
res.status(200).json(users);
}
}
```
**数据库集成**：
- PostgreSQL
- MySQL
- MongoDB
- 其他数据库
### 与其他服务的比较
#### 1. vs AWS Lambda
**Vercel 优势**：
- 更简单的配置
- 更好的开发体验
- 自动集成 Next.js
- 全球边缘网络
**AWS Lambda 优势**：
- 更长的执行时间
- 更多的运行时支持
- 更低的成本（大规模）
- 更多的集成选项
#### 2. vs Cloudflare Workers
**Vercel 优势**：
- 更长的执行时间
- 更大的内存限制
- 更好的 Node.js 支持
- 更丰富的生态系统
**Cloudflare Workers 优势**：
- 更快的冷启动
- 更低的延迟
- 更高的并发限制
- 更便宜的价格
#### 3. vs Netlify Functions
**Vercel 优势**：
- 更好的 Next.js 集成
- 更快的部署
- 更详细的日志
- 更好的边缘函数支持
**Netlify Functions 优势**：
- 更长的执行时间
- 更多的运行时支持
- 更好的 Go 支持
### 总结
Vercel 的 Serverless Functions 提供了：
**优势**：
1. 自动扩展，无需管理服务器
2. 全球边缘网络，低延迟
3. 简单的 API 设计，易于使用
4. 多种运行时支持
5. 与 Next.js 深度集成
**限制**：
1. 执行时间限制
2. 内存限制
3. 请求体大小限制
4. 并发限制
5. 冷启动延迟
6. 只读文件系统
7. 网络限制
了解这些特点和限制，可以帮助开发者更好地设计和实现 Serverless Functions，充分发挥 Vercel 平台的优势。
服务端 · 2月21日 16:50
Vercel 与 Next.js 的集成优势是什么？## Vercel 与 Next.js 的集成优势是什么？
Vercel 与 Next.js 的集成可以说是天作之合，因为 Vercel 的创始团队也是 Next.js 的创建者。这种深度集成带来了许多独特的优势，使得在 Vercel 上部署 Next.js 应用成为最佳选择。
### 深度集成的技术优势
#### 1. 零配置部署
**自动检测和优化**：
- Vercel 自动识别 Next.js 项目
- 自动配置构建设置和路由
- 无需手动配置 `vercel.json`
- 自动应用 Next.js 特定的优化
**智能构建**：
- 自动识别页面类型（静态、动态、ISR）
- 优化构建流程
- 自动处理图片优化
- 智能缓存策略
#### 2. Serverless Functions 无缝支持
**API Routes 部署**：
```javascript
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from Vercel' });
}
```
**自动部署为 Serverless 函数**：
- 每个 API Route 自动成为独立的 Serverless 函数
- 自动处理函数的冷启动
- 优化的函数内存和超时配置
- 自动扩展以应对流量
#### 3. 增量静态再生成（ISR）优化
**原生支持**：
```javascript
export async function getStaticProps() {
return {
props: { data: await fetchData() },
revalidate: 60 // 每 60 秒重新生成
};
}
```
**Vercel 特定优化**：
- 智能的缓存失效策略
- 后台重新生成，不影响用户体验
- 分布式缓存确保一致性
- 自动处理 CDN 缓存
#### 4. 边缘运行时支持
**Edge Runtime**：
```javascript
export const runtime = 'edge';
export default function handler() {
return new Response('Hello from Edge!');
}
```
**优势**：
- 在全球边缘节点执行代码
- 极低的延迟
- 自动地理位置路由
- 优化的冷启动时间
### 性能优化
#### 1. 图片优化
**自动图片优化**：
```jsx
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero"
width={800}
height={600}
priority
/>
```
**Vercel 优化**：
- 自动生成多种尺寸和格式
- WebP、AVIF 等现代格式支持
- 智能的懒加载
- CDN 缓存优化后的图片
#### 2. 字体优化
**next/font 集成**：
```jsx
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
```
**优势**：
- 自动优化字体加载
- 零布局偏移
- 自动托管字体文件
- 智能的字体子集化
#### 3. 代码分割和懒加载
**自动优化**：
- 路由级别的代码分割
- 组件级别的懒加载
- 自动预加载关键资源
- 优化的包大小
### 开发体验提升
#### 1. 预览部署
**Pull Request 预览**：
- 每个 PR 自动生成预览 URL
- 实时更新预览
- 独立的环境变量
- 便于代码审查
#### 2. 实时日志
**详细的日志信息**：
- 构建日志
- 运行时日志
- 错误堆栈跟踪
- 性能指标
#### 3. Analytics 集成
**Vercel Analytics**：
```jsx
import { Analytics } from '@vercel/analytics/react';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
);
}
```
**功能**：
- Web Vitals 监控
- 用户行为分析
- 性能洞察
- 无需额外配置
### 高级功能支持
#### 1. 中间件支持
**Next.js Middleware**：
```javascript
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
return NextResponse.rewrite(new URL('/dashboard', request.url));
}
export const config = {
matcher: '/home/:path*',
};
```
**Vercel 优势**：
- 在边缘运行中间件
- 极快的响应时间
- 自动扩展
- 支持复杂的路由逻辑
#### 2. Server Components 支持
**React Server Components**：
```jsx
// Server Component
async function UserProfile({ userId }) {
const user = await fetchUser(userId);
return <div>{user.name}</div>;
}
```
**优势**：
- 自动在服务器端渲染
- 减少客户端 JavaScript
- 更快的首屏加载
- 更好的 SEO
#### 3. Streaming 支持
**渐进式渲染**：
```jsx
import { Suspense } from 'react';
export default function Page() {
return (
<div>
<Header />
<Suspense fallback={<Loading />}>
<SlowComponent />
</Suspense>
</div>
);
}
```
**Vercel 优化**：
- 自动支持 Streaming
- 优化的传输协议
- 更快的 Time to First Byte (TTFB)
- 更好的用户体验
### 部署和运维优势
#### 1. 自动扩展
**按需扩展**：
- 自动处理流量峰值
- 无需手动配置服务器
- 全球边缘网络
- 高可用性保证
#### 2. 回滚功能
**一键回滚**：
- 保留所有历史部署
- 快速回滚到任何版本
- 零停机时间
- 简单的版本管理
#### 3. 环境管理
**多环境支持**：
- Production、Preview、Development 环境
- 独立的环境变量
- 环境特定的配置
- 简化的环境切换
### 成本效益
#### 1. 免费额度
**免费计划包含**：
- 无限带宽
- 100GB 带宽
- 6,000 分钟构建时间
- 100GB-Hours Serverless Functions
- 无限预览部署
#### 2. 按需付费
**付费计划优势**：
- 更高的配额
- 优先支持
- 团队协作功能
- 高级分析
### 与其他平台的对比
#### 1. vs Netlify
**Vercel 优势**：
- 更好的 Next.js 支持
- 更快的边缘函数
- 更详细的日志
- 更好的开发体验
#### 2. vs AWS Amplify
**Vercel 优势**：
- 更简单的配置
- 更快的部署
- 更好的预览部署
- 更直观的界面
#### 3. vs 自托管
**Vercel 优势**：
- 零运维成本
- 自动扩展
- 全球 CDN
- 自动 SSL
### 最佳实践
#### 1. 利用 ISR
- 对动态内容使用 ISR
- 设置合理的 revalidate 时间
- 使用 on-demand revalidation
- 监控缓存命中率
#### 2. 优化图片
- 使用 next/image 组件
- 提供正确的尺寸
- 使用 priority 属性
- 启用自动格式转换
#### 3. 使用 Edge Runtime
- 对需要低延迟的功能使用 Edge Runtime
- 注意 Edge Runtime 的限制
- 合理划分 Serverless 和 Edge 函数
#### 4. 监控性能
- 使用 Vercel Analytics
- 监控 Web Vitals
- 跟踪错误率
- 优化关键路径
### 实际应用案例
#### 1. 电商网站
**优势**：
- ISR 实现产品页面缓存
- Edge Functions 处理购物车
- 图片优化提升加载速度
- 全球 CDN 确保快速访问
#### 2. 内容平台
**优势**：
- SSG 生成静态页面
- ISR 更新内容
- 预览部署便于内容审核
- Analytics 了解用户行为
#### 3. SaaS 应用
**优势**：
- Serverless Functions 处理 API
- Middleware 处理认证
- Edge Runtime 提升响应速度
- 自动扩展应对用户增长
### 总结
Vercel 与 Next.js 的深度集成提供了：
1. **零配置体验**：自动识别和优化
2. **卓越性能**：边缘网络、CDN、优化
3. **开发效率**：预览部署、实时日志
4. **可扩展性**：自动扩展、高可用
5. **成本效益**：免费额度、按需付费
这种集成使得开发者能够专注于构建功能，而不必担心基础设施和部署细节，是 Next.js 应用的理想部署平台。
服务端 · 2月21日 16:50
Vercel 与其他部署平台（如 Netlify、AWS Amplify）相比有哪些优势和劣势？## Vercel 与其他部署平台（如 Netlify、AWS Amplify）相比有哪些优势和劣势？
选择合适的部署平台对于项目的成功至关重要。Vercel、Netlify 和 AWS Amplify 都是流行的前端部署平台，各有其特点和适用场景。下面将从多个维度对比这些平台。
### Vercel 详解
#### 优势
**1. Next.js 深度集成**
- Vercel 是 Next.js 的创建者，提供最佳支持
- 自动识别和优化 Next.js 项目
- 原生支持 ISR、SSG、SSR
- 无需配置即可获得最佳性能
**2. 全球边缘网络**
- 50+ 全球边缘节点
- 自动地理位置路由
- 低延迟访问
- 高可用性保证
**3. 零配置部署**
- 自动检测框架和配置
- 智能构建设置
- 自动 SSL 证书
- 简化的部署流程
**4. 开发体验**
- 实时日志和错误追踪
- 预览部署
- 快速回滚
- 直观的 Dashboard
**5. 性能优化**
- 自动图片优化
- 字体优化
- 代码分割
- CDN 缓存
#### 劣势
**1. 成本较高**
- Pro 计划 $20/月
- 超出配额费用较高
- 大规模部署成本增加
**2. 平台锁定**
- 某些功能是 Vercel 特有的
- 迁移到其他平台可能需要重构
- 依赖 Vercel 特定功能
**3. 限制较多**
- Serverless Functions 执行时间限制
- 内存限制
- 请求体大小限制
### Netlify 详解
#### 优势
**1. 多框架支持**
- 支持几乎所有前端框架
- 良好的 Hugo、Jekyll 支持
- 灵活的构建配置
- 自定义构建命令
**2. 强大的表单处理**
- 内置表单功能
- 无需后端即可处理表单
- 自动邮件通知
- 表单数据管理
**3. Functions 功能**
- 支持多种运行时（Node.js、Go、Python、Ruby）
- 更长的执行时间（免费计划 10 秒，付费计划 60 秒）
- 更大的内存限制
- 良好的 Go 支持
**4. 定价灵活**
- 免费计划更慷慨
- 按使用量计费
- 团队计划价格合理
- 企业级功能
**5. 插件生态**
- 丰富的插件系统
- 社区贡献的插件
- 易于扩展功能
- 自定义插件开发
#### 劣势
**1. Next.js 支持不如 Vercel**
- ISR 支持有限
- 某些 Next.js 特性不支持
- 需要额外配置
- 性能优化不如 Vercel
**2. 边缘功能较弱**
- Edge Functions 功能有限
- 边缘节点较少
- 边缘运行时支持有限
**3. Dashboard 体验**
- 界面不如 Vercel 直观
- 某些功能难以发现
- 学习曲线较陡
### AWS Amplify 详解
#### 优势
**1. AWS 生态集成**
- 与 AWS 服务深度集成
- 无缝连接 DynamoDB、Cognito、S3
- 使用 AWS 基础设施
- 企业级可靠性
**2. 全栈解决方案**
- 前端和后端统一管理
- 数据库、认证、存储一体化
- API Gateway 集成
- GraphQL 支持
**3. 强大的后端功能**
- Amplify CLI 功能强大
- 数据模型定义
- 实时订阅
- 离线支持
**4. 企业级特性**
- 高级安全功能
- 合规性支持
- 详细的访问控制
- 审计日志
**5. 灵活的部署**
- 支持多种部署方式
- 自定义部署流程
- 蓝绿部署
- 金丝雀发布
#### 劣势
**1. 学习曲线陡峭**
- AWS 概念复杂
- 需要理解 AWS 服务
- 配置复杂度高
- 文档分散
**2. 成本难以预测**
- AWS 服务计费复杂
- 按使用量计费
- 需要仔细监控
- 容易产生意外费用
**3. 部署速度较慢**
- 构建时间较长
- 部署流程复杂
- 不如 Vercel 快速
- 冷启动时间较长
### 详细对比
#### 1. 框架支持
| 框架 | Vercel | Netlify | AWS Amplify |
|------|--------|---------|-------------|
| Next.js | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| React | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| Vue.js | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| Angular | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| Svelte | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| Hugo | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| Jekyll | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
#### 2. 性能特性
| 特性 | Vercel | Netlify | AWS Amplify |
|------|--------|---------|-------------|
| 全球 CDN | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| Edge Functions | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ |
| ISR 支持 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐ |
| 图片优化 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| 字体优化 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐ |
#### 3. 开发体验
| 特性 | Vercel | Netlify | AWS Amplify |
|------|--------|---------|-------------|
| 易用性 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| 文档质量 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| 社区支持 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| Dashboard | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| CLI 工具 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
#### 4. 定价对比
| 计划 | Vercel | Netlify | AWS Amplify |
|------|--------|---------|-------------|
| 免费带宽 | 100GB/月 | 100GB/月 | 无限制 |
| 免费构建时间 | 6,000 分钟 | 300 分钟 | 1,000 分钟 |
| Pro 计划 | $20/月 | $19/月 | 按使用量 |
| 团队计划 | $20/用户/月 | $19/用户/月 | 按使用量 |
| 企业计划 | 定制 | 定制 | 定制 |
#### 5. 功能对比
| 功能 | Vercel | Netlify | AWS Amplify |
|------|--------|---------|-------------|
| 预览部署 | ✅ | ✅ | ✅ |
| 环境变量 | ✅ | ✅ | ✅ |
| 自定义域名 | ✅ | ✅ | ✅ |
| SSL 证书 | ✅ | ✅ | ✅ |
| 表单处理 | ❌ | ✅ | ✅ |
| 数据库集成 | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 认证服务 | ⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐⭐ |
| 存储服务 | ⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐⭐ |
### 适用场景分析
#### 选择 Vercel 的场景
**1. Next.js 项目**
- 最佳 Next.js 支持
- 自动优化
- 最佳性能
**2. 快速原型开发**
- 零配置部署
- 快速迭代
- 预览部署
**3. 全球化应用**
- 全球 CDN
- 低延迟
- 高可用性
**4. 团队协作**
- 直观的界面
- 实时日志
- 快速回滚
#### 选择 Netlify 的场景
**1. 多框架项目**
- 支持各种框架
- 灵活配置
- 静态站点生成器
**2. 表单密集型应用**
- 内置表单功能
- 无需后端
- 自动处理
**3. 预算有限的项目**
- 免费计划慷慨
- 按使用量计费
- 成本可控
**4. 需要 Go 运行时**
- 良好的 Go 支持
- 高性能
- 灵活配置
#### 选择 AWS Amplify 的场景
**1. AWS 生态项目**
- 已使用 AWS 服务
- 需要深度集成
- 企业级需求
**2. 全栈应用**
- 前后端统一管理
- 数据库、认证、存储
- GraphQL API
**3. 企业级应用**
- 高级安全功能
- 合规性要求
- 详细访问控制
**4. 复杂后端需求**
- 复杂的数据模型
- 实时功能
- 离线支持
### 迁移考虑因素
#### 从 Vercel 迁移到其他平台
**需要考虑**：
- Next.js 特定功能的兼容性
- ISR 配置的迁移
- 环境变量的重新配置
- 自定义域名的 DNS 更新
- 构建配置的调整
#### 从 Netlify 迁移到其他平台
**需要考虑**：
- 表单功能的替代方案
- 插件功能的迁移
- Functions 运行时的兼容性
- 构建命令的调整
- 环境变量的迁移
#### 从 AWS Amplify 迁移到其他平台
**需要考虑**：
- AWS 服务的解耦
- 数据库迁移
- 认证系统的迁移
- 存储服务的迁移
- API Gateway 的重新配置
### 最佳实践建议
#### 1. 评估需求
**技术需求**：
- 使用的框架
- 性能要求
- 功能需求
- 集成需求
**业务需求**：
- 预算限制
- 团队规模
- 项目规模
- 合规要求
#### 2. 试用和比较
**免费试用**：
- 利用免费计划
- 测试核心功能
- 评估性能
- 体验开发流程
**性能测试**：
- 测试加载速度
- 测试构建时间
- 测试部署速度
- 测试边缘功能
#### 3. 长期考虑
**可扩展性**：
- 平台能否支持增长
- 成本如何随规模变化
- 功能是否满足未来需求
**可迁移性**：
- 平台锁定程度
- 迁移难度
- 数据导出能力
**社区和生态**：
- 社区活跃度
- 文档质量
- 第三方集成
### 总结
**Vercel 最适合**：
- Next.js 项目
- 需要最佳性能
- 快速原型开发
- 全球化应用
**Netlify 最适合**：
- 多框架项目
- 表单密集型应用
- 预算有限的项目
- 需要 Go 运行时
**AWS Amplify 最适合**：
- AWS 生态项目
- 全栈应用
- 企业级应用
- 复杂后端需求
选择部署平台时，应该综合考虑技术需求、业务需求、预算和长期发展计划。没有绝对最好的平台，只有最适合自己项目需求的平台。
服务端 · 2月21日 16:50
Vercel 如何处理环境变量和配置管理？## Vercel 如何处理环境变量和配置管理？
Vercel 提供了一套完善的环境变量和配置管理系统，让开发者能够安全地管理不同环境下的配置信息。
### 环境变量管理
#### 1. 环境变量类型
Vercel 支持三种主要的环境变量类型：
- **Production（生产环境）**：用于生产部署，只有合并到主分支的代码才能访问
- **Preview（预览环境）**：用于预览部署，所有 Pull Request 和分支都能访问
- **Development（开发环境）**：用于本地开发，通过 Vercel CLI 访问
#### 2. 设置环境变量
可以通过以下方式设置环境变量：
**通过 Vercel Dashboard**：
1. 进入项目设置
2. 选择 "Environment Variables"
3. 添加变量名称和值
4. 选择适用的环境（Production、Preview、Development）
**通过 Vercel CLI**：
```bash
vercel env add MY_API_KEY production
vercel env add MY_API_KEY preview
vercel env add MY_API_KEY development
```
**通过 vercel.json 配置文件**：
```json
{
"env": {
"MY_API_KEY": "@my-api-key"
},
"build": {
"env": {
"BUILD_TIME_VAR": "value"
}
}
}
```
#### 3. 访问环境变量
在代码中可以通过 `process.env` 访问环境变量：
```javascript
const apiKey = process.env.MY_API_KEY;
```
### 配置管理
#### 1. vercel.json 配置文件
`vercel.json` 是 Vercel 的项目配置文件，可以定义构建、路由、重定向等设置：
```json
{
"version": 2,
"buildCommand": "npm run build",
"outputDirectory": "dist",
"devCommand": "npm run dev",
"installCommand": "npm install",
"framework": "create-react-app",
"regions": ["iad1"],
"functions": {
"api/**/*.js": {
"memory": 1024,
"maxDuration": 10
}
},
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "X-Content-Type-Options",
"value": "nosniff"
}
]
}
],
"rewrites": [
{
"source": "/api/:path*",
"destination": "/api/:path*"
}
]
}
```
#### 2. 框架自动检测
Vercel 能够自动检测并配置常见的前端框架：
- Next.js
- React (Create React App)
- Vue.js
- Angular
- Nuxt.js
- Gatsby
- SvelteKit
对于自动检测的框架，通常不需要手动配置 `vercel.json`。
#### 3. 构建配置
**构建命令**：定义如何构建项目
```json
{
"buildCommand": "npm run build"
}
```
**输出目录**：指定构建产物的目录
```json
{
"outputDirectory": "dist"
}
```
**安装命令**：自定义依赖安装命令
```json
{
"installCommand": "npm ci"
}
```
### 最佳实践
#### 1. 安全性
- 永远不要将敏感信息提交到代码仓库
- 使用环境变量存储 API 密钥、数据库连接字符串等敏感信息
- 定期轮换敏感的 API 密钥和令牌
#### 2. 环境隔离
- 为不同环境使用不同的配置
- 生产环境使用生产数据库和 API 端点
- 预览环境使用测试资源
#### 3. 默认值处理
在代码中为环境变量提供默认值：
```javascript
const apiUrl = process.env.API_URL || 'https://api.example.com';
```
#### 4. 类型检查
使用 TypeScript 或其他类型检查工具确保环境变量的类型安全：
```typescript
const API_URL = process.env.API_URL as string;
const PORT = parseInt(process.env.PORT || '3000', 10);
```
### 常见问题
#### 1. 环境变量未生效
确保：
- 变量已正确设置在对应的环境中
- 重新部署项目以应用新的环境变量
- 检查变量名称的大小写是否正确
#### 2. 本地开发访问环境变量
使用 Vercel CLI 拉取环境变量到本地：
```bash
vercel env pull .env.local
```
#### 3. 环境变量长度限制
Vercel 对环境变量的长度有限制，对于大型配置，考虑使用配置文件或环境变量管理服务。
服务端 · 2月21日 16:50
Vercel 如何处理错误和日志管理？## Vercel 如何处理错误和日志管理？
Vercel 提供了一套完善的错误处理和日志管理系统，帮助开发者快速识别、调试和解决问题。了解这些功能对于维护生产环境的稳定性至关重要。
### 日志管理
#### 1. 实时日志
**构建日志**：
- 显示构建过程的每一步
- 包括依赖安装、构建命令执行等
- 实时更新构建进度
- 显示构建错误和警告
**运行时日志**：
- Serverless Functions 的执行日志
- API Routes 的请求和响应日志
- 错误堆栈跟踪
- 性能指标
**访问日志**：
- HTTP 请求日志
- 响应时间
- 状态码
- 请求来源
#### 2. 日志查看方式
**通过 Vercel Dashboard**：
1. 进入项目页面
2. 选择 "Deployments" 标签
3. 点击特定的部署
4. 查看 "Build Logs" 或 "Function Logs"
**通过 Vercel CLI**：
```bash
# 查看最新部署的日志
vercel logs
# 查看特定部署的日志
vercel logs <deployment-url>
# 实时跟踪日志
vercel logs --follow
# 查看函数日志
vercel logs --filter function
```
#### 3. 日志过滤和搜索
**过滤选项**：
- 按时间范围过滤
- 按日志级别过滤（Error、Warning、Info）
- 按函数名称过滤
- 按请求 ID 过滤
**搜索功能**：
- 关键词搜索
- 正则表达式搜索
- 组合过滤条件
```bash
# 搜索包含特定关键词的日志
vercel logs --grep "error"
# 过滤特定函数的日志
vercel logs --filter "api/hello"
```
#### 4. 日志导出
**导出日志**：
- 支持导出为 JSON 格式
- 可以导出特定时间范围的日志
- 用于离线分析和存档
```bash
# 导出日志到文件
vercel logs --output logs.json
```
### 错误处理
#### 1. 构建错误
**常见构建错误**：
**依赖安装失败**：
```
Error: Cannot find module 'react'
```
**解决方案**：
- 检查 `package.json` 中的依赖
- 删除 `node_modules` 和 `package-lock.json`
- 重新安装依赖
- 检查 Node.js 版本兼容性
**构建命令失败**：
```
Error: Build failed with exit code 1
```
**解决方案**：
- 检查构建命令是否正确
- 查看详细的错误信息
- 本地重现构建过程
- 检查环境变量配置
**类型错误**：
```
Error: Type 'string' is not assignable to type 'number'
```
**解决方案**：
- 修复 TypeScript 类型错误
- 运行本地类型检查
- 使用 `--noEmit` 选项验证
#### 2. 运行时错误
**Serverless Functions 错误**：
**超时错误**：
```javascript
Error: Function execution timed out
```
**解决方案**：
- 优化函数执行时间
- 增加函数超时限制
- 使用异步处理模式
- 拆分长时间运行的任务
**内存不足错误**：
```javascript
Error: JavaScript heap out of memory
```
**解决方案**：
- 增加函数内存限制
- 优化内存使用
- 使用流式处理
- 减少数据加载量
**未捕获的异常**：
```javascript
Error: UnhandledPromiseRejectionWarning
```
**解决方案**：
- 添加适当的错误处理
- 使用 try-catch 块
- 实现全局错误处理器
- 记录所有未捕获的异常
#### 3. 部署错误
**域名配置错误**：
```
Error: Domain verification failed
```
**解决方案**：
- 检查 DNS 记录配置
- 等待 DNS 传播
- 验证域名所有权
- 检查 SSL 证书状态
**环境变量错误**：
```
Error: Missing required environment variable
```
**解决方案**：
- 检查环境变量配置
- 确保所有必需的变量都已设置
- 验证变量名称拼写
- 重新部署项目
### 错误追踪集成
#### 1. Sentry 集成
**安装 Sentry**：
```bash
npm install @sentry/nextjs
npx @sentry/wizard -i nextjs
```
**配置 Sentry**：
```javascript
// sentry.client.config.js
import * as Sentry from "@sentry/nextjs";
Sentry.init({
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
tracesSampleRate: 1.0,
});
```
**捕获错误**：
```javascript
try {
// 你的代码
} catch (error) {
Sentry.captureException(error);
}
```
#### 2. 其他错误追踪服务
**LogRocket**：
- 会话回放
- 性能监控
- 错误追踪
**Rollbar**：
- 实时错误报告
- 错误分组
- 部署跟踪
**Bugsnag**：
- 自动错误报告
- 错误分析
- 用户影响分析
### 性能监控
#### 1. Vercel Analytics
**集成 Analytics**：
```jsx
import { Analytics } from '@vercel/analytics/react';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
);
}
```
**监控指标**：
- Web Vitals（LCP、FID、CLS）
- 页面加载时间
- 用户行为分析
- 转化率追踪
#### 2. 自定义性能监控
**性能追踪**：
```javascript
export async function getServerSideProps() {
const start = Date.now();
try {
const data = await fetchData();
const duration = Date.now() - start;
// 记录性能指标
console.log(`Data fetch duration: ${duration}ms`);
return { props: { data } };
} catch (error) {
console.error('Error fetching data:', error);
return { props: { error: true } };
}
}
```
### 调试技巧
#### 1. 本地调试
**使用 Vercel CLI 本地开发**：
```bash
# 启动本地开发服务器
vercel dev
# 模拟生产环境
vercel dev --production
```
**本地环境变量**：
```bash
# 拉取环境变量
vercel env pull .env.local
# 推送环境变量
vercel env push .env.local
```
#### 2. 远程调试
**使用日志调试**：
```javascript
export default async function handler(req, res) {
console.log('Request received:', req.method, req.url);
console.log('Request body:', req.body);
try {
const result = await processData(req.body);
console.log('Processing result:', result);
res.status(200).json(result);
} catch (error) {
console.error('Processing error:', error);
res.status(500).json({ error: error.message });
}
}
```
#### 3. 性能分析
**使用 Chrome DevTools**：
- Network 面板分析请求
- Performance 面板分析性能
- Memory 面板分析内存使用
**使用 Lighthouse**：
- 运行性能审计
- 识别性能瓶颈
- 获取优化建议
### 告警和通知
#### 1. 部署失败告警
**配置告警**：
- 在 Vercel Dashboard 中设置
- 通过邮件通知
- 通过 Slack 通知
- 通过 Webhook 通知
**设置步骤**：
1. 进入项目设置
2. 选择 "Notifications"
3. 配置告警规则
4. 设置通知渠道
#### 2. 错误率告警
**监控错误率**：
- 设置错误率阈值
- 配置告警触发条件
- 定义通知频率
**集成第三方服务**：
- PagerDuty
- Opsgenie
- VictorOps
#### 3. 性能告警
**Web Vitals 告警**：
- LCP 阈值告警
- FID 阈值告警
- CLS 阈值告警
**自定义性能指标**：
- API 响应时间
- 数据库查询时间
- 函数执行时间
### 最佳实践
#### 1. 日志记录
**结构化日志**：
```javascript
export default async function handler(req, res) {
const logData = {
timestamp: new Date().toISOString(),
method: req.method,
url: req.url,
userId: req.headers['x-user-id'],
};
console.log(JSON.stringify(logData));
try {
const result = await processRequest(req);
console.log(JSON.stringify({ ...logData, status: 'success' }));
res.status(200).json(result);
} catch (error) {
console.error(JSON.stringify({
...logData,
status: 'error',
error: error.message
}));
res.status(500).json({ error: 'Internal Server Error' });
}
}
```
**日志级别**：
- Error：严重错误
- Warning：警告信息
- Info：一般信息
- Debug：调试信息
#### 2. 错误处理
**全局错误处理**：
```javascript
// pages/_error.js
export default function Error({ statusCode }) {
return (
<div>
<h1>Error: {statusCode}</h1>
<p>Something went wrong</p>
</div>
);
}
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
return { statusCode };
};
```
**API 错误处理**：
```javascript
export default async function handler(req, res) {
try {
// 验证请求
if (!req.body) {
return res.status(400).json({ error: 'Request body is required' });
}
// 处理请求
const result = await processRequest(req.body);
res.status(200).json(result);
} catch (error) {
// 记录错误
console.error('API Error:', error);
// 返回适当的错误响应
if (error instanceof ValidationError) {
return res.status(400).json({ error: error.message });
}
if (error instanceof AuthenticationError) {
return res.status(401).json({ error: 'Unauthorized' });
}
// 默认错误响应
res.status(500).json({ error: 'Internal Server Error' });
}
}
```
#### 3. 监控和分析
**定期审查日志**：
- 每日检查错误日志
- 分析错误模式
- 识别潜在问题
- 制定改进计划
**性能监控**：
- 监控关键指标
- 设置性能基线
- 识别性能退化
- 优化慢速端点
**用户反馈**：
- 收集用户错误报告
- 分析用户行为
- 改进用户体验
- 优先处理影响用户的问题
### 故障排除流程
#### 1. 问题识别
**症状识别**：
- 用户报告问题
- 监控告警触发
- 日志显示错误
- 性能指标下降
#### 2. 问题诊断
**收集信息**：
- 查看相关日志
- 检查错误堆栈
- 分析性能数据
- 复现问题
#### 3. 问题解决
**实施修复**：
- 修复代码
- 更新配置
- 优化性能
- 测试修复
#### 4. 验证和监控
**验证修复**：
- 部署修复
- 测试功能
- 监控日志
- 确认问题解决
### 总结
Vercel 的错误处理和日志管理提供了：
1. **全面的日志记录**：构建、运行时、访问日志
2. **强大的错误追踪**：集成第三方错误追踪服务
3. **实时监控**：性能指标和错误率监控
4. **灵活的告警**：多种通知渠道和告警规则
5. **便捷的调试工具**：本地和远程调试支持
通过有效利用这些功能，开发者可以快速识别和解决问题，提高应用的稳定性和可靠性。
服务端 · 2月21日 16:50
什么是 Vercel 及其核心功能？## 什么是 Vercel 及其核心功能？
Vercel 是一个基于云的静态网站托管和部署平台，专为现代前端开发而设计。它提供了以下核心功能：
### 核心功能
1. **自动部署**：与 GitHub、GitLab、Bitbucket 等代码托管服务集成，当代码推送到仓库时自动触发构建和部署流程。
2. **全球 CDN**：利用全球分布的边缘网络，确保用户能够快速访问部署的网站，提供低延迟的访问体验。
3. **零配置部署**：支持多种前端框架（如 Next.js、React、Vue、Angular 等），无需复杂的配置即可实现自动化部署。
4. **预览环境**：为每个 Pull Request 或分支自动生成预览 URL，方便团队进行代码审查和测试。
5. **自定义域名**：支持绑定自定义域名，并自动配置 SSL 证书，确保网站安全访问。
6. **环境变量管理**：提供安全的环境变量管理功能，支持不同环境（开发、预览、生产）的变量配置。
7. **Serverless Functions**：支持部署无服务器函数，允许在 Vercel 平台上运行后端逻辑。
8. **边缘网络**：利用边缘计算能力，在离用户最近的节点执行代码，提升性能。
### 技术特点
- 基于 HTTP/2 和 HTTP/3 协议，提供更快的加载速度
- 支持增量静态再生成（ISR）和静态站点生成（SSG）
- 提供实时日志和性能监控
- 支持团队协作和权限管理
### 适用场景
Vercel 特别适合以下场景：
- 静态网站和单页应用（SPA）
- Next.js 应用的部署
- Jamstack 架构项目
- 需要快速迭代和预览的项目
- 全球化部署需求的应用
### 与传统部署的区别
传统部署通常需要手动配置服务器、设置 CI/CD 流程、管理 SSL 证书等，而 Vercel 将这些流程自动化，大大简化了部署流程，让开发者能够专注于代码本身而非基础设施管理。
服务端 · 2月21日 16:45
Vercel 的定价模式是怎样的？## Vercel 的定价模式是怎样的？
Vercel 提供了灵活的定价模式，从免费计划到企业级解决方案，满足不同规模团队和项目的需求。了解 Vercel 的定价结构对于选择合适的计划和控制成本非常重要。
### 免费计划（Hobby）
#### 适用对象
- 个人开发者
- 学习和实验项目
- 小型个人网站
- 开源项目
#### 包含功能
**部署功能**：
- 无限项目数量
- 无限部署次数
- 自动 Git 集成
- 预览部署（无限）
- 生产部署（无限）
**性能特性**：
- 100GB 带宽/月
- 6,000 分钟构建时间/月
- 100GB-Hours Serverless Functions
- 全球 CDN
- 自动 SSL 证书
**开发工具**：
- 实时日志
- 错误追踪
- 部署历史
- 环境变量管理
- 团队协作（最多 1 人）
**限制**：
- 无团队协作功能
- 无优先支持
- 无高级分析
- 无自定义区域
### Pro 计划
#### 适用对象
- 专业开发者
- 小型团队
- 商业项目
- 需要更多资源的个人项目
#### 价格
- **个人 Pro**：$20/月
- **团队 Pro**：$20/用户/月
#### 包含功能
**部署功能**：
- 所有免费计划功能
- 1TB 带宽/月
- 10,000 分钟构建时间/月
- 1,000GB-Hours Serverless Functions
- 无限团队成员
**性能特性**：
- 更快的构建速度
- 优先队列处理
- 自定义区域选择
- 更长的函数执行时间（60 秒）
- 更大的函数内存（最高 3008 MB）
**开发工具**：
- 高级分析
- 性能监控
- 错误追踪集成
- Slack 通知
- 更详细的日志
**团队功能**：
- 团队协作
- 权限管理
- SSO（单点登录）
- 审计日志
- 项目共享
**支持**：
- 邮件支持（24 小时响应）
- Discord 社区支持
- 文档访问
### Enterprise 计划
#### 适用对象
- 大型企业
- 高流量网站
- 需要定制化解决方案
- 有合规性要求的组织
#### 价格
- 定制定价
- 需要联系销售团队
#### 包含功能
**部署功能**：
- 所有 Pro 计划功能
- 无限带宽
- 无限构建时间
- 无限 Serverless Functions
- 自定义 SLA
- 专属基础设施
**性能特性**：
- 最高性能保证
- 自定义区域部署
- 专属边缘节点
- 更长的函数执行时间（可协商）
- 更大的函数内存（可协商）
**安全与合规**：
- SOC 2 Type II 合规
- HIPAA 合规（可选）
- SSO/SAML
- IP 白名单
- 数据驻留选项
- 高级安全功能
**团队功能**：
- 无限团队成员
- 高级权限管理
- 组织级管理
- 审计日志
- 合规报告
**支持**：
- 专属客户成功经理
- 24/7 优先支持
- 技术顾问
- 培训和入职支持
- 定期业务审查
### 按需付费功能
#### 超出配额的使用
**带宽**：
- Pro 计划：$40/100GB
- Enterprise：包含无限带宽
**构建时间**：
- Pro 计划：$0.10/分钟
- Enterprise：包含无限构建时间
**Serverless Functions**：
- Pro 计划：$0.60/GB-Hour
- Enterprise：包含无限 Functions
#### 额外功能
**自定义域名**：
- 免费：无限自定义域名
- SSL 证书：免费自动颁发
**团队协作**：
- Pro 计划：$20/用户/月
- Enterprise：包含无限用户
### 成本优化策略
#### 1. 合理使用资源
**监控使用情况**：
- 定期检查 Dashboard 中的使用统计
- 设置使用量告警
- 分析资源使用模式
**优化构建时间**：
- 利用 Vercel 的缓存机制
- 使用增量构建
- 优化依赖安装
**减少函数调用**：
- 实现缓存策略
- 使用 CDN 缓存
- 优化 API 设计
#### 2. 选择合适的计划
**评估需求**：
- 估算带宽使用量
- 评估构建时间需求
- 考虑团队规模
- 分析性能要求
**从免费开始**：
- 先使用免费计划
- 监控实际使用情况
- 根据需要升级
#### 3. 利用免费额度
**预览部署**：
- 充分利用无限预览部署
- 在合并前测试所有更改
- 减少生产环境问题
**缓存策略**：
- 合理配置 CDN 缓存
- 使用 ISR 减少函数调用
- 实现客户端缓存
### 计划对比
| 功能 | Hobby | Pro | Enterprise |
|------|-------|-----|------------|
| 价格 | 免费 | $20/月 | 定制 |
| 带宽 | 100GB/月 | 1TB/月 | 无限 |
| 构建时间 | 6,000 分钟/月 | 10,000 分钟/月 | 无限 |
| Serverless Functions | 100GB-Hours | 1,000GB-Hours | 无限 |
| 团队成员 | 1 人 | 无限 | 无限 |
| 自定义域名 | 无限 | 无限 | 无限 |
| SSL 证书 | 自动 | 自动 | 自动 |
| 预览部署 | 无限 | 无限 | 无限 |
| 自定义区域 | ❌ | ✅ | ✅ |
| 优先支持 | ❌ | ✅ | ✅ |
| SSO | ❌ | ✅ | ✅ |
| 审计日志 | ❌ | ✅ | ✅ |
| SLA | ❌ | 99.95% | 99.99%+ |
### 计费周期
#### 月度计费
- 按月计费
- 灵活取消
- 适合短期项目
#### 年度计费
- 享受折扣（通常 10-20%）
- 一次性支付
- 适合长期项目
### 免费试用
#### Pro 计划试用
- 14 天免费试用
- 无需信用卡
- 包含所有 Pro 功能
- 试用期结束后自动降级
#### Enterprise 试用
- 需要联系销售
- 定制试用方案
- 包含专属支持
### 付款方式
#### 支持的付款方式
- 信用卡（Visa、MasterCard、American Express）
- 借记卡
- PayPal（部分地区）
- 银行转账（Enterprise）
#### 发票
- 自动生成发票
- PDF 格式下载
- 发送到注册邮箱
- 支持自定义发票信息（Enterprise）
### 常见问题
#### Q1: 可以随时更改计划吗？
A: 是的，可以随时升级或降级计划。升级立即生效，降级在下一个计费周期生效。
#### Q2: 超出配额会发生什么？
A: 超出配额后，服务会继续运行，但会按使用量计费。可以设置使用上限以避免意外费用。
#### Q3: 免费计划适合生产环境吗？
A: 免费计划可以用于小型生产项目，但有限制。对于商业项目，建议使用 Pro 或 Enterprise 计划。
#### Q4: 如何监控使用情况？
A: 在 Vercel Dashboard 的 "Usage" 页面可以查看详细的使用统计和成本分析。
#### Q5: 可以暂停项目吗？
A: 可以暂停项目以停止产生费用。暂停的项目不会产生带宽和函数使用费用。
### 成本估算示例
#### 小型博客网站
- 月访问量：10,000
- 带宽使用：约 5GB
- 构建次数：约 10 次
- **推荐计划**：Hobby（免费）
#### 中型电商网站
- 月访问量：100,000
- 带宽使用：约 50GB
- 构建次数：约 50 次
- Serverless Functions：约 200GB-Hours
- **推荐计划**：Pro（$20/月）
#### 大型企业应用
- 月访问量：1,000,000+
- 带宽使用：500GB+
- 构建次数：200+
- Serverless Functions：1,000GB-Hours+
- **推荐计划**：Enterprise（定制）
### 节省成本的技巧
#### 1. 优化资源使用
- 压缩图片和静态资源
- 使用 CDN 缓存
- 实现代码分割
- 优化数据库查询
#### 2. 利用免费功能
- 使用预览部署进行测试
- 利用无限自定义域名
- 使用自动 SSL 证书
- 利用免费的分析工具
#### 3. 团队协作优化
- 合理分配团队成员
- 使用项目共享功能
- 定期审查访问权限
- 利用 SSO 简化管理
#### 4. 监控和告警
- 设置使用量告警
- 定期审查账单
- 分析成本趋势
- 优化高成本项目
### 总结
Vercel 的定价模式提供了：
1. **灵活性**：从免费到企业级，满足不同需求
2. **透明度**：清晰的价格和配额
3. **可预测性**：按月计费，易于预算
4. **可扩展性**：随着业务增长轻松升级
5. **价值导向**：付费计划提供更多功能和更好的支持
选择合适的计划需要综合考虑项目规模、团队大小、性能要求和预算。建议从免费计划开始，根据实际使用情况逐步升级。
服务端 · 2月21日 16:45
Vercel 的部署流程是怎样的？## Vercel 的部署流程是怎样的？
Vercel 的部署流程设计得非常简洁高效，从代码提交到网站上线通常只需要几分钟时间。以下是详细的部署流程说明：
### 部署触发方式
#### 1. Git 集成部署（推荐）
这是最常用的部署方式，通过连接代码仓库实现自动化部署：
**支持的代码托管平台**：
- GitHub
- GitLab
- Bitbucket
**部署触发条件**：
- 推送代码到主分支（触发生产部署）
- 创建或更新 Pull Request（触发预览部署）
- 推送代码到其他分支（触发预览部署）
**设置步骤**：
1. 在 Vercel Dashboard 中创建新项目
2. 选择导入 Git 仓库
3. 授权 Vercel 访问你的代码仓库
4. 选择要部署的仓库和分支
5. 配置构建设置（通常自动检测）
6. 点击 "Deploy" 完成首次部署
#### 2. Vercel CLI 部署
使用命令行工具进行手动部署：
```bash
# 安装 Vercel CLI
npm i -g vercel
# 登录 Vercel
vercel login
# 部署到预览环境
vercel
# 部署到生产环境
vercel --prod
# 部署特定目录
vercel --path ./dist
```
#### 3. API 部署
通过 Vercel API 进行程序化部署：
```javascript
const { createDeployment } = require('@vercel/client');
const deployment = await createDeployment({
token: process.env.VERCEL_TOKEN,
path: './dist',
projectSettings: {
projectName: 'my-project'
}
});
```
### 部署流程详解
#### 阶段 1：代码拉取
1. Vercel 从 Git 仓库拉取最新代码
2. 检查 `.gitignore` 文件，排除不需要的文件
3. 解析项目的依赖关系
#### 阶段 2：依赖安装
1. **检测包管理器**：自动检测项目使用的包管理器（npm、yarn、pnpm）
2. **安装依赖**：运行相应的安装命令
- npm: `npm install`
- yarn: `yarn install`
- pnpm: `pnpm install`
3. **缓存优化**：Vercel 会缓存 `node_modules` 以加速后续部署
#### 阶段 3：构建过程
1. **构建命令执行**：运行配置的构建命令
- 默认：`npm run build`
- 可在 `vercel.json` 中自定义
2. **框架检测**：识别项目使用的框架并应用优化
3. **静态资源生成**：生成 HTML、CSS、JavaScript 等静态文件
4. **代码分割**：自动进行代码分割以优化加载性能
#### 阶段 4：部署上传
1. **文件上传**：将构建产物上传到 Vercel 的边缘网络
2. **CDN 分发**：将文件分发到全球各地的边缘节点
3. **缓存配置**：配置适当的缓存策略
#### 阶段 5：域名配置
1. **SSL 证书**：自动配置和更新 SSL 证书（Let's Encrypt）
2. **域名解析**：配置 DNS 记录
3. **自定义域名**：如果配置了自定义域名，进行相应的 DNS 设置
### 预览部署 vs 生产部署
#### 预览部署（Preview Deployments）
**特点**：
- 为每个 Pull Request 或分支生成唯一的 URL
- URL 格式：`https://project-name-branch-name.vercel.app`
- 自动更新：每次推送都会更新预览部署
- 独立环境：使用预览环境的环境变量
**用途**：
- 代码审查
- 功能测试
- 团队协作
- 客户演示
#### 生产部署（Production Deployments）
**特点**：
- 部署到主域名
- URL 格式：`https://project-name.vercel.app` 或自定义域名
- 使用生产环境的环境变量
- 更严格的构建检查
**触发条件**：
- 代码合并到主分支
- 手动触发生产部署
- 使用 `vercel --prod` 命令
### 部署优化策略
#### 1. 构建缓存
Vercel 自动缓存以下内容以加速构建：
- `node_modules` 目录
- 构建产物
- 依赖下载
#### 2. 增量构建
对于支持的项目，Vercel 可以进行增量构建：
- 只重新构建修改的页面
- 复用未改变的构建产物
- 大幅减少构建时间
#### 3. 并行构建
Vercel 支持并行构建多个项目或部署：
- 同时处理多个 Pull Request
- 并行执行构建步骤
- 提高团队开发效率
### 部署监控和日志
#### 1. 实时日志
Vercel 提供实时的构建和部署日志：
- 查看构建过程的每一步
- 识别构建错误
- 监控部署进度
#### 2. 部署历史
可以查看所有历史部署：
- 部署时间
- 部署状态
- 部署者信息
- Git commit 信息
#### 3. 错误通知
当部署失败时，Vercel 会：
- 在 Dashboard 中显示错误信息
- 发送邮件通知（如果配置）
- 在 Slack 或其他集成工具中通知
### 常见问题和解决方案
#### 1. 构建失败
**常见原因**：
- 依赖版本冲突
- 构建命令错误
- 环境变量缺失
- 内存不足
**解决方案**：
- 检查构建日志找出具体错误
- 确保所有依赖正确安装
- 验证环境变量配置
- 增加函数内存限制
#### 2. 部署超时
**原因**：
- 构建时间过长
- 网络问题
- 资源限制
**解决方案**：
- 优化构建流程
- 使用增量构建
- 检查网络连接
- 升级到付费计划获得更长构建时间
#### 3. 部署后页面 404
**原因**：
- 输出目录配置错误
- 路由配置问题
- 文件未正确生成
**解决方案**：
- 检查 `outputDirectory` 配置
- 验证路由设置
- 确认构建产物包含所有必要文件
### 最佳实践
#### 1. 使用预览部署
- 在合并代码前 always 使用预览部署进行测试
- 为每个功能分支创建预览部署
- 在 Pull Request 中分享预览 URL
#### 2. 配置正确的构建命令
- 确保 `package.json` 中有正确的 `build` 脚本
- 使用生产环境构建（如 `NODE_ENV=production`）
- 优化构建输出大小
#### 3. 管理环境变量
- 为不同环境配置不同的环境变量
- 不要在代码中硬编码敏感信息
- 定期更新和轮换 API 密钥
#### 4. 监控部署状态
- 设置部署失败通知
- 定期检查部署日志
- 使用 Vercel Analytics 监控性能
#### 5. 优化构建时间
- 利用 Vercel 的缓存机制
- 使用增量静态再生成（ISR）
- 避免不必要的构建步骤
服务端 · 2月21日 16:45
Vercel 的 Edge Functions 和 Serverless Functions 有什么区别？## Vercel 的 Edge Functions 和 Serverless Functions 有什么区别？
Vercel 提供了两种主要的计算服务：Edge Functions 和 Serverless Functions。虽然它们都用于运行后端代码，但在架构、性能、使用场景等方面有显著差异。理解这些区别对于选择合适的计算服务至关重要。
### Serverless Functions
#### 定义和架构
**什么是 Serverless Functions**：
- 运行在 Vercel 的无服务器计算平台上
- 基于 AWS Lambda 或类似技术
- 支持长时间运行的计算任务
- 适合处理复杂的业务逻辑
**架构特点**：
- 分布式服务器集群
- 冷启动时间较长（几百毫秒到几秒）
- 更长的执行时间限制
- 更大的内存配额
- 支持完整的 Node.js 运行时
#### 特性
**执行环境**：
- Node.js 运行时
- 支持所有 Node.js 模块
- 完整的文件系统访问（只读）
- 支持数据库连接
- 支持外部 API 调用
**性能特点**：
- 执行时间：最长 60 秒（Pro 计划）
- 内存：最高 3008 MB（Pro 计划）
- 冷启动：较慢（500ms - 3s）
- 并发：受限于计划配额
**使用场景**：
- 复杂的数据处理
- 长时间运行的 API
- 数据库操作
- 文件处理
- 第三方 API 集成
#### 代码示例
```javascript
// pages/api/hello.js
export default async function handler(req, res) {
// 复杂的数据处理
const data = await fetchComplexData();
// 数据库操作
const result = await database.query(data);
// 文件处理
const processed = await processFile(result);
res.status(200).json({ data: processed });
}
export const config = {
maxDuration: 30, // 30 秒执行时间
memory: 2048, // 2GB 内存
};
```
### Edge Functions
#### 定义和架构
**什么是 Edge Functions**：
- 运行在 Vercel 的全球边缘网络上
- 基于 V8 JavaScript 引擎
- 极快的响应时间
- 适合处理轻量级、低延迟的任务
**架构特点**：
- 全球分布的边缘节点
- 极快的冷启动时间（几毫秒）
- 更短的执行时间限制
- 较小的内存配额
- 受限的运行时环境
#### 特性
**执行环境**：
- Edge Runtime（基于 V8）
- 支持标准的 Web API
- 受限的 Node.js API
- 不支持文件系统访问
- 不支持数据库连接池
**性能特点**：
- 执行时间：最长 30 秒
- 内存：128 MB
- 冷启动：极快（< 50ms）
- 并发：高并发能力
**使用场景**：
- 请求路由和重定向
- A/B 测试
- 地理位置路由
- 认证和授权
- 内容个性化
- 缓存控制
#### 代码示例
```javascript
// middleware.js
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export const runtime = 'edge';
export function middleware(request: NextRequest) {
// 极快的响应
const geo = request.geo;
// 地理位置路由
if (geo?.country === 'CN') {
return NextResponse.rewrite(new URL('/zh', request.url));
}
// A/B 测试
const abTest = Math.random() > 0.5 ? 'A' : 'B';
const response = NextResponse.next();
response.cookies.set('ab-test', abTest);
return response;
}
export const config = {
matcher: '/((?!api|_next/static|_next/image|favicon.ico).*)',
};
```
### 详细对比
#### 1. 性能对比
| 特性 | Serverless Functions | Edge Functions |
|------|-------------------|----------------|
| 冷启动时间 | 500ms - 3s | < 50ms |
| 执行时间限制 | 60s (Pro) | 30s |
| 内存限制 | 3008 MB (Pro) | 128 MB |
| 响应延迟 | 中等 | 极低 |
| 并发能力 | 中等 | 高 |
#### 2. 运行时对比
| 特性 | Serverless Functions | Edge Functions |
|------|-------------------|----------------|
| 运行时 | Node.js | Edge Runtime (V8) |
| Node.js API | 完整支持 | 受限支持 |
| Web API | 支持 | 完整支持 |
| 文件系统 | 只读访问 | 不支持 |
| 数据库连接 | 支持 | 受限 |
#### 3. 使用场景对比
| 场景 | Serverless Functions | Edge Functions |
|------|-------------------|----------------|
| 复杂计算 | ✅ 适合 | ❌ 不适合 |
| 数据处理 | ✅ 适合 | ❌ 不适合 |
| 请求路由 | ⚠️ 可以 | ✅ 最佳 |
| A/B 测试 | ⚠️ 可以 | ✅ 最佳 |
| 认证授权 | ⚠️ 可以 | ✅ 最佳 |
| 文件处理 | ✅ 适合 | ❌ 不适合 |
| API 集成 | ✅ 适合 | ⚠️ 受限 |
### 选择指南
#### 选择 Serverless Functions 的场景
**1. 需要长时间运行的任务**
```javascript
// 处理大型数据集
export default async function handler(req, res) {
const largeDataset = await fetchLargeDataset();
const processed = await processLargeData(largeDataset);
res.status(200).json({ data: processed });
}
export const config = {
maxDuration: 60, // 需要更长的执行时间
};
```
**2. 需要数据库操作**
```javascript
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export default async function handler(req, res) {
// 复杂的数据库查询
const users = await prisma.user.findMany({
include: {
posts: true,
comments: true,
},
});
res.status(200).json({ users });
}
```
**3. 需要文件处理**
```javascript
import formidable from 'formidable';
export default async function handler(req, res) {
const form = formidable({ multiples: true });
const [fields, files] = await form.parse(req);
// 处理上传的文件
const processed = await processFiles(files);
res.status(200).json({ processed });
}
```
**4. 需要完整的 Node.js API**
```javascript
import fs from 'fs/promises';
import path from 'path';
export default async function handler(req, res) {
// 使用 Node.js 文件系统
const filePath = path.join(process.cwd(), 'data.json');
const data = await fs.readFile(filePath, 'utf-8');
res.status(200).json(JSON.parse(data));
}
```
#### 选择 Edge Functions 的场景
**1. 需要极快响应的路由**
```javascript
// middleware.js
import { NextResponse } from 'next/server';
export const runtime = 'edge';
export function middleware(request: NextRequest) {
// 极快的路由决策
if (request.nextUrl.pathname.startsWith('/api')) {
return NextResponse.rewrite(new URL('/api-handler', request.url));
}
return NextResponse.next();
}
```
**2. 需要地理位置路由**
```javascript
export function middleware(request: NextRequest) {
const geo = request.geo;
// 基于地理位置的路由
if (geo?.country === 'US') {
return NextResponse.rewrite(new URL('/us', request.url));
} else if (geo?.country === 'CN') {
return NextResponse.rewrite(new URL('/zh', request.url));
}
return NextResponse.next();
}
```
**3. 需要 A/B 测试**
```javascript
export function middleware(request: NextRequest) {
// A/B 测试逻辑
const variant = Math.random() > 0.5 ? 'A' : 'B';
const response = NextResponse.next();
response.cookies.set('ab-variant', variant);
// 根据变体修改响应
if (variant === 'B') {
response.headers.set('X-Experiment', 'B');
}
return response;
}
```
**4. 需要认证和授权**
```javascript
export function middleware(request: NextRequest) {
const token = request.cookies.get('auth-token');
// 快速认证检查
if (!token) {
return NextResponse.redirect(new URL('/login', request.url));
}
// 验证 token
const isValid = verifyToken(token.value);
if (!isValid) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
```
### 混合使用策略
#### 1. 分层架构
**Edge Functions 处理路由和认证**：
```javascript
// middleware.js
export function middleware(request: NextRequest) {
// 快速路由和认证
if (!isAuthenticated(request)) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
```
**Serverless Functions 处理业务逻辑**：
```javascript
// pages/api/data.js
export default async function handler(req, res) {
// 复杂的业务逻辑
const data = await processBusinessLogic(req.body);
res.status(200).json({ data });
}
```
#### 2. 缓存策略
**Edge Functions 处理缓存**：
```javascript
export function middleware(request: NextRequest) {
const cacheKey = request.url;
// 检查缓存
const cached = cache.get(cacheKey);
if (cached) {
return new Response(cached, {
headers: { 'X-Cache': 'HIT' }
});
}
return NextResponse.next();
}
```
**Serverless Functions 生成数据**：
```javascript
export default async function handler(req, res) {
// 生成数据
const data = await generateData();
// 设置缓存头
res.setHeader('Cache-Control', 'public, max-age=3600');
res.status(200).json(data);
}
```
### 性能优化建议
#### 1. Serverless Functions 优化
**减少冷启动**：
- 保持函数热状态
- 使用连接池
- 优化依赖加载
- 使用预编译
**优化执行时间**：
- 避免长时间运行的任务
- 使用异步处理
- 优化数据库查询
- 使用缓存
#### 2. Edge Functions 优化
**极简代码**：
- 只包含必要的逻辑
- 避免复杂的计算
- 使用轻量级依赖
- 优化代码大小
**利用缓存**：
- 使用 KV 存储
- 实现智能缓存
- 设置合理的缓存时间
- 使用 CDN 缓存
### 成本考虑
#### 1. Serverless Functions 成本
**计费方式**：
- 按执行时间计费
- 按内存使用计费
- 按请求次数计费
**成本优化**：
- 优化执行时间
- 减少内存使用
- 实现缓存策略
- 批量处理请求
#### 2. Edge Functions 成本
**计费方式**：
- 按请求次数计费
- 按执行时间计费
**成本优化**：
- 减少不必要的 Edge Functions
- 优化代码逻辑
- 使用缓存减少调用
- 合理使用路由规则
### 最佳实践
#### 1. 架构设计
**分层设计**：
- Edge Functions：路由、认证、缓存
- Serverless Functions：业务逻辑、数据处理
- 数据库：数据存储和查询
**职责分离**：
- 每个函数只做一件事
- 避免过度复杂
- 便于测试和维护
#### 2. 监控和调试
**性能监控**：
- 监控执行时间
- 监控冷启动时间
- 监控错误率
- 监控资源使用
**日志记录**：
- 记录关键操作
- 记录错误信息
- 记录性能指标
- 使用结构化日志
#### 3. 测试策略
**单元测试**：
- 测试函数逻辑
- 测试边界条件
- 测试错误处理
**集成测试**：
- 测试函数间交互
- 测试数据库集成
- 测试 API 集成
**性能测试**：
- 测试响应时间
- 测试并发能力
- 测试冷启动时间
### 总结
**Serverless Functions 适合**：
- 复杂的业务逻辑
- 长时间运行的任务
- 数据库操作
- 文件处理
- 需要完整 Node.js API
**Edge Functions 适合**：
- 极快响应的路由
- 地理位置路由
- A/B 测试
- 认证和授权
- 内容个性化
- 缓存控制
**最佳实践**：
- 根据需求选择合适的函数类型
- 混合使用两种函数类型
- 实现分层架构
- 优化性能和成本
- 持续监控和改进
通过理解 Serverless Functions 和 Edge Functions 的区别，开发者可以更好地设计应用架构，选择合适的计算服务，实现最佳的性能和成本效益。
服务端 · 2月21日 16:45
如何在 Vercel 上配置自定义域名和 SSL 证书？## 如何在 Vercel 上配置自定义域名和 SSL 证书？
在 Vercel 上配置自定义域名和 SSL 证书是一个简单直接的过程，Vercel 提供了自动化的 SSL 证书管理，使得这一过程变得非常便捷。
### 自定义域名配置
#### 1. 添加自定义域名
**通过 Vercel Dashboard 添加**：
1. 登录 Vercel Dashboard
2. 选择你的项目
3. 进入 "Settings" → "Domains"
4. 点击 "Add Domain"
5. 输入你的域名（如 `example.com` 或 `www.example.com`）
6. 选择域名类型：
- **Production**：用于生产环境
- **Preview**：用于预览部署
**通过 Vercel CLI 添加**：
```bash
# 添加生产域名
vercel domains add example.com
# 添加预览域名
vercel domains add preview.example.com --preview
```
#### 2. 域名类型
Vercel 支持以下域名类型：
**根域名**：
- `example.com`
- 需要配置 A 记录或 CNAME 别名记录
**子域名**：
- `www.example.com`
- `blog.example.com`
- `api.example.com`
- 使用 CNAME 记录
**通配符域名**：
- `*.example.com`
- 匹配所有子域名
- 需要付费计划
#### 3. DNS 配置
**配置步骤**：
1. 在 Vercel Dashboard 中查看 DNS 配置要求
2. 登录你的域名注册商（如 GoDaddy、Namecheap、Cloudflare）
3. 根据类型添加相应的 DNS 记录
**A 记录配置**（用于根域名）：
```
Type: A
Name: @
Value: 76.76.21.21
TTL: 3600 (或默认值)
```
**CNAME 记录配置**（用于子域名）：
```
Type: CNAME
Name: www
Value: cname.vercel-dns.com
TTL: 3600 (或默认值)
```
**使用 Cloudflare 时的特殊配置**：
如果你使用 Cloudflare 作为 DNS 提供商，需要注意：
1. **代理模式**：
- 启用 Cloudflare 代理（橙色云朵）时，Vercel 可能无法正确验证域名所有权
- 建议先禁用代理（灰色云朵），等待验证通过后再启用
2. **SSL 模式**：
- 设置为 "Full" 或 "Full (strict)"
- 不要使用 "Flexible" 模式
#### 4. 域名验证
**验证过程**：
1. 添加 DNS 记录后，Vercel 会自动验证域名配置
2. 验证通常需要几分钟到几小时（取决于 DNS 传播）
3. 验证成功后，域名状态会显示为 "Valid Configuration"
**验证检查**：
```bash
# 检查 DNS 记录是否生效
dig example.com
# 检查 CNAME 记录
dig www.example.com CNAME
# 检查 DNS 传播
nslookup example.com
```
### SSL 证书配置
#### 1. 自动 SSL 证书
Vercel 使用 Let's Encrypt 自动为你的域名提供 SSL 证书：
**特点**：
- 完全免费
- 自动续期
- 支持 HTTP/2 和 HTTP/3
- 自动配置
**证书类型**：
- **单域名证书**：保护单个域名
- **通配符证书**：保护主域名及其所有子域名（需要付费计划）
#### 2. SSL 证书自动管理
**自动颁发**：
- 域名验证通过后，Vercel 自动颁发 SSL 证书
- 通常在几分钟内完成
- 无需手动操作
**自动续期**：
- 证书到期前 30 天自动续期
- 无需担心证书过期
- 完全自动化
**证书监控**：
- Vercel 持续监控证书状态
- 发现问题时自动修复
- 在 Dashboard 中可以查看证书详情
#### 3. 强制 HTTPS
**自动重定向**：
Vercel 默认将所有 HTTP 请求重定向到 HTTPS：
```javascript
// 在 vercel.json 中配置
{
"redirects": [
{
"source": "/:path*",
"has": [
{
"type": "host",
"value": "example.com"
}
],
"destination": "https://example.com/:path*",
"permanent": true
}
]
}
```
**HSTS 配置**：
```javascript
{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "Strict-Transport-Security",
"value": "max-age=31536000; includeSubDomains"
}
]
}
]
}
```
### 高级配置
#### 1. 多域名配置
**添加多个域名**：
1. 在 Domains 设置中逐个添加域名
2. 为每个域名配置 DNS 记录
3. 等待所有域名验证通过
**主域名设置**：
```javascript
// 在 vercel.json 中设置主域名
{
"name": "my-project",
"alias": ["example.com", "www.example.com"]
}
```
#### 2. 环境特定域名
**预览环境域名**：
```bash
# 为预览部署添加特定域名
vercel domains add preview.example.com --preview
```
**开发环境域名**：
```bash
# 为开发环境添加域名
vercel domains add dev.example.com --dev
```
#### 3. 自定义 404 页面
**配置自定义 404 页面**：
```javascript
// 在 vercel.json 中配置
{
"rewrites": [
{
"source": "/404",
"destination": "/custom-404.html"
}
],
"notFound": true
}
```
### 故障排除
#### 1. 域名验证失败
**常见原因**：
- DNS 记录配置错误
- DNS 传播未完成
- 域名已被其他服务使用
- Cloudflare 代理模式问题
**解决方案**：
1. 检查 DNS 记录是否正确
2. 使用 DNS 检查工具验证记录
3. 等待 DNS 传播完成（最多 48 小时）
4. 如果使用 Cloudflare，暂时禁用代理
```bash
# 检查 DNS 记录
dig example.com +short
# 检查 WHOIS 信息
whois example.com
# 检查 DNS 传播
dig example.com @8.8.8.8
```
#### 2. SSL 证书颁发失败
**常见原因**：
- 域名验证未通过
- DNS 记录配置错误
- 防火墙阻止 Let's Encrypt 验证
- 域名已被其他证书使用
**解决方案**：
1. 确保域名验证通过
2. 检查 DNS 记录配置
3. 检查防火墙设置
4. 在 Dashboard 中手动触发证书重新颁发
#### 3. HTTPS 重定向不工作
**检查清单**：
1. 确认 SSL 证书已颁发
2. 检查 Vercel 配置中的重定向设置
3. 清除浏览器缓存
4. 使用隐私模式测试
### 最佳实践
#### 1. 域名管理
- 使用版本控制管理域名配置
- 定期检查域名到期时间
- 为重要域名设置自动续费
- 保留域名访问权限的备份
#### 2. SSL 安全
- 启用 HSTS 以强制 HTTPS
- 定期检查 SSL 证书状态
- 使用强密码保护域名账户
- 启用双因素认证
#### 3. 监控和告警
- 设置域名到期提醒
- 监控 SSL 证书状态
- 配置网站可用性监控
- 设置错误告警
#### 4. 性能优化
- 使用 CDN 加速静态资源
- 启用 HTTP/2 和 HTTP/3
- 优化 DNS 解析时间
- 使用现代 TLS 版本
### 常见问题解答
#### Q1: 可以使用免费域名吗？
A: 可以，Vercel 支持任何合法的域名，包括免费域名。但建议使用付费域名以获得更好的稳定性和支持。
#### Q2: SSL 证书有数量限制吗？
A: 免费计划中，每个项目可以添加无限数量的域名，每个域名都会自动获得 SSL 证书。
#### Q3: 如何迁移现有域名到 Vercel？
A:
1. 在 Vercel 中添加域名
2. 更新 DNS 记录指向 Vercel
3. 等待 DNS 传播
4. 验证配置正确
#### Q4: 可以使用自己的 SSL 证书吗？
A: Vercel 不支持上传自定义 SSL 证书，必须使用 Vercel 自动颁发的 Let's Encrypt 证书。
#### Q5: 域名配置需要多长时间生效？
A: 通常需要几分钟到几小时，最长可能需要 48 小时（DNS 传播时间）。
### 总结
在 Vercel 上配置自定义域名和 SSL 证书的主要优势：
1. **自动化**：SSL 证书自动颁发和续期
2. **简单**：直观的配置界面
3. **免费**：Let's Encrypt SSL 证书完全免费
4. **安全**：自动 HTTPS 重定向
5. **可靠**：99.99% 的正常运行时间保证
通过遵循上述步骤和最佳实践，你可以轻松地在 Vercel 上配置自定义域名和 SSL 证书，为你的网站提供安全、专业的访问体验。
服务端 · 2月21日 16:28