web前端: 服務器安裝Jenkins踩坑記錄

Jenkins的前端自動化工作流搭建的過程，搭建完這套工作流，我們只需要在本地發起一個git提交，剩下的單元測試，打包構建，代碼部署，郵件提醒等功能全部自動化完成，讓持續集成、持續交付、持續部署變得簡單易操作，真正解決人工構建部署的諸多問題。

Jenkins是什麼？

Jenkins 是一款業界流行的開源持續集成工具，廣泛用於項目開發，具有自動化構建、測試和部署等功能。
下面我們就來安裝Jenkins。

準備工作

一個阿里雲服務器(這裏用的Ubuntu16.04)
一個公共的git倉庫
一個可以進行打包的項目代碼庫

開始

• 我這裏用的是阿里雲的輕量服務器，裝的是ubuntu16.04系統，首先我們要設置下服務器的安全設置，打開一些端口。下面是我的一些端口設置。

  
  
  

• 然後我們通過SSH遠程連接服務器, 並且切換到管理員賬號

  
  
• 在服務上安裝Java(Jenkins需要java環境)
  • 執行命令
    sudo apt-get install openjdk-8-jdk
    顯示報錯，需要切換源。
    W: Failed to fetch http://mirrors.cloud.aliyuncs.com/ubuntu/dists/xenial/InRelea se Could not resolve 'mirrors.cloud.aliyuncs.com' W: Failed to fetch http://mirrors.cloud.aliyuncs.com/ubuntu/dists/xenial-updates /InRelease Could not resolve 'mirrors.cloud.aliyuncs.com' W: Failed to fetch http://mirrors.cloud.aliyuncs.com/ubuntu/dists/xenial-securit y/InRelease Could not resolve 'mirrors.cloud.aliyuncs.com' W: Some index files failed to download. They have been ignored, or old ones used
  • 切換源
    執行
    cd /etc/apt/sources.list.d
cp sources-aliyun-0.list sources-aliyun-0.list.bak # 保留原版本以防改
    將 sources-aliyun-0.list 內的內容替換成以下內容

deb http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
##測試版源
deb http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
# 源碼
deb-src http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
##測試版源
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
# Canonical 合作伙伴和附加
deb http://archive.canonical.com/ubuntu/ xenial partner

參考這篇文章https://segmentfault.com/a/1190000016153084

• 安裝好Java之後開始安裝Jenkins，執行下面的代碼

wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
echo y|sudo apt-get install jenkins

• 運行Jenkins
  Jenkins 是以服務的形式運行的,故可使用如下民兩個管理服務，默認使用 8080 端口
  啓動服務：sudo service jenkins start
  相關服務命令: sudo service jenkins start|stop|restart
• 至此，可以通過 http://ip:8080 訪問 Jenkins 了，然後就是初始化和使用了

Jenkins初始化和相關配置

• 初始化
  jenkins的默認端口是8080,啓動成功後在瀏覽器打開。
  進入後會讓我們輸管理員密碼，打開網頁上提示路徑下的文件，複製密碼粘貼輸入即可。
  然後會讓安裝需要的插件，此處選默認即可，等待安裝完成。
  創建一個管理員賬戶。
  上面都完成後會看到這個界面。

  
  

• 創建任務
  1、點擊創建一個新任務

  
  
  

  2、選擇自由風格的軟件項目，並起一個名字

  
  
  至此，基礎準備工作已經完成，我們在服務器上安裝了Jenkins並啓動，然後進行了初始化配置，建立了一個新任務。接下來我們開始配置我們需要的功能。
