[AI书房] 第15章 Vercel部署：把代码推向世界
Claude Code完全掌握
Claude Code完全掌握
第15章 Vercel部署：把代码推向世界
金京镇
Vercel是什么：一键部署的概念
第一次在手机屏幕上看到自己做的网站，那种感觉很奇妙。原本只存在于本机（localhost）上的页面，在咖啡馆里拿起手机打开浏览器，居然一模一样地呈现出来了。这中间到底发生了什么？
本机（localhost）是只有自己电脑才能访问的地址。Claude Code启动开发服务器后，会分配localhost:3000或localhost:51006之类的地址，这些地址只能在同一台电脑的浏览器里打开。别人输入这个地址，什么都看不到。因为网站的代码只在你自己电脑的内存里运行。
要把代码发布到外面，需要把它放到一台24小时运转的服务器上，再给这台服务器绑定一个专属地址。传统做法要经过几十个步骤：租服务器、配置操作系统、安装Web服务器软件、申请SSL证书、绑定域名，等等。
Vercel把这一整套复杂流程压缩成了一次按钮点击。选好GitHub仓库，按下「Deploy」，Vercel就会拉取代码、完成构建、分发到全球各地的服务器、自动配置HTTPS证书，并分配一个专属URL。
[图15-1] 从本地开发到上线部署的转换流程示意图
Vercel的免费方案足以支撑个人项目和作品集网站的运营。部署后的网站会获得一个「项目名.vercel.app」格式的默认域名。用这个域名谁都能访问，当然也可以绑定自己的域名。
这里要理解的关键在于，Vercel做的事情就是「接收代码，把它变成网站」。GitHub上有代码，Vercel上有部署配置，两者一连接，流水线就完成了。
连接GitHub仓库与Vercel
注册Vercel时用GitHub账号登录，后续所有操作都会变得很简洁。因为Vercel可以直接访问你的GitHub仓库列表。
连接过程是这样的。
在Vercel控制台点击「Add New Project」，屏幕上会列出你的GitHub仓库。找到要部署的仓库，点击「Import」。进入构建设置页面后，系统会自动识别Next.js、React之类的框架。点击「Deploy」，构建随即开始。
几十秒到几分钟之间构建完成，生成一个专属URL。在浏览器里输入这个URL，你的网站就出现了。用手机打开也好，从另一个国家的电脑打开也好，呈现的都是同一个页面。
[图15-2] 在Vercel控制台导入GitHub仓库的界面
不过第一次部署可能会遇到问题。回想一下前面章节讲的网站案例。把搅拌机产品的落地页部署到Vercel之后，滚动动画用到的逐帧图片文件全都不见了。在本地跑得好好的网站，部署之后只剩下文字孤零零地挂在那里，搅拌机的图片一张都没有。
原因出在.gitignore文件上。图片帧文件夹被排除在了Git的跟踪范围之外，所以没有推送到GitHub，Vercel自然也拿不到这些文件。解决办法很简单：告诉Claude Code「把帧图片也加到GitHub里重新推送」，它就会修改.gitignore设置，把遗漏的文件补充提交并推送上去。
这个经历说明了一件事。本地环境和部署环境是不同的。本地存在但不在Git跟踪范围内的文件，在部署环境中并不存在。部署之前养成一个习惯：「我的仓库里是否包含了网站运行所需的全部文件？」
在Vercel控制台的「Deployments」标签页里可以查看所有部署记录。遇到问题时，回滚到之前的版本也只需要点一下。
[图15-3] Vercel部署历史界面：每次部署的状态与回滚选项
实时生效的流水线：代码变更自动同步的机制
Vercel和GitHub的连接建立之后，接下来的工作流顺畅得让人吃惊。
流程是这样的。在Claude Code里修改网站代码，在本机确认改动效果。满意之后说「推送到GitHub」。新的提交到达GitHub，Vercel自动检测到变更，开始新一轮构建，构建完成后线上网站自动更新。
[图15-4] 实时更新流水线：Claude Code → GitHub → Vercel → 线上网站
这条流水线里有一个关键的安全机制：「显式推送」。不管你在本地改了多少东西，只要没有说「推送到GitHub」，线上网站就不会受到任何影响。这是刻意为之的设计。
在CLAUDE.md文件里把这条原则写清楚就很安全了。「我们会把变更同步到GitHub，GitHub会自动推送到Vercel。但在本地修改时，必须先在本机验证，在我明确说提交或推送到GitHub之前，绝对不要同步到远端。」有了这条指令，就能防止Claude Code不小心把还在改的代码推上去。
实时生效的速度也令人印象深刻。前面的例子里，给Hero区域的按钮加上发光效果后推送到GitHub，几分钟内Vercel就完成了部署，刷新线上网站，发光按钮已经出现了。
GitHub的提交记录里留下了「add glowing pulse effect to hero join the community button」这条消息，Vercel的部署记录里也出现了对应的部署条目。
通过这套结构，实际上自然形成了三个环境。
开发环境（本机localhost）：自由修改和验证的空间。失败了也不会产生任何影响。
暂存环境（GitHub）：记录代码变更历史的空间。推到这里的代码应该是整理好的状态。
生产环境（Vercel线上网站）：真实用户访问的空间。从GitHub自动部署。
[图15-5] 三个环境的关系：开发 → 暂存 → 生产
域名绑定与环境变量配置
Vercel自动分配的「项目名.vercel.app」域名在功能上完全没问题，但要给人专业的印象还差一点。绑定自己的域名，网站的可信度会明显提升。
域名绑定从Vercel的项目设置开始。进入「Settings」标签页下的「Domains」板块，这里有两个选择：直接在Vercel购买域名，或者添加已有的域名。
绑定已有域名需要修改DNS设置（Domain Name System configuration）。在购买域名的服务商（比如Gabia、Namecheap、Google Domains等）的管理面板里，把DNS记录改成Vercel提供的值。Vercel的引导页面会具体告诉你该设置哪条记录、填什么值，即使没有技术背景也能照着做。
[图15-6] Vercel域名设置界面与DNS记录配置示例
DNS变更的传播需要几分钟到最长48小时不等。大多数情况下30分钟内就会生效，但刚绑定域名后访问不了，不必慌张。
环境变量（environment variable）配置在项目需要对接外部服务时会用到。API密钥、数据库连接字符串、认证令牌（token）这类敏感信息不应该直接写在代码里，而是分离到环境变量中管理。
在Vercel的项目设置里找到「Environment Variables」板块，就可以注册键值对（key-value pair）。比如在NEXT_PUBLIC_API_KEY这个键下填入实际的API密钥。这个值只保存在Vercel的服务器上，不会出现在GitHub仓库里。代码中通过process.env.NEXT_PUBLIC_API_KEY来引用它。
用环境变量是出于安全考虑。即使GitHub仓库是公开的，API密钥也不会泄露。而且开发环境和部署环境可以使用不同的值。本地用测试API密钥，生产环境用正式API密钥，就是这个道理。
[图15-7] Vercel环境变量设置界面
环境变量一旦修改，Vercel会自动触发重新部署。如果代码没改过但网站却重新部署了，环境变量的变更可能就是原因。
网站已经上线，域名也绑定了，环境变量也配好了。在浏览器里输入地址，任何人看到的都是同一个页面。但部署并不是终点。线上网站运行一段时间后，会碰到一些新的问题，是开发环境里看不到的那种。
人工智能专家 金京镇律师
AI法律政策专家 · 前国会议员 · 著作等身
如果这本书曾在你身边停留片刻，请支持我们，让下一个故事得以问世。
（自愿赞助账户：韩国农协银行 302-1096-0948-81 户名：金京镇）