xuanchi/XCDesktop

Fork 0

Files

ssdfasd 8bb2e643d8 chore: 添加远程桌面控制组件、文档和构建产物

2026-03-13 16:04:21 +08:00

40 KiB

Raw Blame History

Vercel 完整指南

本文档基于 Vercel 官方文档整理，涵盖 Vercel 平台的所有核心功能和使用方法。

一、平台概述

什么是 Vercel？

Vercel 是 AI 云平台，为开发者提供构建、部署和扩展 AI 驱动应用的统一平台。支持部署 Web 应用、代理工作负载以及介于两者之间的所有内容。

核心特性

零配置部署：支持主流框架的零配置部署
全球 CDN：内容分发至全球数据中心
自动 HTTPS：免费 SSL 证书
预览环境：每次 Git 推送自动生成预览 URL
Serverless Functions：无需管理服务器的后端函数
边缘网络：全球低延迟执行

订阅计划

计划	适用场景	价格
Hobby	个人项目、学习	免费
Pro	专业开发者、团队	$20/用户/月
Enterprise	大型企业	定制

二、快速入门

创建账户

访问 vercel.com/signup
选择 Git 提供商登录或使用邮箱
完成邮箱和手机验证

安装 CLI

# npm
npm i -g vercel

# pnpm
pnpm i -g vercel

# yarn
yarn global add vercel

# bun
bun i -g vercel

首次部署

# 进入项目目录
cd your-project

# 部署到生产环境
vercel --prod

部署流程

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  本地开发   │ ──▶ │  Git 推送   │ ──▶ │  自动构建   │
└─────────────┘     └─────────────┘     └─────────────┘
                                              │
                                              ▼
                    ┌─────────────┐     ┌─────────────┐
                    │  生成 URL   │ ◀── │  部署成功   │
                    └─────────────┘     └─────────────┘

三、模板市场

概述

Vercel Templates 是官方提供的模板市场，包含大量预构建的项目模板，帮助开发者快速启动项目开发。所有模板都是免费使用的。

访问地址：vercel.com/templates

模板分类

按用途分类

类别	说明	适用场景
AI	AI 应用模板	聊天机器人、AI Agent、语音接口
Starter	入门模板	快速启动新项目
E-commerce	电商模板	在线商店、商品展示
SaaS	SaaS 应用模板	多租户平台、企业应用
Blog	博客模板	个人博客、技术文章
Portfolio	作品集模板	个人简历、作品展示
Documentation	文档模板	技术文档、API 文档
Backend	后端模板	API 服务、微服务
CMS	内容管理模板	内容网站、新闻站点
Marketing Sites	营销网站模板	产品官网、落地页
Authentication	认证模板	登录系统、用户管理
Admin Dashboard	管理后台模板	数据管理、控制面板
Web3	区块链模板	DApp、NFT 市场
Monorepos	单体仓库模板	多包项目管理

按技术栈分类

类别	说明
Framework	Next.js、Nuxt、SvelteKit、Astro、Remix 等
CSS	Tailwind CSS、CSS Modules、Styled Components 等
Database	PostgreSQL、MongoDB、Redis、PlanetScale 等
CMS	Contentful、Sanity、Prismic、Strapi 等
Authentication	NextAuth.js、Auth0、Clerk、Supabase Auth 等

使用模板的方式

方式一：通过 Dashboard（推荐）

1. 访问 vercel.com/templates
2. 浏览或搜索模板
3. 点击模板查看详情
4. 点击 "Deploy" 按钮
5. 系统自动 Fork 到你的 GitHub
6. 自动部署到 Vercel

方式二：通过 CLI

# 列出可用模板
vercel init

# 初始化特定模板
vercel init nextjs-boilerplate
vercel init ai-chatbot
vercel init nextjs-commerce

# 查看模板帮助
vercel init --help

方式三：克隆 GitHub 仓库

# 直接克隆模板仓库
git clone https://github.com/vercel/next.js/tree/canary/packages/create-next-app

# 或从模板创建新仓库
# GitHub → Use this template → Create a new repository

模板筛选

在模板市场可以使用多种条件筛选：

按用途筛选：
- AI
- Starter
- Ecommerce
- SaaS
- Blog
- Portfolio
- CMS
- Backend
- ...

