L27. 静态网站部署：Vercel 的魔法

Vibe Coding 宣言：能免费的绝不花钱。能自动化的绝不手动。

0. 为什么这一课至关重要？ (Why It Matters)

• 免费：Vercel 对个人开发者非常友好，免费额度够你用一辈子。
• 快：全球 CDN 加速，你的网站秒开。
• 自动化：你 push 代码到 GitHub，Vercel 自动帮你部署。你什么都不用管。

1. 目标 (Goal)

将之前写的 React 前端项目部署到 Vercel。

2. 核心概念/装备/指令 (The Core)

2.1 静态网站 (Static Site)

只有 HTML/CSS/JS/图片，不需要后台数据库支持的网站。

• React/Vue 打包后就是一堆静态文件。

2.2 Vercel (The Host)

前端开发者的天堂。

• 支持 React, Next.js, Vue 等主流框架。
• 支持 Serverless Functions (简单的后端逻辑)。

3. 实战演练 (Action)

Step 1: 准备 GitHub 仓库

确保你的 React 代码已经 push 到 GitHub 了。

Step 2: 注册 Vercel

用 GitHub 账号直接登录 vercel.com。

Step 3: 导入项目

1. 点击 Add New -> Project。
2. 找到你的 GitHub 仓库，点击 Import。
3. Vercel 会自动识别框架 (Vite/React)。
4. 点击 Deploy。

Step 4: 等待奇迹

大概几十秒后，你会看到满屏的彩带。你的网站上线了！ 你会得到一个 https://your-project.vercel.app 的链接。

4. 常见问题 (FAQ - Vibe Style)

Q: 部署失败怎么办？ A: 看日志 (Logs)。 通常是因为 npm install 失败或者 npm run build 报错。把报错信息喂给 Claude。

Q: 我能绑定自己的域名吗？ A: 能！ 在 Settings -> Domains 里添加你的域名（比如 www.vibe-coding.com）。只要改个 CNAME 解析就行。

Q: 后端 API 怎么连？ A: 这是个大坑。 本地开发是 localhost:8000，上线后要改成真实的后端地址（下一课讲）。

5. 验收标准 (Definition of Done)

1. 你拥有一个以 .vercel.app 结尾的链接。
2. 点开链接，能看到你的网站。
3. 你在本地改行代码 push 到 GitHub，几分钟后线上自动更新。

---

Next Mission: L28. 后端服务部署：Railway 的力量