Vercel 简介 #

什么是 Vercel？ #

Vercel 是一个面向前端开发者的云平台，专注于提供最佳的前端部署体验。它由 Next.js 的核心团队创建和维护，是部署现代 Web 应用的首选平台之一。

核心定位 #

text

┌─────────────────────────────────────────┐
│            Vercel 平台定位               │
├─────────────────────────────────────────┤
│  前端优先    →  专为前端开发者设计        │
│  零配置      →  开箱即用的部署体验        │
│  全球加速    →  边缘网络遍布全球          │
│  开发者体验  →  简洁高效的工作流程        │
└─────────────────────────────────────────┘

发展历史 #

text

2015年 ─── ZEIT 公司成立
    │
    │      专注于开发者工具
    │
2016年 ─── Now 平台发布
    │
    │      提供简单的部署服务
    │
2018年 ─── Next.js 被 Vercel 收购
    │
    │      深度整合框架与平台
    │
2020年 ─── 品牌更名为 Vercel
    │
    │      聚焦前端部署领域
    │
至今   ─── 全球领先的前端部署平台

核心特性 #

1. 零配置部署 #

Vercel 能够自动识别项目类型，无需繁琐的配置文件：

框架	自动识别	默认配置
Next.js	✅	自动优化、图片压缩
React	✅	Create React App 支持
Vue.js	✅	Vue CLI、Nuxt 支持
Angular	✅	Angular CLI 支持
Svelte	✅	SvelteKit 支持
静态站点	✅	自动静态托管

2. 全球边缘网络 #

text

                    ┌─────────────┐
                    │   用户请求   │
                    └──────┬──────┘
                           │
                           ▼
              ┌────────────────────────┐
              │    Vercel Edge Network  │
              │    (全球 CDN 节点)       │
              └────────────┬───────────┘
                           │
        ┌──────────────────┼──────────────────┐
        │                  │                  │
        ▼                  ▼                  ▼
   ┌─────────┐        ┌─────────┐        ┌─────────┐
   │ 亚洲节点 │        │ 欧洲节点 │        │ 美洲节点 │
   └─────────┘        └─────────┘        └─────────┘

3. Git 集成 #

Vercel 与 Git 深度集成，实现自动化部署：

Git 平台	支持情况	特性
GitHub	✅	完整支持，PR 预览
GitLab	✅	完整支持
Bitbucket	✅	完整支持

4. 预览部署 #

每次代码推送都会生成一个唯一的预览链接：

text

main 分支推送 → https://your-app.vercel.app
PR #123       → https://your-app-git-branch-username.vercel.app
Commit abc    → https://your-app-abc123.vercel.app

技术架构 #

部署流程 #

text

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│   Git 推送    │ ──▶ │   触发构建    │ ──▶ │   部署上线    │
└──────────────┘     └──────────────┘     └──────────────┘
                            │
                            ▼
                     ┌──────────────┐
                     │  自动检测框架  │
                     │  安装依赖     │
                     │  执行构建     │
                     │  优化资源     │
                     └──────────────┘

运行时环境 #

运行时	用途	特点
Node.js	Serverless Functions	支持 Node.js 18.x
Edge Runtime	Edge Functions	全球低延迟执行
Python	函数支持	支持 Python 3.x
Go	函数支持	支持 Go 1.x

与其他平台对比 #

Vercel vs Netlify #

特性	Vercel	Netlify
Next.js 支持	原生支持	良好支持
边缘函数	Edge Functions	Edge Handlers
构建速度	快速	快速
免费额度	充足	充足
学习曲线	平缓	平缓

Vercel vs GitHub Pages #

特性	Vercel	GitHub Pages
动态功能	支持	仅静态
构建时间	快	较慢
自定义域名	简单	需要配置
HTTPS	自动	自动
预览部署	支持	有限支持

Vercel vs 传统服务器 #

特性	Vercel	传统服务器
运维成本	无	高
扩展性	自动	手动
部署速度	秒级	分钟级
成本模式	按使用付费	固定费用

应用场景 #

1. 个人博客与作品集 #

markdown

适合场景：
- 个人技术博客
- 设计师作品集
- 简历网站
- 文档站点

2. 企业官网 #

markdown

适合场景：
- 公司官网
- 产品介绍页
- 营销落地页
- 活动页面

3. Web 应用 #

markdown

适合场景：
- SaaS 产品前端
- 管理后台
- 电商前端
- 社交应用

4. API 服务 #

markdown

适合场景：
- Serverless API
- BFF 层
- Webhook 处理
- 数据中转

免费额度 #

资源	免费额度	说明
带宽	100GB/月	足够中小项目
构建时长	6000分钟/月	团队共享
Serverless 函数	100GB-Hrs	执行时间
Edge 函数	无限制请求	有执行时间限制
域名	无限制	支持自定义域名

下一步 #

现在你已经了解了 Vercel 的基本概念，接下来学习账号注册与配置开始使用 Vercel！