按框架筛选：
- Next.js
- Nuxt
- SvelteKit
- Astro
- Remix
- Vue
- React
- ...

按数据库筛选：
- PostgreSQL
- MongoDB
- MySQL
- Redis
- PlanetScale
- Supabase
- Neon
- ...

按 CMS 筛选：
- Contentful
- Sanity
- Prismic
- Strapi
- WordPress
- ...

创建自定义模板

你可以将自己的项目变成模板供他人使用：

创建示例仓库

# 项目结构清晰
# 包含 README.md
# 配置好所有必要文件

添加模板元数据

// vercel.json
{
  "name": "My Template",
  "description": "A custom template",
  "public": true
}

提交到 Vercel 模板库
- 发送 PR 到 vercel/templates
- 或在 Vercel Dashboard 标记项目为模板

模板最佳实践

选择模板时的考虑

1. 技术栈匹配
   - 团队熟悉的框架
   - 项目需求的技术支持

2. 功能完整性
   - 是否包含所需功能
   - 是否需要大量修改

3. 维护状态
   - 最近更新时间
   - 社区活跃度
   - Issue 处理情况

4. 文档质量
   - README 是否清晰
   - 配置说明是否完整

使用模板后的步骤

1. 阅读模板文档
   - README.md
   - 配置要求
   - 环境变量

2. 安装依赖
   npm install
   # 或
   pnpm install

3. 配置环境变量
   cp .env.example .env.local
   # 编辑 .env.local 填入实际值

4. 本地开发
   npm run dev

5. 自定义修改
   - 修改品牌信息
   - 调整样式
   - 添加功能

6. 部署上线
   git push
   # 或
   vercel --prod

官方模板仓库

Vercel 官方维护的模板仓库：

仓库	说明
vercel/next.js	Next.js 官方示例
vercel/templates	Vercel 模板集合
vercel/examples	示例项目集合

模板 vs 从零开始

对比项	使用模板	从零开始
启动速度	⚡ 分钟级	🐢 小时级
最佳实践	✅ 已内置	❌ 需自行配置
学习成本	低	高
自由度	中等	完全自由
代码质量	取决于模板	取决于自己

建议：

快速原型 / 学习 / 中小型项目 → 使用模板
特殊需求 / 大型定制项目 → 从零开始

四、项目与部署

项目概念

项目是部署到 Vercel 的应用程序，来自单个 Git 仓库。每个项目可以有多个部署：

一个生产部署
多个预生产部署

创建项目

通过 Dashboard：点击 "New Project" 按钮
通过 CLI：vercel project add
通过 API：POST 请求到 /v9/projects

部署方法

1. Git 部署（推荐）

# 连接 Git 仓库后，每次推送自动部署
git push origin main

2. CLI 部署

# 预览部署
vercel

# 生产部署
vercel --prod

3. Deploy Hooks

用于触发部署的唯一 URL：

# 创建 Deploy Hook 后
curl -X POST https://api.vercel.com/v1/integrations/deploy/xxx

4. REST API 部署

const response = await fetch('https://api.vercel.com/v13/deployments', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'my-project',
    files: [...],
    projectSettings: {...}
  })
});

部署环境

环境	说明	URL 格式
Local	本地开发	`localhost:3000`
Preview	预览环境	`project-branch-hash.vercel.app`
Production	生产环境	`your-domain.com`

管理部署

# 查看部署列表
vercel list

# 查看部署详情
vercel inspect [deployment-url]

# 重新部署
vercel redeploy [deployment-id]

# 回滚生产部署
vercel rollback [deployment-id]

# 删除部署
vercel remove [deployment-url]

五、Git 集成

支持的 Git 提供商

GitHub（免费/团队/企业云）
GitLab（免费/Premium/Ultimate/企业）
Bitbucket（免费/标准/高级）
Azure DevOps Pipelines

连接 Git 仓库

在 Dashboard 点击 "New Project"
选择 Git 仓库
配置项目设置
点击 "Deploy"

生产分支

默认规则（优先级从高到低）：

main 分支
master 分支
Git 仓库的默认分支

自定义生产分支：

进入项目 Settings → Environments
选择 Production 环境
修改 Branch Tracking

预览分支

所有非生产分支自动创建预览部署：

