从零开始：用 Vercel + GitHub 实现自动化部署与自定义域名配置

什么是 Vercel？

Vercel 是一个专注于 前端开发和静态站点部署 的云平台，以其极速、简单易用和开发者体验著称。它特别适合部署 Next.js、React、Vue、Svelte 等现代前端框架。

Vercel 与 GitHub 形成了前端开发的黄金组合：

创建新仓库


# 在 GitHub 上创建新仓库
git clone https://github.com/yourusername/your-project.git
cd your-project

初始化项目


# 如果是 Next.js 项目
npx create-next-app@latest . --typescript --tailwind --eslint
 
# 或者如果是现有项目
npm install

推送代码到 GitHub


git add .
git commit -m "Initial commit"
git push origin main

登录 Vercel
- 访问 vercel.com
- 使用 GitHub 账号登录
导入项目
- 点击 “New Project”
- 选择 “Import Git Repository”
- 选择你的 GitHub 仓库
- 点击 “Import”
配置部署设置
- Framework Preset：选择你的框架（如 Next.js）
- Root Directory：如果项目在子目录，指定路径
- Build Command：通常自动检测，如 npm run build
- Output Directory：构建输出目录，如 .next 或 dist
- Install Command：依赖安装命令，如 npm install
环境变量配置
- 添加必要的环境变量
- 如 API 密钥、数据库连接等
部署
- 点击 “Deploy”
- 等待构建完成

在 Vercel 项目设置中找到 “Domains” 部分：

添加你的自定义域名（如 yourdomain.com）
Vercel 会提供必要的 DNS 记录信息：
- A 记录：指向 Vercel 的 IP 地址
- CNAME 记录：指向 Vercel 的域名
- TXT 记录：用于域名验证

登录阿里云控制台
- 进入 “域名” 管理页面
- 找到你的域名，点击 “解析”
添加 DNS 记录
- A 记录：
  - 主机记录：@（代表根域名）
  - 记录值：Vercel 提供的 IP 地址
  - TTL：建议设置为 600 秒（10分钟）
- CNAME 记录：
  - 主机记录：www
  - 记录值：Vercel 提供的 CNAME 地址
  - TTL：建议设置为 600 秒（10分钟）
等待 DNS 生效
- 重要提醒：DNS 配置完成后，不是立即生效的！
- 通常需要等待 10分钟到24小时 不等
- 影响因素：
  - TTL 设置值
  - 各地 DNS 服务器缓存
  - 网络运营商 DNS 刷新策略

检查 DNS 传播状态
- 使用 whatsmydns.net 检查全球 DNS 传播状态
- 使用 nslookup 或 dig 命令检查本地 DNS 解析
等待 Vercel 验证完成
- 在 Vercel 控制台查看域名状态
- 显示 “Valid Configuration” 表示配置成功

症状：域名无法访问，显示 DNS 解析错误

解决方案：

症状：HTTPS 访问失败，证书错误

解决方案：

症状：代码推送后 Vercel 部署失败

解决方案：

通过 Vercel + GitHub 的组合，你可以实现：

✅ 零配置自动化部署
✅ 全球边缘网络加速
✅ 免费 HTTPS 证书
✅ 预览环境支持
✅ 无缝域名管理

特别提醒：配置阿里云域名后，请耐心等待 DNS 生效，通常需要 10 分钟以上，这是正常现象，不要急于修改配置。