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 的靜態頁。若是有門戶頁的需求的話能夠針對這些文件進行對應的修改。