Jenkins的前端自動(dòng)化工作流搭建的過程物赶，搭建完這套工作流橡庞，我們只需要在本地發(fā)起一個(gè)git提交，剩下的單元測(cè)試印蔗，打包構(gòu)建扒最，代碼部署，郵件提醒等功能全部自動(dòng)化完成华嘹，讓持續(xù)集成吧趣、持續(xù)交付、持續(xù)部署變得簡單易操作除呵，真正解決人工構(gòu)建部署的諸多問題再菊。

Jenkins是什么？

Jenkins 是一款業(yè)界流行的開源持續(xù)集成工具颜曾，廣泛用于項(xiàng)目開發(fā)纠拔，具有自動(dòng)化構(gòu)建、測(cè)試和部署等功能泛豪。
下面我們就來安裝Jenkins稠诲。

準(zhǔn)備工作

一個(gè)阿里云服務(wù)器(這里用的Ubuntu16.04)
一個(gè)公共的git倉庫
一個(gè)可以進(jìn)行打包的項(xiàng)目代碼庫

開始

• 我這里用的是阿里云的輕量服務(wù)器，裝的是ubuntu16.04系統(tǒng)诡曙，首先我們要設(shè)置下服務(wù)器的安全設(shè)置臀叙，打開一些端口。下面是我的一些端口設(shè)置价卤。

  
  
  image.png
  
  
  image.png

• 然后我們通過SSH遠(yuǎn)程連接服務(wù)器, 并且切換到管理員賬號(hào)

  
  
  image.png
• 在服務(wù)上安裝Java(Jenkins需要java環(huán)境)
  • 執(zhí)行命令
    sudo apt-get install openjdk-8-jdk
    顯示報(bào)錯(cuò)劝萤，需要切換源。
    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
  • 切換源
    執(zhí)行
    cd /etc/apt/sources.list.d
cp sources-aliyun-0.list sources-aliyun-0.list.bak # 保留原版本以防改
    將 sources-aliyun-0.list 內(nèi)的內(nèi)容替換成以下內(nèi)容

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
##測(cè)試版源
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
##測(cè)試版源
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慎璧，執(zhí)行下面的代碼

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

• 運(yùn)行Jenkins
  Jenkins 是以服務(wù)的形式運(yùn)行的,故可使用如下民兩個(gè)管理服務(wù)床嫌，默認(rèn)使用 8080 端口
  啟動(dòng)服務(wù)：sudo service jenkins start
  相關(guān)服務(wù)命令: sudo service jenkins start|stop|restart
• 至此，可以通過 http://ip:8080 訪問 Jenkins 了胸私，然后就是初始化和使用了

Jenkins初始化和相關(guān)配置

• 初始化
  jenkins的默認(rèn)端口是8080,啟動(dòng)成功后在瀏覽器打開厌处。
  進(jìn)入后會(huì)讓我們輸管理員密碼，打開網(wǎng)頁上提示路徑下的文件岁疼，復(fù)制密碼粘貼輸入即可阔涉。
  然后會(huì)讓安裝需要的插件，此處選默認(rèn)即可捷绒，等待安裝完成瑰排。
  創(chuàng)建一個(gè)管理員賬戶。
  上面都完成后會(huì)看到這個(gè)界面疙驾。

  
  
  image.png

• 創(chuàng)建任務(wù)
  1凶伙、點(diǎn)擊創(chuàng)建一個(gè)新任務(wù)

  
  
  image.png
  
  

  2、選擇自由風(fēng)格的軟件項(xiàng)目它碎，并起一個(gè)名字

  
  
  image.png
  
  至此函荣，基礎(chǔ)準(zhǔn)備工作已經(jīng)完成显押，我們?cè)诜?wù)器上安裝了Jenkins并啟動(dòng)，然后進(jìn)行了初始化配置傻挂，建立了一個(gè)新任務(wù)乘碑。接下來我們開始配置我們需要的功能。
