通过 GitLab CI/CD + Vercel Deploy Hook 免费部署团队项目

该方法使用 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改成自己的)
  1. 在GitLab上打开仓库页面,在侧边栏找到 Settings - Repository 进入
  2. 找到 Mirroring repositories
  3. 将你 Github仓库地址 填入 Git repository URL (如:https://github.com/vbup-osc/kanata-button.git
  4. Direction 设置为 Pull,Keep divergent refs  和 Only mirror protected branches 我这里没有设置打钩
  5. Authentication method 设置为 password,但是对于公开仓库, Password 留空就行
  6. 接着点击 Mirror repo 绿色按钮,等会刷新显示 Last successful update 是一分钟前就成功了

2.将 Vercel 个人账户与 公共GitLab 账户连接

  • Vercel 官方文档:Vercel For GitLab
  • 使用自行搭建的GitLab的话可跳过这一步和后面一步

3.将 GitLab 项目 第一次部署到 Vercel上

详细文档同上。
默认情况下,GitLab 项目和 Vercel 绑定了就会自动实现推送同步。

4.获取 Vercel Hook

  1. 在 Vercel 打开之前部署好的项目
  2. 进入 Settings - Git ,找到 Deploy Hooks
  3. 设置一个自定义的 Hook Name (可以设置为项目名方便区分) 和 Git Branch Name (一般为 master 或者 main)
  4. 然后就会得到这样一个可以使用 GET请求 或者 curl -x 指令 来触发部署的链接: https://api.vercel.com/v1/integrations/deploy/xxxxx/xx 

5.将获取到的 Vercel Hook 写入 .gitlab-ci.yml

  1. 创建并提交一个 .gitlab-ci.yml 文件,内容如下所示,push 到 Github 仓库中
  2. 到 GitLab 手动同步一下刚刚的 commit
  3. Runner 默认使用公共共享型Runner,默认是开启的不需要设置
  4. 在 pipeline中看到有执行进度,任务执行结束
deploy-to-vercel:
  stage: deploy
  script:
    - curl $VERCEL_HOOK_URL
    - exit 0

$VERCEL_HOOK_URL 为CI/CD设置的环境变量,用来防止密钥泄露问题,在GitLab仓库的 Settings - CI/CD - Variables 中设置

其他参考

后记
本文只提供一个思路,实际并未使用自行部署的gitlab做实际部署测试,有空再实操跟进

最后修改:2020 年 12 月 20 日 03 : 39 AM
如果觉得我的文章对你有用,请随意赞赏

发表评论