main (生产)     → https://your-domain.com
feature/a (预览) → https://project-feature-a-hash.vercel.app
develop (预览)   → https://project-develop-hash.vercel.app

私有仓库部署

Pro 团队：

提交作者必须是团队成员
非成员提交需要申请加入

Hobby 团队：

无法从组织私有仓库部署
需要升级到 Pro 或公开仓库

六、Vercel Functions

概述

Vercel Functions 允许运行服务器端代码，无需管理服务器。自动扩展、处理 API 和数据库连接。

创建函数

标准方式（推荐）

// api/hello.ts
export default {
  fetch(request: Request) {
    return new Response('Hello from Vercel!');
  },
};

HTTP 方法

// api/user.ts
export function GET(request: Request) {
  return new Response(JSON.stringify({ name: 'User' }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

export function POST(request: Request) {
  return new Response('Created', { status: 201 });
}

Next.js App Router

// app/api/hello/route.ts
export function GET(request: Request) {
  return new Response('Hello from Vercel!');
}

函数配置

// api/configured.ts
export const config = {
  runtime: 'nodejs', // 'nodejs' | 'edge' | 'python' | 'go' | 'ruby'
  regions: ['iad1', 'sfo1'], // 部署区域
  maxDuration: 60, // 最大执行时间（秒）
  memory: 1024, // 内存（MB）
};

export default function handler(request: Request) {
  return new Response('Configured function');
}

运行时支持

运行时	说明
Node.js	默认运行时，完整 Node.js API
Edge	全球边缘执行，低延迟
Python	支持 Python 函数
Go	支持 Go 函数
Ruby	支持 Ruby 函数
Bun	Bun 运行时

流式响应

// api/stream.ts
import { streamText } from 'ai';

export default async function handler(request: Request) {
  const result = await streamText({
    model: 'openai/gpt-4',
    prompt: 'Hello',
  });

  return result.toDataStreamResponse();
}

函数限制

限制	Hobby	Pro	Enterprise
最大执行时间	10秒	60秒	900秒
内存	1024 MB	3008 MB	自定义
包大小	50 MB	50 MB	自定义

定价

基于以下因素计费：

Active CPU：CPU 使用时间
Provisioned Memory：内存分配
Invocations：调用次数

七、路由中间件

概述

路由中间件在请求被处理之前执行代码，用于：

重定向
重写 URL
添加头部
认证检查
A/B 测试

创建中间件

// middleware.ts
export default function middleware(request: Request) {
  const url = new URL(request.url);

  // 重定向旧路径
  if (url.pathname === '/old-page') {
    return new Response(null, {
      status: 302,
      headers: { Location: '/new-page' },
    });
  }

  // 添加自定义头部
  const response = new Response('Hello');
  response.headers.set('X-Custom-Header', 'value');
  return response;
}

配置匹配路径

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.next();
}

// 配置匹配规则
export const config = {
  matcher: [
    '/api/:path*',  // 匹配 /api/* 路径
    '/admin/:path*', // 匹配 /admin/* 路径
  ],
  runtime: 'edge', // 或 'nodejs'
};

使用 Edge Config

// middleware.ts
import { get } from '@vercel/edge-config';

export default async function middleware(request: Request) {
  // 从 Edge Config 读取功能开关
  const featureEnabled = await get('feature-flag');
  
  if (featureEnabled) {
    return new Response('Feature enabled');
  }
  
  return new Response('Feature disabled');
}

请求限制

限制	值
最大 URL 长度	14 KB
最大请求体长度	4 MB
最大请求头数量	64
最大请求头长度	16 KB

八、环境变量

创建环境变量

通过 Dashboard：

进入项目 Settings → Environment Variables
添加键值对
选择适用的环境

通过 CLI：

# 添加环境变量
vercel env add DATABASE_URL

# 拉取环境变量到本地
vercel env pull .env.local

# 列出所有环境变量
vercel env ls

# 删除环境变量
vercel env rm DATABASE_URL production

环境类型

环境	说明
Production	生产部署时使用
Preview	预览部署时使用
Development	本地开发时使用（`vercel dev`）

代码中使用

// 服务端
const dbUrl = process.env.DATABASE_URL;

// 客户端（需要 NEXT_PUBLIC_ 前缀）
const apiKey = process.env.NEXT_PUBLIC_API_KEY;

预览分支特定变量

可以为特定分支设置不同的变量值：

# 为 feature 分支设置特定变量
vercel env add API_URL preview --branch feature

系统环境变量

Vercel 自动注入以下变量：

VERCEL=1
VERCEL_ENV=production|preview|development
VERCEL_URL=project-hash.vercel.app
VERCEL_REGION=iad1
VERCEL_GIT_PROVIDER=github
VERCEL_GIT_REPO_SLUG=my-repo
VERCEL_GIT_COMMIT_SHA=abc123
VERCEL_GIT_COMMIT_MESSAGE="Initial commit"

限制

每个环境最多 1000 个变量
总大小限制 64 KB
Edge Function 单个变量限制 5 KB

九、域名管理

添加域名

通过 Dashboard：

进入项目 Settings → Domains
输入域名
选择验证方式

通过 CLI：

# 添加域名
vercel domains add example.com

# 验证域名
vercel domains inspect example.com

DNS 配置

A 记录

类型: A
名称: @
值: 76.76.21.21

CNAME 记录

类型: CNAME
名称: www
值: cname.vercel-dns.com

域名类型

类型	说明	示例
根域名	主域名	`example.com`
子域名	域名的子集	`blog.example.com`
通配符	匹配所有子域名	`*.example.com`

分配域名到分支

# 将域名分配给特定分支
# staging.example.com → staging 分支

进入 Domains 设置
添加域名
选择 Git Branch

SSL 证书

Vercel 自动为所有域名生成 SSL 证书：

自动续期
免费
支持 Let's Encrypt

# 查看证书
vercel certs ls

# 手动颁发证书
vercel certs issue example.com

十、存储服务

存储产品概览

产品	用途	读取速度	写入速度
Vercel Blob	大文件存储	快	毫秒级
Edge Config	全局配置	超快（<1ms）	秒级
Marketplace	数据库（Postgres/Redis/Mongo）	取决于提供商	取决于提供商

Vercel Blob

用于存储图片、视频等大文件。

import { put } from '@vercel/blob';

// 上传文件
const blob = await put('profile.jpg', file, {
  access: 'public',
});

console.log(blob.url); // https://xxx.public.blob.vercel-storage.com/profile.jpg

import { list, del } from '@vercel/blob';

// 列出文件
const { blobs } = await list();

// 删除文件
await del(blob.url);

Edge Config

用于存储频繁读取、很少更改的数据。

import { get } from '@vercel/edge-config';

// 读取值
const featureFlag = await get('new-feature');

// 读取多个值
const values = await get(['feature-a', 'feature-b']);

使用场景：

功能开关
A/B 测试配置
关键重定向
IP 黑名单

Marketplace 数据库

通过 Vercel Marketplace 直接配置数据库：

类型	提供商
PostgreSQL	Neon, Supabase, PlanetScale
Redis/KV	Upstash, Redis
NoSQL	MongoDB, DynamoDB
Vector	Pinecone, Weaviate

十一、AI SDK

概述

Vercel AI SDK 是构建 AI 应用的 TypeScript 工具包，支持：

React / Next.js
Vue / Nuxt
Svelte / SvelteKit
Node.js

安装

# 安装 AI SDK
npm install ai

# 安装模型提供商
npm install @ai-sdk/openai
# 或
npm install @ai-sdk/anthropic

文本生成

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

const { text } = await generateText({
  model: openai('gpt-4'),
  prompt: '解释量子纠缠的概念。',
});

console.log(text);

流式文本生成

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

const result = await streamText({
  model: openai('gpt-4'),
  prompt: '写一首关于春天的诗。',
});

// 流式输出
for await (const textPart of result.textStream) {
  process.stdout.write(textPart);
}

结构化输出

import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-4'),
  schema: z.object({
    name: z.string(),
    ingredients: z.array(z.string()),
    steps: z.array(z.string()),
  }),
  prompt: '生成一个意大利面食谱。',
});

