本文介绍 GitLab 仓库管理的项目如何在 Zadig 上快速搭建,下面以 Microservice-demo 项目为例,该项目包含 Vue.js 前端服务和 Golang 后端服务,以下步骤包含从 Code 到 Ship 的整个过程的演示。

GitLab

项目案例源码 供您直接使用,该代码仓库主要包含:

新建 GitLab OAuth 应用程序

GitLab 管理者可以通过 Admin Area > Applications 来新建应用程序。

gitlab

配置 GitLab OAuth 应用程序

在新建应用程序页面,需要进行以下操作

create-app

获取 Application ID、Secret 信息

应用创建成功后,GitLab 会返回应用的相关信息,其中包括 Application IDSecret 信息。

create-app

将 Application ID、Secret 集成到系统

切换到 Zadig 系统,管理员依次点击 系统设置 -> 集成管理 -> 代码源集成 -> 点击添加按钮。

add-to-zadig

依次填入如下已知信息:

gitlab-auth

点击授权按钮,同意授权后,GitLab 会跳转到 Zadig 系统,至此 GitLab 集成完毕。

进入 Zadig 系统:

login

新建项目,项目名为microservice-demo

create-new-project

project-detail

project-onboarding

Zadig 提供 2 种方式管理这些模板:

这里,我们使用代码仓导入的方式。 文件目录中准备好了这些 YAML 。现在要做的就是把 backend 和 frontend K8s YAML 依次导入。

加载服务配置:点击仓库托管 按钮 -> 选择仓库信息 -> 选择文件目录。导入成功后,设置自定义变量 demo_domain 值,引用 系统内置变量$EnvName$,来区分不同的环境域名。

add-service

配置后端服务构建:选择backend服务 -> 点击添加构建 -> 填写构建脚本。

add-backend-service

add-build-config

构建配置说明:

  1. 应用列表选择 go 1.16.4
  2. 代码信息,选择 microservice-demo 所在的代码仓库
  3. 构建脚本如下:
cd microservice-demo/backend
make build-backend
docker build -t $IMAGE -f Dockerfile .
docker push $IMAGE
  1. 保存构建配置 配置前端服务构建:选择frontend服务 -> 点击添加构建 -> 填写构建脚本。

save-build-config

save-build-config-2

构建配置说明:

  1. 代码信息,选择 microservice-demo 所在的代码仓库
  2. 构建脚本如下:
cd microservice-demo/frontend
docker build -t $IMAGE -f Dockerfile .
docker push $IMAGE
  1. 保存构建配置

点击向导的「下一步」。这时,Zadig 会根据你的配置,创建 2 套环境(dev,qa),以及相关工作流。

add-to-env

点击下一步完成向导。至此,Onboarding 完成。根据配置,已经产生 2 套环境和 3 条工作流。

onboarding-doneonboarding-finished

点击「运行」,可以运行工作流:

run-workflow

选择需要更新的服务 backendfrontend,点击「启动」运行工作流:

workflow-detail

查看工作流运行状况:

workflow-status

进入集成环境,查看服务列表,并点击服务 URL,可以查看网站。

service-list

website

添加触发器,使得代码 Push 或者 Pull Request 都触发 backendfrontend 重新构建和部署。

进入工作流配置页面:

workflow-list

添加 Webhook 触发器:

add-webhook

配置 Webhook 触发器

  1. backend 服务触发器配置:

add-backend-webhook

如上图所示,当 backend 文件夹中的代码变动时会触发 backend 服务的更新

  1. frontend 服务触发器配置:

add-frontend-webhook

如上图所示,当 frontend 文件夹中的代码变动时会触发 frontend 服务的更新

frontend-webhook-detail

保存工作流:

save-webhook

改动前端代码:

edit-codeedit-code-2

查看工作流运行情况:

run-workflow-status

查看网站运行结果:

website-result