寫給前端的 Jenkins 教程——快速實(shí)現(xiàn)前端/ Node.js 項(xiàng)目的 CI/CD

前言

眾所周知，我們在開發(fā)的過程中，寫代碼其實(shí)只占很小的一部分，更多的時間其實(shí)是在設(shè)計(jì)代碼、構(gòu)建和部署。

代碼的設(shè)計(jì)非常考驗(yàn)代碼功底，本人才疏學(xué)淺，就不講解這個部分了。

構(gòu)建和部署通常來講沒那么復(fù)雜，但是卻十分繁瑣，尤其是手動的方式進(jìn)行構(gòu)建部署。重復(fù)操作多，流程長，非常消耗耐心和精力。

細(xì)心的同學(xué)應(yīng)該發(fā)現(xiàn)標(biāo)題中出現(xiàn)了一個新的名詞：CI/CD。

在軟件工程中，CI/CD 或 CICD 通常指的是持續(xù)集成和持續(xù)交付或持續(xù)部署的組合實(shí)踐。CI/CD 通過在應(yīng)用程序的構(gòu)建、測試和部署中實(shí)施自動化，在開發(fā)和運(yùn)營團(tuán)隊(duì)之間架起了橋梁。

—— 引用自維基百科

CI（Continuous Integration） 指的是持續(xù)集成，即項(xiàng)目代碼的新更改會定期構(gòu)建、測試并合并到代碼倉庫中，有效解決一次開發(fā)多個項(xiàng)目分支導(dǎo)致代碼沖突問題。

CD（Continuous Delivery/Continuous Deployment） 指的是持續(xù)持續(xù)交付/持續(xù)部署，即項(xiàng)目代碼的新更改可以自動或手動合并到主分支，并在合并至主分支后自動執(zhí)行構(gòu)建、測試流程，檢測新更改是否對主分支代碼產(chǎn)生影響。構(gòu)建測試通過后，會自動發(fā)布并部署至生產(chǎn)環(huán)境，有效減輕運(yùn)維團(tuán)隊(duì)負(fù)擔(dān)。

概念說了這么多，肯定很多同學(xué)直呼看不懂。沒關(guān)系，我們找個實(shí)際場景。

相信很多初學(xué)前端的同學(xué)一定有過一個想法：寫一個自己的網(wǎng)站放到服務(wù)器上。

實(shí)現(xiàn)這個想法通常需要以下幾個步驟：

編寫代碼 -> （單元測試/集成測試） -> 上傳至代碼倉庫 -> 打包構(gòu)建 -> 上傳至服務(wù)器 -> 配置 Nginx/Apache 將 80 端口映射至網(wǎng)站文件夾

是不是一個非常長的流程？

當(dāng)我們有了 CI/CD 的系統(tǒng)之后，我們就只需要編寫代碼，剩下的步驟都交給 CI/CD 系統(tǒng)來處理，這極大地解放了我們的雙手，提升了開發(fā)效率。

Jenkins 簡介

Jenkins 官網(wǎng)

Jenkins 是開源 CI&CD 軟件領(lǐng)導(dǎo)者，提供超過 1000 個插件來支持構(gòu)建、部署、自動化，滿足任何項(xiàng)目的需要。

一句話概括：Jenkins 是一款以插件化的方式實(shí)現(xiàn) CI/CD 的軟件。

前期工作

準(zhǔn)備一臺干凈的裝有 CentOS 7+ 的物理機(jī)/虛擬機(jī)/云服務(wù)器。

注意：后續(xù)操作建議在 root 用戶下進(jìn)行，避免出現(xiàn)權(quán)限問題！

安裝寶塔面板

寶塔面板是一款比較好用的服務(wù)器運(yùn)維軟件，建議安裝寶塔面板后使用面板來安裝各種服務(wù)器軟件。

#?物理機(jī)/虛擬機(jī)的同學(xué)直接在終端執(zhí)行
#?云服務(wù)器的同學(xué)可以遠(yuǎn)程連接服務(wù)器后在終端執(zhí)行
yum?install?-y?wget?&&?wget?-O?install.sh?http://download.bt.cn/install/install_6.0.sh?&&?sh?install.sh

面板安裝好后終端會輸出面板的隨機(jī)入口 URL 和初始化賬號密碼，可以將 URL 輸入瀏覽器，即可進(jìn)入面板的登錄界面。

使用云服務(wù)器的同學(xué)如果將 URL 輸入瀏覽器后無法訪問面板，記得進(jìn)入云服務(wù)器廠商的管理控制臺將 8888 端口放行。

安裝 LNMP

LNMP 其實(shí)指的是一套網(wǎng)站運(yùn)行的服務(wù)器架構(gòu)：L（Linux）、N（Nginx）、M（MySQL）、P（PHP）。

進(jìn)入面板后，面板會推薦我們安裝兩套服務(wù)器架構(gòu)的其中之一：LNMP/LAMP，這個時候我們選擇左邊的 LNMP。

MySQL 和 PHP 我們可能暫時用不到，不過寶塔推薦我們安裝，我們就先安裝上。

