使用Drone來建置CI/CD

前言

今天的內容是使用Drone來建置CI/CD，畢竟身為前端工程師甚麼都要略懂才行!

步驟 1

沒有docker的請先到這裡下載並安裝。

首先準備一份 docker-compse.yaml 內容如下:

yaml
1version: "3"
2services:
3  drone-server:
4    image: drone/drone:2.24 # tag:2 image id:86e71e93066f
5    container_name: drone-server
6    ports:
7      - 8000:80
8    volumes:
9      - ./drone_data:/data
10    restart: always
11    environment:
12      ## domain
13      - DRONE_SERVER_HOST= # drone server
14      - DRONE_SERVER_PROTO=
15      - DRONE_RUNNER_CAPACITY=
16      - DRONE_RPC_SECRET= #共用密碼(隨機)
17      # Gitea
18      - DRONE_GITEA_CLIENT_ID=
19      # client id
20      - DRONE_GITEA_CLIENT_SECRET= #client secret
21      - DRONE_GITEA_SERVER= # gitea server
22
23      # db
24      - DRONE_DATABASE_DATASOURCE= # mysql配置，要與上邊mysql容器中的配置一致
25      - DRONE_DATABASE_DRIVER=mysql
26
27      # Gitea Auth
28      - DRONE_LOGS_DEBUG=true
29      - DRONE_LOGS_PRETTY=true
30      - DRONE_LOGS_COLOR=true
31      - DRONE_GIT_ALWAYS_AUTH=true
32
33      # For mount auth in Drone
34      - DRONE_USER_CREATE=username:Arthur,admin:true
35
36  drone-runner:
37    image: drone/drone-runner-docker:1.8.3 # tag: 1  image id: 56dddb548a45
38    restart: always
39    depends_on:
40      - drone-server
41    volumes:
42      - /var/run/docker.sock:/var/run/docker.sock
43    environment:
44      - DRONE_RPC_HOST=drone-server
45      - DRONE_RPC_PROTO=http
46      - DRONE_RPC_SECRET=

該代碼有幾個變數需要特別說一下:

1. DRONE_RPC_SECRET: 隨機使用一組密碼只要與下方保持一致即可。
2. DRONE_GITEA_CLIENT_ID: 需要到 gitea 上設定，如下圖
3. DRONE_GITEA_CLIENT_SECRET: 需要到 gitea 上設定，如下圖

1. Application Name: 填你要取的名稱，例: my-drone
2. Redirect URIs: 你 drone 的網址(記得+login)，例: http:localhost:8000/login

設定好後按儲存就可以得到DRONE_GITEA_CLIENT_ID、DRONE_GITEA_CLIENT_SECRET了。

接著執行:

console
1docker-compose up -d

步驟 2

再準備一份 .drone.yml，放在你的專案跟目錄，其內容如下:

yml
1kind: pipeline
2type: docker
3name: clone
4
5steps:
6  - name: frontend-install
7    image: node:16.17.1
8    commands:
9      - npm i
10
11  - name: frontend-build
12    image: node:16.17.1
13    volumes:
14      - name: frontend-path
15        path: /frontend_build
16    commands:
17      - npm run build
18      - rm -rf /frontend_build/*
19      - mv build/* /frontend_build/.
20    when:
21      branch:
22        - master
23
24volumes: # 設定路徑 將build完的檔案放到你主機上的路經
25  - name: frontend-path
26    host:
27      path: /var/www/frontend_build
28trigger: # 觸發 pipeline 條件，分支為 master，且進行 push 行為
29  branch:
30    - master
31  event:
32    - push

設定完之後，只要每次push master就會觸發該 drone 檔，它會自動將 build 好的檔案放入/var/www/frontend_build，接著我們只需將 Nginx 的路徑指到這裡後就完成了自動部屬的全部流程，Nginx 可以參考這裡這裡。

步驟 3

開啟步驟1所說的 Redirect URIs 網址，並選擇要建置CI/CD的專案，將 Settings -> Trusted 打勾，這樣就可以開始CI/CD了。

最後

最後讀者可以根據自己的需求在 step 裡面加入相應的步驟，例如telegram通知、信箱通知等等，今天就介紹到這邊，下次見~