无服务器部署与 CI CD 自动化
11.4 Vercel部署实战
Tip
以前部署一个网站需要一个团队干一周，现在只需要一个人干 3 分钟。
1. 为什么要学这个?
你写好了代码，本地测试完美。
你想给朋友看，发给了他 http://localhost:3000。
朋友说："打不开啊。"
你才意识到你需要一个公网服务器。
Vercel 让你把 localhost 变成全球可访问的 https://your-site.vercel.app。
2. 核心步骤 (HOW)
第一步：连接 GitHub
- 打开 vercel.com 并注册 (推荐使用 GitHub 账号直接登录)。
- 在 Dashboard 点击 "Add New..." -> "Project"。
- 在列表中找到你的 GitHub 仓库 (
my-next-app)，点击 Import。
第二步：配置项目 (关键)
Vercel 会自动检测到你是 Next.js 项目。 通常你不需要修改 Build Command。
唯独需要注意的是 Environment Variables (环境变量)：
- 本地开发：变量存在
.env文件里。 - 生产环境：变量必须手动填入 Vercel 的 Environment Variables 面板。
- 比喻：
.env是你家里的钥匙，不能挂在门上 (GitHub)，而要锁进保险柜 (Vercel Env Vars)。
第三步：Deploy
点击 Deploy 按钮。 等待 1-2 分钟。 屏幕上会撒花，并给你一个域名。 恭喜，你的应用上线了。
部署流程图
graph TD
Git["GitHub Repo"] -->|"Webhook 触发"| Vercel["Vercel Build Pipeline"]
subgraph Pipeline ["构建流水线"]
Vercel -->|"Step 1: git clone"| Source["源码"]
Source -->|"Step 2: npm install"| Deps["依赖"]
Deps -->|"Step 3: next build"| Artifacts["构建产物"]
end
Artifacts -->|"Step 4: 分发"| CDN["全球 CDN"]
Artifacts -->|"Step 5: 部署"| Serverless["Edge Functions"]
style Vercel fill:#e1bee7,stroke:#8e24aa
style CDN fill:#fff9c4,stroke:#fbc02d
3. 进阶配置 (Domain)
Vercel 免费送的域名虽好，但不够个性。
如果你想用自己的域名 (如 cool-app.com)：
- 在 Vercel Settings -> Domains 中输入你的域名。
- 去你的域名注册商 (阿里云/GoDaddy)，添加一条 CNAME 记录。
- Host:
@或www - Value:
cname.vercel-dns.com
- Host:
- 等待 5 分钟，SSL 证书会自动下发 (HTTPS 绿锁)。
4. 真实案例
Story
"我的数据库连不上了"
很多新手第一次部署成功后，兴奋地打开网站，结果报错 500。
查看 Vercel 日志，发现：Error: DATABASE_URL is undefined。
原因：他在本地用了 .env，但忘了把这个变量配置到 Vercel 上。
他以为 GitHub 会把 .env 传过去，但他忘了 .gitignore 里早就把 .env 忽略了。
Vibe 心法：
环境变量是生产环境的保险柜。
本地开发靠 .env 文件，线上运行靠 Vercel 的面板。这两个世界是物理隔离的，必须手动同步钥匙。
5. 本章小结
- 极速上线：Import -> Env Config -> Deploy。
- 安全第一：
.env永远不上传，线上变量手动填。 - 日志排查：部署失败了别瞎猜，去 Dashboard 看 Build Logs。