[CI/CD 實作] (二) 安裝Jenkins + 串接 Github Webhook

在上篇 (一)基本介紹 中我們已經講了大致 CI/CD 的架構圖：

本地運行架構：A+B+C

今天

我們就先來實作 A 部分，也就是下面這張圖：
1. 在 macOS 安裝 jenkins (windows用戶抱歉啦！)
2. 設定 jenkins 與 Github 連動
3. 設定 jenkins 的建置動作

廢話不多說，我們正式開始～

1. 安裝與設定 jenkins

• 到 jenkins官網 下載對應的檔案，或是 macOS 可以直接使用 homebrew 安裝指令 $ brew install jenkins
• 終端機輸入 $ jenkins -httpPort=8080 啟動 jenkins，並在瀏覽器輸入localhost:8080 即可進入UI介面。
• 一進去 jenkins 就會說要先使用密碼解鎖，而密碼的路徑就放在提示上的紅色字樣

本例的密碼路徑：/var/lib/jenkins/secrets/initialAdminPassword

• 解鎖後，選擇要安裝的套件，我們照系統建議的安裝即可，過程中會等待一些時間，就讓它跑完～

選擇系統建議的套件

等 jenkins 運行

• 安裝完後，系統會提示建立一個 admin帳號，這裡所建立的帳號密碼會是我們後續操作 jenkins 所需要登入的帳密，請 務必記得！
  輸入完後按下 “save and finish”，即可完成。

• 之後每次啟動，就會跳轉到登入頁面囉～

2. 設定 jenkins 連接 Github Rerository，並加入建置的動作

這邊的步驟有點多，大致上就是對 jenkins 做細部的設定，讓我們繼續看下去，也請各位慢慢操作不要猴急～

• 新增建置作業

• 選取「建置 Free-Style 軟體專案」，並先把 item_name 命名成： cicd_github，接著點選 OK。

• 下一步的頁面中需要設定很多東西，首先點選「原始碼管理」，我們選擇「Git」，並輸入 github 上的目標 repository。像這邊我是以自己的 github repo 為例，讀者在自行操作時請選擇自己想要嘗試的 github repo。

• 接著設定「建置觸發程序」，理所當然的我們要選擇「GitHub hook trigger」

• 再來設定建置動作，下拉選單我們選擇「執行 Shell」，並且輸入 $ echo "偵測到 github repo 變化" 。這個動作是最核心的一步，也就是 遠端repo 有變化時，jenkins 會 git pull 到自己的工作目錄，並且執行我們輸入的 shell 指令。細節的 shell 我們之後再談，我們先印出一個訊息「偵測到變化」代表 jenkins 真的有偵測到並且更新到工作目錄。

• 儲存後會跳回專案頁面。這時候我們可以按按看「馬上建置」，就可以看到系統會進行建置動作

• 建置完成後，我們可以點進去「#1」，並進入「console output」，就可以看到終端機真的輸出了 偵測到 giuhub repo 變化 。

暫停一下….

這時候細心的你應該發現，這並不是真正的完成，因為我們根本沒有推東西到 repo 上，而是自己手動按「馬上建置」，jenkins才印出訊息的，所以接下來的重頭戲來了～

我們接著要設定 github repo 那邊的 webhook，讓它可以跟 jenkins 相認。但現在 jenkins 所用的是 localhost:8080，我們必須把它轉成公有網址，githubwebhook 才有辦法辨識，所以我們需要 ngork 這項服務的幫忙。

• 下載 ngork 並解壓縮後，可以得到一個執行檔。因為我將這個檔案路徑放在 ~/Downloads 中，因此我進入到此目錄、再輸入 ./ngrok http localhost:8080 就可以成功把剛剛 jenkins 轉成一個公有的網址。
  P.S.這個公有網址每次使用 ngrok 都會不一樣

貼上 http://a36ce225128a.ngrok.io 測試看看有沒有進入 jenkins 介面

• 瀏覽器輸入剛剛轉成的網址：http://a36ce225128a.ngrok.io 並且重新登入 jenkins。
  這個時候就可以來設定 github repo webhook，首先進入你想要的 repo 中，點選「setting」，進入到「Webhook」中點選「Add webhook」

• 接著再「Payload URL」中，輸入剛剛用 ngrok 轉好的網址。
  這時，記得在後方一定要加上 /github-webhook/ ，也就是完整的網址會變成以下

http://a36ce225128a.ngrok.io/github-webhook/

webhook 建立完成的畫面如以下

3. 自行 git push 修改遠端 repo，檢查 jenkins 有沒有觸發並且建置

• 可選擇在本地端或是直接到github網站，修改 repo 裡的東西。像我這邊是在本地端創建一個 test.txt，然後再 git push 到 repo。

• 就在這時切回去 jenkins，就發現「#2」正在進行建置了，等一下就可以看到建置完成的畫面：

#2 建置中

#2 建置完成

• 點擊進去「#2」，狀態中可以看見該建置是 Started by GitHub push by pcchencode，代表#2真的是因為遠端repo改變而觸發的

• 最後查看「console output」，也確實顯示出打印的字樣「偵測到 github repo 變化」

結論

至此，我們終於完成了所謂的 持續整合CI，基本上可以使喚 jenkins 自動偵測遠端repo的變化、自動 git pull 更新工作目錄的檔案。

疑？等一下，但剛剛不是都在設定「建置」嗎？

雖然剛剛很多步驟都是在設定 jenkins 如何建置，看起來好像是在做 持續部署CD 的動作，但其實真正的細節還沒有到。還記得剛剛我們的建置動作，是設定 執行Shell 嗎？
細心的你應該發現其實可以執行的 Shell Script 可以很多樣化，不一定只是要打印出字樣而已。所以如何詳細的部署，就需要從這邊做設定，這就讓我們留待下篇再操作吧～
to be continued