安裝完成之后，我們就可以開始安裝 Jenkins 了。

安裝 Jenkins

首先，我們先檢查一下機(jī)器是否安裝了 Java。

很簡單，終端輸入 java，輸出不是 command not found 就說明我們的機(jī)器已經(jīng)安裝了 Java。

不過我還是建議使用 yum 重新安裝一下：

yum?install?java

接著，安裝下載工具 wget：

wget?-O?/etc/yum.repos.d/jenkins.repo?https://pkg.jenkins.io/redhat-stable/jenkins.repo

然后，導(dǎo)入下載密匙：

rpm?--import?https://pkg.jenkins.io/redhat-stable/jenkins.io.key

等上述步驟都執(zhí)行完成后，就可以開始安裝 Jenkins 了：

yum?install?jenkins

安裝過程中可能會跳出幾個提示，輸入 yes 或者 y 放行就好。

啟動 Jenkins

經(jīng)過了漫長的等待，我們可以啟動 Jenkins 了：

service?jenkins?start

Jenkins 運(yùn)行在機(jī)器的 8080 端口，使用云服務(wù)器的同學(xué)記得到防火墻放行端口。

初始化 Jenkins

在瀏覽器輸入 http://<你的服務(wù)器 IP>:8080 就可以訪問到 Jenkins 的解鎖界面了。

初始化 Jenkins 需要輸入一段命令來查看密碼：

cat?/var/lib/jenkins/secrets/initialAdminPassword

把控制臺輸出的密碼復(fù)制到 Jenkins 解鎖界面中，插件安裝界面了。

安裝插件

我們選擇左邊的安裝推薦插件，然后靜等插件安裝完成。

如果有安裝失敗的插件，點(diǎn)擊重試就好，一般多試幾次就可以。

當(dāng)然不排除有多試幾次也不行的，建議重置一下服務(wù)器從頭再來一次。

不嫌麻煩的話也可以一個一個手動安裝，插件下載地址：手動下載地址。

創(chuàng)建用戶

都搞定之后就是創(chuàng)建一個管理員賬號了，輸入自己喜歡的用戶名和密碼，輸入全名和電子郵箱就可以創(chuàng)建了。

安裝 Node.js 插件

創(chuàng)建完用戶之后就能夠進(jìn)入到歡迎頁了，我們找到左邊的 管理 Jenkins，然后找到 插件管理。

插件管理

在 插件管理 頁我們點(diǎn)擊 可選插件 Tab，然后在搜索欄中輸入 NodeJS，只會命中一個插件，我們安裝它。

搜索 NodeJS

等待安裝完成。

NodeJS 安裝完成

配置 Node.js 插件

緊接著我們就要去配置 Node.js 了，點(diǎn)擊 管理 Jenkins，找到 全局工具配置，然后翻到最底下，有一個 NodeJS的配置區(qū)域。

配置 NodeJS

我們點(diǎn)擊 新增 NodeJS，給它取個名字，選個版本，建議選 LTS 的版本。

新增 NodeJS

安裝 Publish Over SSH 插件

配置好 Node.js 之后繼續(xù)回到 插件管理，搜索 Publish Over SSH 并安裝。

Publish Over SSH 安裝完成

配置 Publish Over SSH 插件

安裝好之后就要配置 SSH 了，還是點(diǎn)擊 管理 Jenkins，找到 系統(tǒng)配置，配置好云服務(wù)器的 SSH 連接信息，點(diǎn)擊右下角的 Test Configuration 測試一下連接是否正常，顯示 Success 就說明配置正確了。

配置 Publish Over SSH

安裝 GitHub API 插件

跟前面安裝插件的步驟一樣，我們安裝好 GitHub API 插件。

配置 GitHub API 插件

在配置之前，我們先要到 GitHub 生成 Personal access token。

我們點(diǎn)擊右上角 頭像 - Settings，找到 Developer settings，然后選中 Personal access tokens，點(diǎn)擊右上角 Generate new token，按圖中所示勾選對應(yīng)的內(nèi)容。

生成 Personal access token

點(diǎn)擊 Generate token 之后就會生成一段 token。**注意：token 只會顯示一次！token 只會顯示一次！token 只會顯示一次！**建議用記事本記一下。

既然是要實(shí)現(xiàn)代碼 push 到倉庫就自動構(gòu)建并發(fā)布，那么我們肯定得用到 Webhook，不過我們不需要手動創(chuàng)建 Webhook，插件會幫我們自動創(chuàng)建。

現(xiàn)在我們繼續(xù)來配置插件，還是到 系統(tǒng)配置 當(dāng)中，找到 GitHub 配置的部分，點(diǎn)擊 添加 GitHub 服務(wù)器，點(diǎn)擊 憑據(jù) 右側(cè)的 添加 按鈕，選擇 Jenkins。

添加 GitHub 服務(wù)器

點(diǎn)擊后會彈出一個添加憑據(jù)的窗口，類型 選擇為 Secret text，將我們剛才生成的 Personal access token 復(fù)制到 Secret 一欄中，點(diǎn)擊添加。

