Vercel 入门：5 分钟部署你的第一个项目

Fred· AI Engineer & Developer Educator3 min read

Vercel 是将网站和 Web 应用部署到互联网上最简单的方式之一。在本指南中，你将了解什么是 Vercel、它如何工作，并部署你的第一个项目——全部只需大约 5 分钟。

什么是 Vercel？

Vercel 是一个用于部署网站和 Web 应用的云平台。它由 Next.js 背后的团队开发，专注于使部署快速且轻松。

把 Vercel 想象成：

  • 托管你网站的地方（就像代码的房东）
  • 将你的代码转换为在线网站的构建系统
  • 让你的网站在世界任何地方都快速加载的全球 CDN

Vercel 的特别之处：

  • 零配置：只需连接你的 Git 仓库并部署
  • 自动部署：将代码推送到 Git，Vercel 自动重建
  • 全球边缘网络：你的网站从全球 70 多个位置快速加载
  • 免费层级：对个人和小型项目有慷慨的限制

你可以在 Vercel 上部署什么？

Vercel 最适合：

前端框架：

  • React（使用 Vite、Create React App 等）
  • Next.js（Vercel 自己的框架）
  • Vue.js、Svelte、Angular
  • 静态 HTML/CSS/JavaScript 网站

全栈应用：

  • 带有 API 路由的 Next.js
  • 任何前端 + serverless 函数
  • Jamstack 网站

Vercel 不支持的：

  • 传统的后端服务器（24/7 运行的 Express.js、Django、Rails）
  • 长时间运行的进程
  • WebSocket 服务器
  • 数据库（你需要使用外部服务如 Supabase、PlanetScale 等）

Vercel 是为前端和 serverless 应用设计的，而不是传统的后端服务器。

Vercel 免费层级：包含什么？

免费的"Hobby"计划包括：

资源 免费层级限制
带宽 100GB/月
构建执行 6,000 分钟/月
Serverless 函数 100GB-小时/月
Edge 函数 500,000 次调用/月
项目 无限
部署 无限
团队成员 1（只有你）
自定义域名 无限（带免费 SSL）

这对以下情况完全足够：

  • 个人项目
  • 作品集网站
  • 副项目
  • 小型企业网站
  • 大多数业余项目

在达到任何限制之前，你会收到警告。

Vercel 如何工作：部署流程

当你部署到 Vercel 时会发生什么：

  1. 你将代码推送到 Git（GitHub、GitLab 或 Bitbucket）
  2. Vercel 自动检测推送
  3. Vercel 运行你的构建（npm run build 或类似的）
  4. Vercel 部署到边缘 - 跨全球 70 多个位置
  5. 你得到一个在线 URL（.vercel.app 域名）

每次推送到 Git 都会触发新的部署。这是完全自动的。

预览部署

每个分支和拉取请求都会得到自己的预览 URL：

  • 主分支 → 生产部署（your-site.vercel.app）
  • 功能分支 → 预览部署（your-site-git-feature-branch.vercel.app）
  • 拉取请求 → 带有可分享 URL 的预览

这使得在合并之前测试更改变得非常容易。

你的第一次部署：逐步指南

让我们将一个简单的网站部署到 Vercel。我们将使用一个基本的 React 应用，但对于任何框架，过程都是相同的。

前提条件

你需要：

  • 一个 GitHub 账户（免费）
  • 一个 Vercel 账户（免费 - 你将在步骤 2 中创建）
  • 一个要部署的项目（Git 仓库中的代码）

没有项目？ 使用这个入门模板：

# 创建新的 Vite React 应用
npm create vite@latest my-first-vercel-app -- --template react

# 进入目录
cd my-first-vercel-app

# 安装依赖
npm install

# 本地测试
npm run dev

访问 http://localhost:5173 查看它在本地运行。

步骤 1：将代码推送到 GitHub

如果你的项目还没有在 GitHub 上：

# 初始化 Git（如果尚未完成）
git init

# 添加所有文件
git add .

# 提交
git commit -m "Initial commit"

# 在 GitHub 上创建仓库，然后：
git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git
git branch -M main
git push -u origin main

你的代码现在在 GitHub 上了。

步骤 2：注册 Vercel

  1. 前往 vercel.com/signup
  2. 点击 "Continue with GitHub"
  3. 授权 Vercel 访问你的 GitHub 账户
  4. 完成你的个人资料（姓名、团队名称等）

你现在已登录 Vercel 仪表板。

步骤 3：导入你的项目

  1. 点击 "Add New..." 按钮
  2. 选择 "Project"
  3. 你会看到你的 GitHub 仓库列表
  4. 找到你的项目并点击 "Import"

Vercel 将分析你的仓库。

步骤 4：配置项目设置

Vercel 自动检测你的框架。对于我们的 Vite React 应用：

框架预设：Vite（自动检测）✅

根目录：（留空）

构建命令：