• 實現git鉤子功能
  首先我們要實現一個git鉤子功能，就是我們向github/碼雲等遠程倉庫push我們的代碼時，jenkins能知道我們提交了代碼，這是自動構建自動部署的前提，鉤子的實現原理是在遠端倉庫上配置一個Jenkins服務器的接口地址，當本地向遠端倉庫發起push時，遠端倉庫會向配置的Jenkins服務器的接口地址發起一個帶參數的請求，jenkins收到後開始工作。
  1、打開剛創建的任務，選擇配置，添加遠程倉庫地址，私有倉庫需要配置登錄名及密碼。
  
  注意！！這裏踩了一個坑踩了好久，因爲服務器上沒有安裝git，所以，這裏之前一直報錯
  
  要解決這個問題，只需要在服務器某個文件夾下git clone下，如果這個url可以clone成功，基本就可以解決這個問題。
  還有就是，私有倉庫，需要配置下SSH祕鑰或者用戶名和密碼。
  2、安裝Generic Webhook Trigger Plugin插件（系統管理-插件管理-搜索Generic Webhook Trigger Plugin）如果可選插件列表爲空，點擊高級標籤頁，替換升級站點的URL爲：http://mirror.xmission.com/jenkins/updates/update-center.json並且點擊提交和立即獲取。
  3、添加觸發器
  第2步安裝的觸發器插件功能很強大，可以根據不同的觸發參數觸發不同的構建操作，比如我向遠程倉庫提交的是master分支的代碼，就執行代碼部署工作，我向遠程倉庫提交的是某個feature分支，就執行單元測試，單元測試通過後合併至dev分支。靈活性很高，可以自定義配置適合自己公司的方案，這裏方便演示我們不做任何條件判斷，只要有提交就觸發。在任務配置裏勾選Generic Webhook Trigger即可
  
  4、倉庫配置鉤子 此處以碼云爲例，因爲公司用的是碼雲，github的配置基本一致，進入碼雲項目主頁後，點擊管理-webhooks-添加，會跳出一個這樣的框來。
  
  URL格式爲 http://<User ID>:<API Token>@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke
  userid和api token在jenkins的系統管理-管理用戶-admin-設置裏。
  Jenkins IP地址和端口是你部署jenkins服務器的ip地址，端口號沒改過的話就是8080。
  密碼填你和上面userid對應的密碼，我這裏是admin。
  下面的幾個選項是你在倉庫執行什麼操作的時候觸發鉤子，這裏默認用push。
  點擊提交完成配置。
  5、測試鉤子

1. 
   

   點擊測試，如果配置是成功的，你的Jenkins左側欄構建執行狀態裏將會出現一個任務。

   
   
   

   另外，你也可以試下本地提交代碼，提交代碼後，jenkins也會開始一個任務,目前我們沒有配置任務開始後讓它做什麼，所以默認它只會在你提交新代碼後，將新代碼拉取到jenkins服務器上。到此爲止，git鉤子我們配置完成。

• 實現自動化構建
  git push觸發鉤子後，jenkins就要開始工作了，自動化的構建任務可以有很多種，比如說安裝升級依賴包，單元測試，e2e測試，壓縮靜態資源，批量重命名等等，無論是npm script還是webpack，gulp之類的工作流，你之前在本地能做的，在這裏同樣可以做。
  作爲演示，這裏只演示三個基本常用的工作流程，安裝依賴包->單元測試->打包，也就是下面這三個命令。

npm install
npm run test
npm run build

1、首先，和本地運行npm script一樣，我們要想在jenkins裏面執行npm命令，先要在jenkins裏面配置node的環境，可以通過配置環境變量的方式引入node，也可以通過安裝插件的方式，這裏使用了插件的方式，安裝一下nvm wrapper這個插件。
2、打開剛剛的jenkins任務，點擊配置裏面的構建環境，勾選這個，並指定一個node版本。

3、點擊構建，把要執行的命令輸進去，多個命令使用&&分開。

4、保存。
5、此時本地修改一下代碼push測試一下（也可以點擊立即構建測試），點擊本次觸發的那個任務，選擇控制檯輸出，將會看到Jenkins在雲端執行的過程。
命令行最後一行是Finished狀態的如果是SUCCESS（藍色）則證明執行的任務都順利進行，是FAILURE（紅色）則證明中間有重大錯誤導致任務失敗，UNSTABLE（黃色）代表有雖然有些小問題，但不阻礙任務進行，黃色或者紅色可以去命令行看下錯誤輸出，看下哪裏出了問題。

6、如果上一步是SUCCESS，點擊項目的工作空間，將會發現多了dist和node_modules兩個文件夾。

至此，我們已經搭建了一個簡易的構建工作流程。

參考掘金文章：實戰筆記：Jenkins打造強大的前端自動化工作流