关于ci: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 的动态页。如果有门户页的需要的话能够针对这些文件进行对应的批改。

关于ci:Drone-自定义-UI

构建前端模块

构建执行文件

后记