npm run build

（自动检测）✅

输出目录：

dist

（自动检测）✅

安装命令：

npm install

（自动检测）✅

环境变量：（暂时跳过——我们稍后会介绍）

步骤 5：部署

点击 "Deploy"

Vercel 将：

  1. 克隆你的仓库
  2. 安装依赖
  3. 运行构建命令
  4. 部署到边缘网络
  5. 给你一个在线 URL

查看构建日志 - Vercel 工作时。你会看到：

Installing dependencies...
Building project...
Deploying...
✓ Deployment ready

部署时间：对于简单项目通常 30-90 秒。

步骤 6：查看你的在线网站

部署完成后，你会看到：

  • 生产 URL：https://your-project.vercel.app
  • 部署状态：✅ Ready
  • 构建时间：~45 秒

点击 URL 查看你的在线网站！

恭喜！ 你刚刚将第一个项目部署到了 Vercel。

进行更新

现在让我们进行更改并看看自动部署的效果：

在本地编辑代码

// src/App.jsx（或任何文件）
function App() {
  return (
    <div>
      <h1>我的第一个 Vercel 部署！</h1>
      <p>这是从 Git 自动部署的！</p>
    </div>
  )
}

推送到 Git

git add .
git commit -m "Update homepage message"
git push origin main

Vercel 自动重建

几秒钟内，Vercel：

  1. 检测到你的推送
  2. 开始新的构建
  3. 部署更新后的网站

无需手动操作。 访问你的仪表板观看部署。

查看更新

刷新你的在线网站（your-project.vercel.app）并看到你的更改。

这就是 Vercel 的强大之处：推送到 Git，你的网站自动更新。

添加自定义域名

你的 .vercel.app URL 可以工作，但你可能想要自己的域名。

步骤 1：购买域名

从以下获取域名：

域名通常每年 10-20 美元。

步骤 2：将域名添加到 Vercel

  1. 在你的 Vercel 项目中，前往 Settings
  2. 点击侧边栏中的 Domains
  3. 输入你的域名（例如 example.com）
  4. 点击 Add

步骤 3：配置 DNS

Vercel 将显示要添加的 DNS 记录：

对于顶级域名（example.com）：

类型：A
名称：@
值：76.76.21.21

对于 www 子域名（www.example.com）：

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

在你的域名注册商处添加这些：

  1. 登录你的注册商
  2. 找到 DNS 设置（通常称为"DNS 管理"或"域名服务器"）
  3. 添加 A 记录和/或 CNAME 记录
  4. 保存更改

步骤 4：等待 DNS 传播

DNS 更改需要时间传播：

  • 最少：5-10 分钟
  • 典型：30 分钟 - 2 小时
  • 最多：24-48 小时

在 whatsmydns.net 检查状态

传播完成后，Vercel 自动提供 SSL 证书。你的网站将在自定义域名上使用 HTTPS 上线。

何时使用 Vercel vs 其他平台

使用 Vercel 当：

  • 你正在构建前端应用（React、Vue、Svelte 等）
  • 你想要从 Git 自动部署
  • 你重视开发者体验和速度
  • 你使用 Next.js（Vercel 就是为它设计的）
  • 你需要 serverless 函数用于 API

使用 Cloudflare Workers 当：

  • 你想要**无限带宽和更多部署控制**
  • 你有非常高的流量（Vercel 免费层级限制 100GB）
  • 你更喜欢最快的全球性能（300+ 区域）
  • 你想将静态网站与边缘函数结合

使用 Fly.io 当：

  • 你需要**24/7 运行的真正 Docker 容器**
  • 你正在部署传统后端服务器（Flask、Express、Rails）
  • 你想完全控制运行时环境
  • 你需要数据库或长时间运行的进程

对于大多数现代 Web 应用，Vercel 是最简单的选择。 但如果你需要无限带宽，探索 Cloudflare Workers。如果你需要真正的后端服务器，Fly.io 在其免费层级上运行实际的 Docker 容器。

结论

Vercel 使部署 Web 应用变得轻而易举：

  1. 将代码推送到 Git
  2. Vercel 自动构建和部署
  3. 你的网站在几秒钟内在全球上线

免费层级对大多数个人项目来说足够慷慨，开发者体验非常出色。

亲自尝试：今天就部署你的第一个项目，看看为什么开发者喜欢 Vercel。

构建你的第一个项目来部署

还没有准备好部署的项目？通过这些全面的教程从头开始构建一个：

每个教程都教你现代 Web 开发的基础知识，完成的项目将准备好部署到 Vercel 的免费层级。

有问题？在下方留言！

相关指南：

Fred

Fred

AUTHOR

Full-stack developer with 10+ years building production applications. I've deployed dozens of Next.js apps to Vercel and know all the gotchas.

Need a developer who gets it?

POC builds, vibe-coded fixes, and real engineering. Let's talk.

Hire Me →