• 實(shí)現(xiàn)git鉤子功能
  首先我們要實(shí)現(xiàn)一個(gè)git鉤子功能金拒，就是我們向github/碼云等遠(yuǎn)程倉庫push我們的代碼時(shí)兽肤，jenkins能知道我們提交了代碼，這是自動(dòng)構(gòu)建自動(dòng)部署的前提绪抛，鉤子的實(shí)現(xiàn)原理是在遠(yuǎn)端倉庫上配置一個(gè)Jenkins服務(wù)器的接口地址资铡，當(dāng)本地向遠(yuǎn)端倉庫發(fā)起push時(shí)，遠(yuǎn)端倉庫會(huì)向配置的Jenkins服務(wù)器的接口地址發(fā)起一個(gè)帶參數(shù)的請(qǐng)求幢码，jenkins收到后開始工作笤休。
  1、打開剛創(chuàng)建的任務(wù)症副，選擇配置店雅，添加遠(yuǎn)程倉庫地址，私有倉庫需要配置登錄名及密碼贞铣。
  
  image.png
  
  注意Ｄ掷病！這里踩了一個(gè)坑踩了好久辕坝，因?yàn)榉?wù)器上沒有安裝git窍奋，所以，這里之前一直報(bào)錯(cuò)
  
  image.png
  
  要解決這個(gè)問題酱畅，只需要在服務(wù)器某個(gè)文件夾下git clone下费变，如果這個(gè)url可以clone成功，基本就可以解決這個(gè)問題圣贸。
  還有就是，私有倉庫扛稽，需要配置下SSH秘鑰或者用戶名和密碼吁峻。
  2、安裝Generic Webhook Trigger Plugin插件（系統(tǒng)管理-插件管理-搜索Generic Webhook Trigger Plugin）如果可選插件列表為空在张，點(diǎn)擊高級(jí)標(biāo)簽頁用含，替換升級(jí)站點(diǎn)的URL為：http://mirror.xmission.com/jenkins/updates/update-center.json并且點(diǎn)擊提交和立即獲取。
  3帮匾、添加觸發(fā)器
  第2步安裝的觸發(fā)器插件功能很強(qiáng)大啄骇，可以根據(jù)不同的觸發(fā)參數(shù)觸發(fā)不同的構(gòu)建操作，比如我向遠(yuǎn)程倉庫提交的是master分支的代碼瘟斜，就執(zhí)行代碼部署工作缸夹，我向遠(yuǎn)程倉庫提交的是某個(gè)feature分支痪寻，就執(zhí)行單元測(cè)試，單元測(cè)試通過后合并至dev分支虽惭。靈活性很高橡类，可以自定義配置適合自己公司的方案，這里方便演示我們不做任何條件判斷芽唇，只要有提交就觸發(fā)顾画。在任務(wù)配置里勾選Generic Webhook Trigger即可
  
  image.png
  
  4、倉庫配置鉤子 此處以碼云為例匆笤，因?yàn)楣居玫氖谴a云研侣，github的配置基本一致，進(jìn)入碼云項(xiàng)目主頁后炮捧，點(diǎn)擊管理-webhooks-添加庶诡，會(huì)跳出一個(gè)這樣的框來。
  
  image.png
  
  URL格式為 http://<User ID>:<API Token>@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke
  userid和api token在jenkins的系統(tǒng)管理-管理用戶-admin-設(shè)置里寓盗。
  Jenkins IP地址和端口是你部署jenkins服務(wù)器的ip地址灌砖，端口號(hào)沒改過的話就是8080。
  密碼填你和上面userid對(duì)應(yīng)的密碼傀蚌，我這里是admin基显。
  下面的幾個(gè)選項(xiàng)是你在倉庫執(zhí)行什么操作的時(shí)候觸發(fā)鉤子，這里默認(rèn)用push善炫。
  點(diǎn)擊提交完成配置撩幽。
  5、測(cè)試鉤子

1. image.png
   
   

   點(diǎn)擊測(cè)試箩艺，如果配置是成功的窜醉，你的Jenkins左側(cè)欄構(gòu)建執(zhí)行狀態(tài)里將會(huì)出現(xiàn)一個(gè)任務(wù)。

   
   
   image.png
   
   

   另外艺谆，你也可以試下本地提交代碼榨惰，提交代碼后，jenkins也會(huì)開始一個(gè)任務(wù),目前我們沒有配置任務(wù)開始后讓它做什么静汤，所以默認(rèn)它只會(huì)在你提交新代碼后琅催，將新代碼拉取到j(luò)enkins服務(wù)器上。到此為止虫给，git鉤子我們配置完成藤抡。

• 實(shí)現(xiàn)自動(dòng)化構(gòu)建
  git push觸發(fā)鉤子后，jenkins就要開始工作了抹估，自動(dòng)化的構(gòu)建任務(wù)可以有很多種缠黍，比如說安裝升級(jí)依賴包，單元測(cè)試药蜻，e2e測(cè)試瓷式，壓縮靜態(tài)資源替饿，批量重命名等等，無論是npm script還是webpack蒿往，gulp之類的工作流盛垦，你之前在本地能做的，在這里同樣可以做瓤漏。
  作為演示腾夯，這里只演示三個(gè)基本常用的工作流程，安裝依賴包->單元測(cè)試->打包蔬充，也就是下面這三個(gè)命令蝶俱。

npm install
npm run test
npm run build

1、首先饥漫，和本地運(yùn)行npm script一樣榨呆，我們要想在jenkins里面執(zhí)行npm命令，先要在jenkins里面配置node的環(huán)境庸队，可以通過配置環(huán)境變量的方式引入node积蜻，也可以通過安裝插件的方式，這里使用了插件的方式彻消，安裝一下nvm wrapper這個(gè)插件竿拆。
2、打開剛剛的jenkins任務(wù)宾尚，點(diǎn)擊配置里面的構(gòu)建環(huán)境丙笋，勾選這個(gè)，并指定一個(gè)node版本煌贴。

image.png

3御板、點(diǎn)擊構(gòu)建，把要執(zhí)行的命令輸進(jìn)去牛郑，多個(gè)命令使用&&分開怠肋。

image.png

image.png

6刽辙、如果上一步是SUCCESS窥岩，點(diǎn)擊項(xiàng)目的工作空間，將會(huì)發(fā)現(xiàn)多了dist和node_modules兩個(gè)文件夾宰缤。

image.png

參考掘金文章：實(shí)戰(zhàn)筆記：Jenkins打造強(qiáng)大的前端自動(dòng)化工作流