通过 Vercel 部署 GitHub 项目

一、关联 github

打开 https://vercel.com/，进入 account settings。

找到 Authentication，右侧 github，一路确认，关联一下，关联后右侧就是这样。

二、导入项目并部署

add New - project。

然后，就会出现 git 的项目列表了。import 你要部署的项目。

project name 不能用驼峰，必须是小写，可以包含指定的特殊字符，然后 deploy。

构建中。

然后，报错了。

环境变量问题，在这里配置一下。

三、配置环境变量

回到项目的 settings。

找到这个。

直接从 .env 粘贴过来，就可以。Save。

save 后，右下角有 deploy 提示。

点一下，重新部署。

然后，等 1~2 分钟，回到项目看板，点击项目，就会看到部署状态了。

ready 就是成功了。点击 domains 链接，就可以看到效果啦。

Vercel 部署状态一共有这几种。

• Ready  部署成功，项目正在正常运行，用户可以访问。
• Initializing  刚刚触发部署，正在初始化构建环境，准备开始构建。
• Building 正在执行构建命令（比如 npm run build），是构建过程中的状态。
• Queued  部署任务已提交，但在排队等待构建资源，还没开始执行。
• Canceled 部署被手动取消，或者因为新的部署触发导致旧的被自动取消。
• Error 部署失败，通常是构建报错、环境变量缺失、代码有问题等原因导致的，点进去可以看具体的错误日志。

平时最常见的就是 Ready 和 Error 了。遇到 Error 直接点进去看 Build Logs，错误信息一般很明确，很容易定位问题。

四、自动部署

后续，你再提交 git 代码，就会自动触发部署到 preview 环境了。production 环境一定要谨慎，需要手动来这里触发部署。

整体流程不算复杂。

关联 github、导入项目、配置环境变量，三步就能跑起来。日常提交代码自动走 preview，生产环境手动控制，节奏清晰。遇到部署失败别慌，进 Build Logs 看报错，大多数问题都能快速定位解决。用熟了之后，发布效率会提升不少。