工具调用

import { generateText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { text } = await generateText({
  model: openai('gpt-4'),
  prompt: '旧金山今天的天气如何？',
  tools: {
    getWeather: tool({
      description: '获取指定位置的天气',
      parameters: z.object({
        location: z.string().describe('位置'),
      }),
      execute: async ({ location }) => ({
        location,
        temperature: 22,
        condition: '晴天',
      }),
    }),
  },
});

聊天界面（React）

'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          {m.role}: {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

十二、分析与监控

Web Analytics

功能：

访客统计
页面浏览量
跳出率
流量来源
用户地理分布

启用方式：

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );

隐私特性：

不使用 Cookie
匿名化数据
不跟踪跨站用户

Speed Insights

监控 Core Web Vitals 性能指标。

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

Observability

可观测性仪表板提供：

Vercel Functions 性能
外部 API 调用
Edge Requests
中间件执行
ISR 缓存状态

查看方式：

进入项目 Dashboard
点击 Observability 标签

日志

构建日志：永久保存

运行时日志：

计划	保留时间
Hobby	1 小时
Pro	1 天
Enterprise	3 天

# 查看日志
vercel logs [deployment-url]

# 实时日志
vercel logs [deployment-url] --follow

十三、安全功能

安全层

┌─────────────────────────────────────────┐
│            用户请求                      │
└─────────────────────────────────────────┘
                    │
                    ▼
