Jenkins 入門實戰：GitHub Push觸發Jenkins自動構建

Jenkins 是什麼？

官方介紹： Jenkins 是一款開源 CI&CD 軟件，用於自動化各類任務，包括構建、測試和部署軟件

Jenkins 支持各類運行方式，可經過系統包、Docker 或者經過一個獨立的 Java 程序

那麼 Jenkins 到底幫咱們作了哪些東西，解決了團隊開發中的哪些痛點呢？

當咱們在一個 team 中開發的時候，每一個人的本地環境都是有所不一樣的，好比 node 版本，windows 系統和 Mac 有所區別等等，Jenkins 就能夠解決這個問題。Jenkins 就至關於你們的一個統一環境，不會有所差別。

另外，咱們平時在部署的以前須要 npm run build 打包，Jenkins 中結合 git hook 咱們能夠作到在咱們執行 git push 或者合 master 的時候幫助咱們自動打包。

也就是隻須要發起 Git 提交，如下功能自動化完成

• 單元測試
• 打包構建
• 代碼部署
• 郵件提醒

本文主要講咱們在 GitHub 提交代碼的時候出觸發 Jenkins 自動打包構建

沒有購買服務器...，因此沒有部署

下載安裝

直接去官網下載便可

按照提示安裝

另外我是用 Java 去啓動的，因此也要搭建 Java 環境，這裏就不展開了

Jenkins 啓動

以上安裝完，會自動啓動 8080端口的一個服務，我當時沒有，估計是端口占用，直接報錯了。

使用命令啓動

沒有的話，切換到這個目錄下

➜  ~ cd /Applications/Jenkins
複製代碼

使用命令啓動

Java -jar jenkins.war --httpPort=8388
複製代碼

其中 8388 是端口號，本身能夠自定義

輸入密碼

成功後會讓咱們輸入管理員密碼，這個按照它提示的路徑下面複製便可

可是蘋果下面這個目錄有多是沒有權限的，具體的作法是： 點開文件夾的簡介，而後最下方點開共享與權限。名稱那欄：EVERYONE 的權限設定爲讀與寫就 OK 了

安裝插件

使用推薦的安裝就能夠了，我當時可能由於網絡問題，不少都失敗了（這可能跟我後面踩不少坑有必定關係）在進入系統後，咱們還能夠安裝，因此也還好！

這裏囉嗦幾句，若是你後面發現若是有一些配置你的頁面沒有的，頗有可能你缺乏了某個插件，由於你的插件極可能決定你頁面的配置。

建立管理員帳戶

上面完成以後，是這個界面。開始咱們的 Jenkins 之旅吧

準備一個 GitHub 項目

咱們這裏以 Vue-cli 搭建的項目來說

這裏咱們要區分一下，項目主頁和倉庫地址，下面會有用到

個人項目主頁：github.com/GpingFeng/V…

個人倉庫地址：github.com/GpingFeng/V…

獲取 GitHub 的 Personal access token

• GitHub 主頁

• 點擊 setting

• 點擊 Developer settings

• 點擊 Personal access tokens。再點擊 Generate new token.有可能要輸入密碼

• 勾上 repo 和 admin:repo_hook

• 點擊 Generate token。生成以後將這個 token 保存。必定要保存，後面就看不到了，後面會用到

配置 Jenkins

• 系統設置

• 找到 GitHub 這個選項——添加——Jenkins。這裏的名稱隨便填，API URL 填寫 api.github.com

• 彈窗中按如下填寫，類型選 Secret text 點擊添加

• 在憑據選上剛剛你添加的，勾上管理 Hook，點擊「鏈接測試」，成功以後以下所示：

• 最後點擊最下面的保存一下

Jenkins 新建項目

• 點擊新建按鈕

• 名字隨意，勾選 Freestyle project——確認，就能夠進入配置頁面了

• 源碼管理，基礎配置以下

• 源碼管理的 Credentials，使用的是 Username with password，配置以下：

• 構造觸發器選擇：GitHub hook trigger for GITScm polling

• 構建環境和綁定

以下圖所示，勾選 Use secret text(s) or file(s)，下面的」憑據」選擇咱們以前配置過的憑證

• 構建，選中 Execute shell，填寫構建的命令以下

echo $WORKSPACE
node -v
npm -v

npm install&&
npm run build
複製代碼

配置 GitHub 的 webhook 地址

webhook 是通知 Jenkins 時的請求地址，用來填寫到 GitHub 上，這樣 GitHub 就能經過該地址通知到 Jenkins

假設Jenkins所在服務器的地址是：192.168.0.1，端口爲8080，那麼webhook地址就是 http://192.168.0.1:8080/github-webhook

• setting

  

• Webhooks——Add webhook

• 在 Payload URL 位置填入 webhook 地址，再點擊底部的 Add webhook 按鈕，這樣就完成 webhook 配置了，從此當前工程有代碼提交，GitHub 就會向此 webhook 地址發請求，通知 Jenkins 構建

再次提醒，上述地址必須是外網也能訪問的，不然 GitHub 沒法訪問到 Jenkins

在這裏我卡了好久，一直都沒有成功！須要注意，不能使用 localhost。可使用 ngrok 下載連接 啓動一個可供外部訪問的地址，好比個人端口是 8388。先切換到下載解壓好的文件下，使用 ngrok 啓動以下：

./ngrok http 8388
複製代碼

以下所示，外部就能夠經過 3043f4fa.ngrok.io 訪問到你本地的服務了（可是要注意的是，這個只能維持8個小時）

驗證一下

咱們嘗試本地提交代碼到 GitHub，能夠看到 GitHub 會通知到 Jenkins，Jenkins 就幫咱們自動構建了。

切到控制檯，能夠看到輸出以下，說明真的成功了

結束語

以上只是一個小小的嘗試，還有不少的坑沒踩，好比怎麼部署到服務器等等

踩過的坑以及參考文檔

安裝插件的方法

jenkins 源碼管理只有none選項，怎麼弄能看到Subversion選項？小白求教。

webhook 鏈接不上的緣由

配置GitHub Push自動觸發Jenkins的構建

Jenkins在Mac上的安裝與使用

macOS Jenkins安裝&配置

實戰筆記：Jenkins打造強大的前端自動化工做流