该方法使用 GitLab 可以定时镜像同步 Github 仓库的功能,通过 Vercel 个人账户(每月100GB免费流量)
与 GitLab 连接,以绕过 Vercel 部署团队项目时必须付费的限制。
该方案灵感来源于 Lonely_ion (离子)
0.部署/注册 GitLab 和 Vercel
0.1 部署/注册GitLab
- 如果是自行搭建的GitLab的话,则需要使用 Vervel Hook 来实现自动触发。
- 如果是使用官网的 GitLab,则只需要完成本教程前3步,公共 GitLab 和Vercel连接上后会自动实现部署
注册完后可以点击右上角头像,进入 Settings - Preferences - Localization - Language
将界面语言改为中文,以方便初学者操作,但本文档还是以英文界面为例介绍。
(流程略)
0.2 注册 Vercel
(流程略)
1.将 Github Org 仓库导入 GitLab, 并设置镜像仓库
1.1 导入GitLab
1.2 设置镜像仓库
相关设置链接:https://gitlab.com/userid/repoid/-/settings/repository#js-push-remote-settings (注意将userid和repoid改成自己的)
- 在GitLab上打开仓库页面,在侧边栏找到 Settings - Repository 进入
- 找到 Mirroring repositories
- 将你 Github仓库地址 填入 Git repository URL (如:https://github.com/vbup-osc/kanata-button.git)
- Direction 设置为 Pull,
Keep divergent refs
和Only mirror protected branches
我这里没有设置打钩 - Authentication method 设置为 password,但是对于公开仓库, Password 留空就行
- 接着点击 Mirror repo 绿色按钮,等会刷新显示 Last successful update 是一分钟前就成功了
2.将 Vercel 个人账户与 公共GitLab 账户连接
- Vercel 官方文档:Vercel For GitLab
- 使用自行搭建的GitLab的话可跳过这一步和后面一步
3.将 GitLab 项目 第一次部署到 Vercel上
详细文档同上。
默认情况下,GitLab 项目和 Vercel 绑定了就会自动实现推送同步。
4.获取 Vercel Hook
- Vercel 官方文档:Deploy Hooks
- 在 Vercel 打开之前部署好的项目
- 进入 Settings - Git ,找到 Deploy Hooks
- 设置一个自定义的 Hook Name (可以设置为项目名方便区分) 和 Git Branch Name (一般为 master 或者 main)
- 然后就会得到这样一个可以使用 GET请求 或者 curl -x 指令 来触发部署的链接:
https://api.vercel.com/v1/integrations/deploy/xxxxx/xx
5.将获取到的 Vercel Hook 写入 .gitlab-ci.yml
- Stack Overflow:How to use curl in gitlab-ci file?
- 创建并提交一个
.gitlab-ci.yml
文件,内容如下所示,push 到 Github 仓库中 - 到 GitLab 手动同步一下刚刚的 commit
- Runner 默认使用公共共享型Runner,默认是开启的不需要设置
- 在 pipeline中看到有执行进度,任务执行结束
deploy-to-vercel:
stage: deploy
script:
- curl $VERCEL_HOOK_URL
- exit 0
$VERCEL_HOOK_URL
为CI/CD设置的环境变量,用来防止密钥泄露问题,在GitLab仓库的 Settings - CI/CD - Variables 中设置
其他参考
后记
本文只提供一个思路,实际并未使用自行部署的gitlab做实际部署测试,有空再实操跟进