┌─────────────────────────────────────────┐
│         DDoS 防护（自动）                │
└─────────────────────────────────────────┘
                    │
                    ▼
┌─────────────────────────────────────────┐
│         WAF（可配置）                    │
└─────────────────────────────────────────┘
                    │
                    ▼
┌─────────────────────────────────────────┐
│         Bot 管理                        │
└─────────────────────────────────────────┘
                    │
                    ▼
┌─────────────────────────────────────────┐
│         部署保护                        │
└─────────────────────────────────────────┘
                    │
                    ▼
┌─────────────────────────────────────────┐
│            应用                        │
└─────────────────────────────────────────┘

DDoS 防护

自动启用
全平台防护
无需配置

Web Application Firewall (WAF)

功能：

自定义规则
托管规则集
速率限制
AI Bot 过滤

配置规则：

// vercel.json
{
  "firewall": {
    "rules": [
      {
        "path": "/api/*",
        "rateLimit": {
          "requests": 100,
          "window": "1m"
        }
      }
    ]
  }
}

Bot 管理

自动识别恶意 Bot
可配置 Bot 白名单/黑名单
AI Bot 过滤规则

加密

所有部署自动 HTTPS
自动 SSL 证书
端到端加密

十四、图片优化

概述

Vercel 自动优化图片：

自动格式转换（WebP、AVIF）
响应式尺寸
智能压缩
CDN 缓存

使用方式

Next.js

import Image from 'next/image';

// 本地图片
import hero from './hero.png';

export default function Page() {
  return (
    <Image
      src={hero}
      alt="Hero"
      width={1200}
      height={600}
    />
  );
}

// 远程图片
export default function Page() {
  return (
    <Image
      src="https://example.com/image.jpg"
      alt="Remote"
      width={800}
      height={400}
    />
  );
}

配置远程图片

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        pathname: '/images/**',
      },
    ],
  },
};

export default nextConfig;

图片 URL 格式

/_next/image?url=/image.jpg&w=3840&q=75

参数：
- url: 图片地址
- w: 宽度（像素）
- q: 质量（1-100）

缓存行为

状态	说明
HIT	从缓存返回
MISS	转换后缓存再返回
STALE	返回缓存同时后台更新

最佳实践

使用响应式尺寸
配置正确的 remotePatterns
对于小图标（<10KB）使用 unoptimized
SVG 和 GIF 不需要优化

十五、定时任务

概述

Cron Jobs 用于定时执行任务，如：

数据备份
发送通知
更新订阅

配置方式

// vercel.json
{
  "crons": [
    {
      "path": "/api/cron/daily-report",
      "schedule": "0 0 * * *"
    },
    {
      "path": "/api/cron/hourly-check",
      "schedule": "0 * * * *"
    }
  ]
}

Cron 表达式

┌───────────── 分钟 (0-59)
│ ┌───────────── 小时 (0-23)
│ │ ┌───────────── 日期 (1-31)
│ │ │ ┌───────────── 月份 (1-12)
│ │ │ │ ┌───────────── 星期 (0-6, 0=周日)
│ │ │ │ │
* * * * *

示例：
0 0 * * *    → 每天午夜
0 */2 * * *  → 每2小时
30 9 * * 1-5 → 工作日早上9:30

