Drone 自定义 UI

Drone 是一款开源的 CI/CD 工具，基于容器提供了强大的插件系统。多年前我有写过《基于Docker的CI工具——Drone》中有详细的介绍它的优势。Drone 采用的是 Server/Agent 架构，Server 端用来处理请求派发任务给 Agent，最终在 Agent 上执行任务。

Drone 总体是使用 Golang 写的，drone/drone-ui 是它的前端页面仓库，采用 Vue.js 进行开发（很早以前是使用 React 进行开发的）。先后端分离的项目，比较正常的中间会使用 NGINX 之类的 Web Server 进行桥接，用户经过 Web Server 访问前端页面，而后页面在访问 Web Server 反代后的接口。不过 Drone Server 端直接是使用的 Golang 本身起的服务，而 Golang 又是一种须要编译的语言。为了能让 Server 编译后仍是单文件，做者特意写了一款工具 bradrydzewski/togo 用来将静态资源编译成 Golang 代码。编译出来的结果本质就是文件路由和内容的哈希表，能够在官方仓库中一窥究竟。

将编译后生成的 Golang 文件提交到仓库以后，就能够在 Server 中使用模块的形式将其加载进来，剩下的就是在 Server 中根据路由获取内容返回了。这种作法在开发上会比较麻烦，不过对使用的人来讲却是方便不少了。不过因为静态资源被编译进了执行文件中，因此咱们若是要自定义前端界面的话，就须要按照这个流程从新构建编译 Server 执行文件了。

构建前端模块

首先咱们须要针对 drone/drone-ui 原始仓库进行 Fork，在新的仓库中根据大家的需求进行前端代码的修改。在 RADME 中介绍了如何在开发环境中进行开发。若是改动不大的话，能够在每次 Drone 官方发布版本的时候根据上游仓库提交 Pull Request 进行需求合并。执行 npm run build 会在 dist/files 目录生成最终须要的前端静态资源。

前端资源备好以后须要安装 bradrydzewski/togo 将静态资源嵌到 Golang 代码中。若是没有安装 Golang 的话须要先安装 Golang。另外 Golang 的全局 bin 目录须要配置到 PATH 环境变量中，不然编译时会提示找不到该命令。

go get github.com/bradrydzewski/togo
cd dist
go generate dist.go

注： go generate 是利用注释快速执行脚本的一种方式。本质上是执行了 dist.go 文件中的 togo http -package dist -output dist_gen.go 这条命令。

最后将编译生成的 dist_gen.go 文件添加到仓库中提交，完成前端模块的构建。接下来咱们须要从新构建 Server 执行文件。

构建执行文件

Server 执行文件的仓库是在 drone/drone，咱们须要找到依赖了 github.com/drone/drone-ui 模块的文件，并将其替换成咱们 Fork 的新仓库地址 xxx.com/xxx/drone-ui。主要有 ./handler/web/{logout,pages,web}.go 三个文件须要被替换。

go get -v -insecure xxx.com/xxx/drone-ui
sed -i '' 's/github.com\/drone\/drone-ui/xxx.com\/xxx\/drone-ui/' ./handler/web/{logout,pages,web}.go

注： 针对这种场景，Golang 官方的模块管理中实际上是支持 replace 方式用来将 A 模块替换成 B 模块的，不过我当时没有实验成功，就仍是使用了 sed 的方式。

go mod edit -replace=github.com/drone/drone-ui=xxx.com/xxx/drone-ui

以后咱们就能够执行 go build 对其进行构建了。咱们并无对该项目进行修改，只是针对它依赖的前端模块进行处理。因此个人想法是当 drone-ui 仓库发生变动的以后，执行 CI 流水线将 Server 仓库克隆下来修改后执行镜像构建并上传到镜像仓库中。

CI 执行固然是选择 Drone 啦，用 Drone 去构建 Drone 听起来就很酷！默认 Drone 会把当前仓库克隆下来，但实际上咱们不须要克隆当前仓库，当前仓库是被主仓库依赖的模块。咱们真正须要下载的是 drone/drone 主仓库。

clone: 
  disable: true

steps:
- name: clone
  image: alpine/git
  commands:
  - git clone https://github.com/drone/drone.git .
  - git checkout ${DRONE_TAG}

trigger:
  event:
  -tag

在 Drone 的配置中，设置 disable: false 便可实现不克隆当前仓库。而后本身在单独增长 git clone 的步骤。咱们将仓库克隆到当前目录中，并根据当前 git tag 的版本号切换 Server 仓库的版本。这样保证最后编译出来的镜像同版本号和上游不会有其它差别。

- name: build
  image: golang:1.14.4
  commands:
  - go get -v -insecure xxx.com/xxx/drone-ui
  - sed -i '' 's/github.com\\/drone\\/drone-ui/xxx.com\\/xxx\\/drone-ui/' ./handler/web/{logout,pages,web}.go
  - sh scripts/build.sh
  environment:
    GOARCH: amd64
    GOOS: linux

接下来这段构建命令除了增长前端模块依赖替换以外，其它的都是从上游 Server 仓库 中搬运过来的。上游构建中还有 ARM, ARM64 架构版本的构建，因为我这里并不须要，就不增长构建时间了。

以后咱们再像官方同样，增长 Docker 镜像构建上传的步骤便可完成最终镜像的建立。使用的时候使用该镜像便可。

后记

一样是使用 Drone 搭建，官方针对 Github 搭建的 https://cloud.drone.io 在未登陆的状况下还会自带一个登陆页。原理是 Server 服务在 pages.go 中判断接入域名为 "cloud.drone.io" 的话会展现位于 handler/web/landingpage/index.html 的静态页。若是有门户页的需求的话能够针对这些文件进行对应的修改。