使用 Github Action自动执行Vercel 部署
date
Mar 16, 2025
AI 摘要
slug
automating-vercel-deployment-with-github-actions
status
Published
tags
front-end
github
summary
使用 GitHub Actions 定时触发 Vercel 部署，创建 Build Hooks 和设置 GitHub Actions 变量，以实现每天自动构建和部署网站，优化 SEO 和速度。
type
Post
之前本网站部署在 Netlify 上的，有过一篇文章使用 Github Action自动执行 Netlify 部署。 以解决每周自动部署网站的功能，详细可点击查看。
最近想查看下国内访问网站的速度情况，所以使用 itdog ping 工具进行了测试，发现国内的情况十分不理想。
所以萌生了起换到 vercel 上的想法，并且 vercel 也有 cdn 功能了，右边是切换到 vercel 上部署的情况，看起来好了很多。
切到 vercel 重新部署，域名重新解析配置好之后，对于之前 github action 定时部署的情况，需要重新写一份 workflow job。
搜索vercel 同样支持 Deploy Hook 的方式。那就简单了，复制一份 Netlify 的文件，简单修改即可。
1、配置创建 Vercel Build Hooks
参考 Creating & Triggering Deploy Hooks 官方文档。
官方说的清清楚，部署钩子允许您创建接受 HTTP
POST请求的 URL，以触发部署并重新运行构建步骤。这些 URL 与您的项目、存储库和分支唯一链接，因此无需使用任何身份验证机制或向请求提供任何有效负载POST。此功能允许您将 Vercel 部署与其他系统集成。例如，您可以设置：
- 来自 Headless CMS 的内容更改的自动部署
- 通过配置第三方 cron 作业服务来触发 Deploy Hook 来进行计划部署
- 通过命令行强制部署
在vercel 项目设置→Git中找到 Deploy Hooks 创建的地方，输入 hooks 名字，和代码分支，即可创建。
2、创建 GitHub Actions secrets and variables
在Github 的项目Setting下设置 github actions 所需要的变量。
例如，创建VECEL_BUILD_HOOK变量，value 为上一步获得的 vecel build hook 地址。
3、实现 GitHub Actions
触发 hooks 的示例请求为：
响应示例：
发送请求后，您可以在项目仪表板上看到它触发了部署。
那么，实现 github actions 代码就比较简单了，参考如下：