创建 Cron 端点

// api/cron/daily.ts
export default async function handler(request: Request) {
  // 验证请求来自 Vercel Cron
  const authHeader = request.headers.get('authorization');
  if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
    return new Response('Unauthorized', { status: 401 });
  }

  // 执行任务
  await sendDailyReport();
  
  return new Response('OK');
}

限制

计划	每项目限制
Hobby	2 个 Cron
Pro	100 个 Cron
Enterprise	100 个 Cron

十六、CLI 命令行工具

常用命令

部署相关

# 部署
vercel                    # 预览部署
vercel --prod             # 生产部署

# 查看部署列表
vercel list
vercel list [project-name]

# 查看部署详情
vercel inspect [deployment-url]

# 重新部署
vercel redeploy [deployment-id]

# 回滚
vercel rollback [deployment-id]

# 删除部署
vercel remove [deployment-url]

项目管理

# 列出项目
vercel project ls

# 创建项目
vercel project add

# 查看项目详情
vercel project inspect [project-name]

# 删除项目
vercel project rm [project-name]

# 链接本地目录到项目
vercel link

环境变量

# 列出环境变量
vercel env ls

# 添加环境变量
vercel env add [name]

# 更新环境变量
vercel env update [name] [environment]

# 删除环境变量
vercel env rm [name] [environment]

# 拉取环境变量到本地
vercel env pull

域名管理

# 列出域名
vercel domains ls

# 添加域名
vercel domains add [domain]

# 查看域名详情
vercel domains inspect [domain]

# 购买域名
vercel domains buy [domain]

# 删除域名
vercel domains rm [domain]

DNS 管理

# 列出 DNS 记录
vercel dns ls [domain]

# 添加 DNS 记录
vercel dns add [domain] [name] [type] [value]

# 删除 DNS 记录
vercel dns rm [record-id]

其他命令

# 本地开发
vercel dev
vercel dev --port 3000

# 查看日志
vercel logs [deployment-url]
vercel logs [deployment-url] --follow

# 登录
vercel login
vercel login [email]

# 登出
vercel logout

# 查看当前用户
vercel whoami

# 切换团队
vercel switch [team-name]

# 打开项目 Dashboard
vercel open

全局选项

--token <token>      # 使用令牌认证
--scope <team>       # 指定团队范围
--yes               # 跳过确认
--version           # 显示版本
--help              # 显示帮助

十七、REST API

认证

# 创建访问令牌
# Dashboard → Settings → Tokens

# 使用令牌
curl -H "Authorization: Bearer YOUR_TOKEN" https://api.vercel.com/v9/projects

常用端点

项目

# 列出项目
GET /v9/projects

# 获取项目
GET /v9/projects/{id}

# 创建项目
POST /v9/projects

# 更新项目
PATCH /v9/projects/{id}

# 删除项目
DELETE /v9/projects/{id}

部署

# 列出部署
GET /v13/deployments

# 获取部署
GET /v13/deployments/{id}

# 创建部署
POST /v13/deployments

# 删除部署
DELETE /v13/deployments/{id}

环境变量

# 列出环境变量
GET /v9/projects/{id}/env

# 创建环境变量
POST /v9/projects/{id}/env

# 更新环境变量
PATCH /v9/projects/{id}/env/{key}

# 删除环境变量
DELETE /v9/projects/{id}/env/{key}

域名

# 列出域名
GET /v6/domains

# 添加域名
POST /v6/domains

# 验证域名
POST /v6/domains/{domain}/verify

# 删除域名
DELETE /v6/domains/{domain}

示例代码

// 创建部署
const response = await fetch('https://api.vercel.com/v13/deployments', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.VERCEL_TOKEN}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'my-project',
    files: [
      {
        file: 'index.html',
        data: '<html><body>Hello</body></html>',
      },
    ],
    projectSettings: {
      framework: null,
    },
  }),
});

const deployment = await response.json();
console.log(deployment.url);

十八、框架支持

支持的框架

框架	静态资源	SSR	ISR	中间件	图片优化
Next.js	✓	✓	✓	✓	✓
SvelteKit	✓	✓	✓	✓	✓
Nuxt	✓	✓	✓	✓	✓
Astro	✓	✓	✓	✓	✓
Remix	✓	✓	✗	✓	✗
Vite	✓	✗	✗	✓	✗
TanStack	✓	✓	✗	✓	✗
Create React App	✓	✗	✗	✓	✗

