Vercel：一分钟导入上线
“Vibe coding”课程第 13 课，共 26 课。免费，有动画和小测验。
Vercel 与 Next.js
Vercel 是前端开发者特别爱用的托管。同一家公司还做了 Next.js，一个流行的框架，也就是用 JavaScript 做网站的现成骨架。很多 AI 建站工具和智能体默认就生成 Next.js 项目。例子：你用建站工具做了报考设计专业用的作品集，又把代码放到了 GitHub。这种项目 Vercel 一看就懂。
三步从 GitHub 导入
图中的流程从左到右。导入：用 GitHub 登录，选中作品集仓库。识别设置：Vercel 自己判断框架、构建命令和输出文件夹，通常什么都不用改。Deploy：点一下开始，构建开始跑。最后你会拿到网站链接，已经可以发给朋友了。自己的网站名字以后在域名那课再连。
每个 Pull Request 都有预览
接下来和部署那课一样：push 到 main 会更新线上网站。而每个 Pull Request 都有自己的预览链接，就是图里那个标签。例子：智能体在分支里重做了作品页。你用手机打开预览检查。在 Vercel 上可以直接在预览页面上留评论：“这张图被裁掉了”。都改好了？那就 merge。
环境变量
环境变量（env vars）是托管在代码运行时交给它的设置和密钥，而不是存在仓库里。在 Vercel 上要分三个环境分别设置，就是图里的面板。Production：线上网站。Preview：预览链接。Development：在你自己电脑上运行。例子：Preview 里放测试用的支付密钥，Production 里放真的。改了变量？记得重新部署一次。
一键回滚
每次部署都会留在列表里，就是图底部那一排。例子：你 merge 之后，线上网站的作品全没了。别让 AI 直接在 main 上手忙脚乱地修。在上一个正常的部署旁点 Rollback，它几乎立刻重新成为线上网站，不用重新构建。然后再在分支里慢慢找问题。总之：先回滚，再修。
Vercel 还是 Cloudflare？
做第一个网站，两个都行：连上 GitHub，就有构建、预览和线上网站，跟图里一样。Vercel 是 Next.js 项目的默认选择，而建站工具常常生成这种项目。Cloudflare 在 DNS、防护和 Workers 上更强。拿不准？哪个能顺利构建你的项目就用哪个。通常有免费套餐，额度去官网看。先确认这项服务在你所在的国家能不能用。去 Vercel 模拟器练练手吧。
自测一下
- 导入仓库后 Vercel 会先做什么？
正确答案: 自己识别框架和构建设置. Vercel 会识别框架、构建命令和输出文件夹。域名是另外连接的，想连时再连。 - 新版本把线上网站弄坏了，第一步该做什么？
正确答案: 回滚到上一个正常的部署. 回滚几乎立刻恢复能用的版本，不用重新构建。之后再在分支里慢慢修。 - 为什么要给 Production 和 Preview 设不同的环境变量？
正确答案: 让预览不碰真实的密钥. Preview 里放测试密钥，真的只放在 Production。这样在分支里测试就不会动到真钱和真数据。