添加憑據(jù)

添加后我們在 憑據(jù) 一欄選中 Secret text，勾選 管理 Hook，點(diǎn)擊 連接測試，如果正確顯示了你的 GitHub 用戶名，就說明配置成功了。

GitHub 配置完成

新建任務(wù)

現(xiàn)在我們可以新建任務(wù)了，點(diǎn)擊主界面左側(cè)的 新建任務(wù)，選擇 構(gòu)建一個自由風(fēng)格的軟件項(xiàng)目，給任務(wù)取個名字。

新建任務(wù)

我們勾選 GitHub 項(xiàng)目，輸入 項(xiàng)目 URL（就是項(xiàng)目的瀏覽器地址）。將下面的 源碼管理 選中為 Git，將你要構(gòu)建部署的項(xiàng)目的 clone 地址填到 Repository URL 一欄中（就是項(xiàng)目的瀏覽器地址加上 .git 后綴名）。

配置任務(wù)

注意：如果是公開的倉庫，Credentials 一欄可以選擇無；如果是私有的倉庫，需要先添加一個可以訪問該倉庫的 GitHub 賬號，方法類似配置 GitHub API 插件，只不過類型一欄選擇 用戶名密碼，然后在下方輸入 用戶名 密碼。

緊接著我們勾選 構(gòu)建觸發(fā)器 一欄中的 GitHub hook trigger for GITScm polling，勾選 構(gòu)建環(huán)境 一欄中的 Use secret text(s) or file(s)，在 憑據(jù) 一欄中選中我們之前添加的 Secret text，勾選 Provide Node & npm bin/ folder to PATH 為構(gòu)建項(xiàng)目提供 Node.js 環(huán)境。

配置任務(wù)

然后我們到 構(gòu)建 一欄中，增加構(gòu)建步驟，選擇 執(zhí)行 shell，在命令中輸入：

node?-v
npm?-v

rm?-rf?node_modules
npm?install
npm?run?test
npm?run?build

添加構(gòu)建步驟

注意：命令中有一條 npm run test 命令可以不加，如果是編寫好了測試用例的項(xiàng)目，就需要加上，測試代碼功能是否正常。

添加構(gòu)建命令

最后一步，我們點(diǎn)擊 增加構(gòu)建后操作步驟，選擇 Send build artifacts over SSH，使用 SSH 的方式將代碼上傳至服務(wù)器。

添加構(gòu)建后步驟添加構(gòu)建后步驟

最后，點(diǎn)擊 保存，配置完成~

立即構(gòu)建

新建任務(wù) 配置完成之后，我們點(diǎn)擊左側(cè)的 立即構(gòu)建，就會發(fā)現(xiàn)左下方的 Build History 中多了一個名為 #1 的記錄。

#1

點(diǎn)擊 #1，選擇左側(cè)的 控制臺輸出，就可以看到我們打包構(gòu)建過程中的所有控制臺輸出了。

#1 控制臺輸出#1 Console

然后我們就能到自己的網(wǎng)站上查看效果了！我部署的是《試試前端自動化測試（React 實(shí)戰(zhàn)）》中的 Demo。

測試 Webhook

既然要實(shí)現(xiàn)自動化構(gòu)建部署，那就得在每次代碼 push 到遠(yuǎn)程倉庫的時候自動執(zhí)行，所以我們要測試一下 Webhook 是否生效，是否可以觸發(fā)構(gòu)建部署。

測試

這個時候再回到 Jenkins，你會驚訝地發(fā)現(xiàn)有個構(gòu)建正在進(jìn)行！

#2

大功告成！

總結(jié)

這算是我提前學(xué)習(xí)工作內(nèi)容？畢竟畢業(yè)后入職也會涉及到相關(guān)平臺的搭建和配置。

折騰 Jenkins 花了整整一天，期間遇到各種各樣的問題不斷重置服務(wù)器，最后踩完了所有的坑，一次跑通了。

寫這篇文章花了一天半的樣子 ，文中好多圖，一直截圖上傳，好難 QAQ，這么詳細(xì)厚著臉皮要個贊不過分吧~

不知道是不是我服務(wù)器性能不夠，有時候會出現(xiàn)構(gòu)建到一半 Jenkins 服務(wù)掛掉的情況，偶現(xiàn)。

如果有條件的話還是建議搞臺高性能的服務(wù)器，如果是學(xué)生黨的話可以考慮把 Jenkins 服務(wù)放在另外一臺干凈的服務(wù)器上。

??愛心三連擊

1.看到這里了就點(diǎn)個在看支持下吧，你的「點(diǎn)贊，在看」是我創(chuàng)作的動力。

2.關(guān)注公眾號程序員成長指北，回復(fù)「1」加入Node進(jìn)階交流群！「在這里有好多 Node 開發(fā)者，會討論 Node 知識，互相學(xué)習(xí)」！

3.也可添加微信【ikoala520】，一起成長。

“在看轉(zhuǎn)發(fā)”是最大的支持