功能支持矩阵

✓ 支持 | ✗ 不支持 | N/A 不适用

Build Output API

用于自定义框架集成：

.vercel/output/
├── config.json
├── static/
│   └── index.html
├── functions/
│   └── api/
│       └── hello.func/
│           └── index.js
└── prerendered-files/
    └── blog/
        └── post.html

十九、部署保护

保护方法

方法	说明	计划可用性
Vercel Authentication	限制 Vercel 用户访问	所有计划
Password Protection	密码保护	Pro + $150/月或 Enterprise
Trusted IPs	IP 白名单	Enterprise

保护范围

范围	说明	保护内容
Standard Protection	标准保护	所有部署（生产域名除外）
All Deployments	全部保护	所有 URL，包括生产域名
Only Production	仅生产	仅生产部署
Only Preview	仅预览	仅预览部署

配置保护

进入项目 Settings → Deployment Protection
选择保护方法
选择保护范围
保存设置

绕过保护

Protection Bypass for Automation：

# 添加绕过密钥
# Settings → Deployment Protection → Bypass for Automation

# 使用密钥访问
curl -H "x-vercel-protection-bypass: YOUR_SECRET" https://preview.example.com

二十、计费与限制

计划限制

通用限制

限制	Hobby	Pro	Enterprise
项目数量	200	无限	无限
每日部署次数	100	6000	自定义
每次部署文件数	15000	15000	自定义
并发构建	1	12	自定义
构建时间限制	45分钟	45分钟	45分钟
磁盘空间	23 GB	23-64 GB	23-64 GB
Cron Jobs/项目	2	100	100

包含资源（Pro）

资源	包含量
Fast Data Transfer	1 TB
Function Invocations	1,000,000
Edge Requests	10,000,000
Edge Config Reads	1,000,000
Image Optimizations	10,000/月
Blob Storage	5 GB
Web Analytics Events	100,000

按需付费（Pro）

资源	价格
Fast Data Transfer	按区域定价
Function Invocations	$0.60/百万次
Edge Requests	按区域定价
Image Cache Reads	按区域定价
Blob Simple Operations	按区域定价
Monitoring Events	$1.20/百万次

环境变量限制

每个环境最多 1000 个变量
总大小限制 64 KB
Edge Function 单变量限制 5 KB

域名限制

计划	域名/项目
Hobby	50
Pro	无限*
Enterprise	无限*

*软限制：Pro 100,000，Enterprise 1,000,000

日志保留

计划	构建日志	运行时日志
Hobby	永久	1 小时
Pro	永久	1 天
Enterprise	永久	3 天

二十一、最佳实践

性能优化

1. 使用 ISR

// app/blog/[slug]/page.tsx
export const revalidate = 60; // 每60秒重新生成

export default async function BlogPost({ params }) {
  const post = await fetchBlogPost(params.slug);
  return <div>{post.content}</div>;
}

2. 图片优化

// 使用响应式图片
<Image
  src={hero}
  alt="Hero"
  sizes="100vw"
  fill
  priority
/>

3. 字体优化

// 使用 next/font
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

SEO 优化

1. Metadata API

// app/layout.tsx
export const metadata = {
  title: {
    default: 'My Website',
    template: '%s | My Website',
  },
  description: 'Description of my website',
  openGraph: {
    title: 'My Website',
    description: 'Description',
    images: ['/og-image.jpg'],
  },
};

2. Sitemap

// app/sitemap.ts
import { MetadataRoute from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
    },
    {
      url: 'https://example.com/about',
      lastModified: new Date(),
    },
  ];
}

开发工作流

1. 本地开发
   npm run dev

2. 创建分支
   git checkout -b feature/new-feature

3. 提交并推送
   git add . && git commit -m "Add new feature"
   git push origin feature/new-feature

4. Vercel 自动创建预览部署

5. 合并到 main 后自动生产部署

监控与调试

# 查看生产日志
vercel logs your-domain.com

# 查看函数日志
vercel logs your-domain.com --output raw | grep "api/"

# 使用 Speed Insights
// 添加组件到 layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next';

文档结束

40 KiB Raw Blame History Unescape Escape