【每日一題NO.79】說(shuō)下 CI/CD 搭建的流程

CI/CD

CI 代表著持續(xù)集成，CD 代表著持續(xù)交付和持續(xù)部署。簡(jiǎn)單來(lái)說(shuō)，就是在本地更改代碼---git push 推送到代碼托管---自動(dòng)安裝依賴，打包測(cè)試部署等(開(kāi)發(fā)環(huán)境一般自動(dòng)，生產(chǎn)環(huán)境一般需要手動(dòng)點(diǎn)擊按鈕上線)

自動(dòng)化流程的必要性

可以避免很多問(wèn)題，少解決很多沖突，假設(shè)前端團(tuán)隊(duì)有 6 個(gè)人，每個(gè)人電腦的系統(tǒng)、node 版本、npm 版本都有可能不一樣，就算是規(guī)定統(tǒng)一了，每個(gè)人拉取代碼源倉(cāng)庫(kù) build 出來(lái)的產(chǎn)物也可能不一樣，這樣會(huì)產(chǎn)生幾個(gè)問(wèn)題：

• 耗時(shí)：每個(gè)人都需要去構(gòu)建
• 易沖突：當(dāng) git 做 pull、merge、push 等的時(shí)候一不小心就會(huì)產(chǎn)生各種不必要的沖突要去解決，非常的耗時(shí)和不愉快
• 緩存失效：構(gòu)建出來(lái)的靜態(tài)文件的 hash 不好控制，容易在客戶端失去緩存，即使在 webpack 中設(shè)置了 contenthash 等等優(yōu)化

大體的搭建過(guò)程

1. 準(zhǔn)備一個(gè)項(xiàng)目，推到遠(yuǎn)程倉(cāng)庫(kù)

可以是 GitHub、gitlab、碼云等，這里以 GitHub+Jenkins 為例

2. 準(zhǔn)備一個(gè)能外網(wǎng)訪問(wèn)的服務(wù)器

公司服務(wù)器、自己買的 ECS 服務(wù)器，要是非用你自己的電腦當(dāng)服務(wù)器也可以，保證外網(wǎng)可以訪問(wèn)即可，比如使用 ngrok。

3. 服務(wù)器安裝 Jenkins

4. Jenkins 的初始化

①jenkins 的默認(rèn)端口是 8080,啟動(dòng)成功后在瀏覽器打開(kāi)。
②進(jìn)入后會(huì)讓我們輸管理員密碼，打開(kāi)網(wǎng)頁(yè)上提示路徑下的文件，復(fù)制密碼粘貼輸入即可。
③然后會(huì)讓安裝需要的插件，此處選默認(rèn)即可，等待安裝完成。
④創(chuàng)建一個(gè)管理員賬戶。
⑤創(chuàng)建一個(gè)新任務(wù)，選擇自由風(fēng)格軟件項(xiàng)目
⑥安裝 Generic Webhook Trigger Plugin 插件，后面 git 鉤子要用到

5. 實(shí)現(xiàn) git 鉤子

1. 首先要實(shí)現(xiàn)一個(gè)git鉤子功能，就是向GitHub、碼云等遠(yuǎn)程倉(cāng)庫(kù)push代碼時(shí)，Jenkins能知道我們提交代碼，這是自動(dòng)構(gòu)建自動(dòng)部署的前提；鉤子的實(shí)現(xiàn)原理是在遠(yuǎn)端倉(cāng)庫(kù)上配置一個(gè)Jenkins服務(wù)器的接口地址，當(dāng)本地向遠(yuǎn)端倉(cāng)庫(kù)發(fā)起push時(shí)，遠(yuǎn)端倉(cāng)庫(kù)會(huì)向配置的Jenkins服務(wù)器的接口地址發(fā)起一個(gè)帶參數(shù)的請(qǐng)求，Jenkins收到后開(kāi)始工作。

2. Jenkins中打開(kāi)剛創(chuàng)建的任務(wù)，選擇配置，添加遠(yuǎn)程倉(cāng)庫(kù)地址，配置登錄名和密碼及其他

3. 添加觸發(fā)器，勾選上面安裝的Generic Webhook Trigger Plugin，設(shè)置一個(gè)token

4. 倉(cāng)庫(kù)配置鉤子 GitHub 的 webhook 的url設(shè)置，http://服務(wù)器IP:8080/generic-webhook-trigger/invoke?token=sunny；創(chuàng)建完成，可以看到Jenkins的項(xiàng)目左側(cè)欄構(gòu)建執(zhí)行狀態(tài)里將會(huì)出現(xiàn)一個(gè)任務(wù)；工作目錄里拉取遠(yuǎn)程倉(cāng)庫(kù)的代碼；另外，也可以試一下本地提交代碼，提交代碼之后，Jenkins也會(huì)開(kāi)始一個(gè)任務(wù)，目前沒(méi)有配置任務(wù)開(kāi)始后讓它做什么，所以默認(rèn)它只會(huì)在你提交新代碼后，將新代碼拉取到Jenkins服務(wù)器上，到此為止，git鉤子配置完成

6. 實(shí)現(xiàn)自動(dòng)化構(gòu)建

1. 自動(dòng)化的構(gòu)建任務(wù)可以有很多種，比如說(shuō)安裝升級(jí)依賴包、單元測(cè)試、e2e測(cè)試、壓縮靜態(tài)資源，批量重命名等等，無(wú)論是npm script 還是webpack，gulp之類的工作流，之前在本地能做的，在這里同樣可以做。

2. 作為演示，這里只演示三個(gè)基本常用的工作流程，安裝依賴包--單元測(cè)試--打包，也就是下面這三個(gè)命令：npm install，npm run test，npm run build

3. 想在Jenkins里面執(zhí)行npm命令，先要在Jenkins里面配置node環(huán)境，可以通過(guò)配置環(huán)境變量的方式引入node，也可以通過(guò)安裝插件的方式，這里使用插件的方式，安裝下nvm wrapper這個(gè)插件。打開(kāi)剛剛的Jenkins任務(wù)，點(diǎn)擊配置里面的構(gòu)建環(huán)境，勾選這個(gè)插件，并指定一個(gè)node版本。

4. 點(diǎn)擊構(gòu)建，把要執(zhí)行的命令輸入進(jìn)去，多個(gè)命令使用&&分開(kāi)，保存

5. 此時(shí)本地修改以下代碼push測(cè)試一下(也可以點(diǎn)擊立即構(gòu)建測(cè)試)，點(diǎn)擊本次觸發(fā)的那個(gè)任務(wù)，選擇控制臺(tái)輸出，將會(huì)看到Jenkins在云端指定的過(guò)程

6. 命令行最后一行是Finished狀態(tài)的，如果是success則證明執(zhí)行的任務(wù)都順利進(jìn)行，如果是failure則證明中間有重大錯(cuò)誤導(dǎo)致任務(wù)失敗，如果是unstable代表雖然有些小問(wèn)題但是不妨礙任務(wù)，failure和unstable狀態(tài)下的可以去命令行看下錯(cuò)誤輸出，看看哪里出現(xiàn)了問(wèn)題

7. 如果上一步是success，點(diǎn)擊項(xiàng)目的工作空間，將會(huì)發(fā)現(xiàn)多了dist和node_modules兩個(gè)文件夾。

8. 至此，我們搭建了一個(gè)簡(jiǎn)易版構(gòu)建工作流程，構(gòu)建完成了，接下來(lái)需要自動(dòng)化部署

7. 實(shí)現(xiàn)自動(dòng)化部署

1. 首先，先在Jenkins上裝一個(gè)Publish Over SSH，我們通過(guò)這個(gè)工具實(shí)現(xiàn)服務(wù)器部署功能

2. 在要部署代碼的服務(wù)器上創(chuàng)建一個(gè)文件夾用于接收J(rèn)enkins傳過(guò)來(lái)的代碼，我在服務(wù)器上建了一個(gè) testing文件夾。

3. Jenkins想要往服務(wù)器上部署代碼必須登錄服務(wù)器才可以，這里有兩種登錄方式，一種是ssh驗(yàn)證，一種是密碼驗(yàn)證，就像自己登錄自己的服務(wù)器：可以使用ssh免密碼登錄也可以每次輸入密碼登錄；系統(tǒng)管理-系統(tǒng)設(shè)置里面找到Publish over SSH 這一項(xiàng)。

4. 配置完成之后，點(diǎn)擊Test Configuration 測(cè)試一下是否可以鏈接上，如果成功返回success，失敗會(huì)返回報(bào)錯(cuò)信息，根據(jù)報(bào)錯(cuò)信息改正即可

5. 進(jìn)入我們創(chuàng)建的任務(wù)，點(diǎn)擊構(gòu)建，增加2行代碼，代表著將dist里面的東西打包一個(gè)文件，因?yàn)槲覀円獋鬏敗?/p>

6. 點(diǎn)擊構(gòu)建后操作，增加構(gòu)建后操作步驟，選擇send build artificial over SSH。

7. 現(xiàn)在當(dāng)我們把本地項(xiàng)目修改一下，為Jenkins后發(fā)出一個(gè)git push，過(guò)一會(huì)就會(huì)發(fā)現(xiàn)我們的服務(wù)器上已經(jīng)部署好最新的代碼。

8. 至此，自動(dòng)化部署已經(jīng)完成，但是如果過(guò)程中有異常怎么辦，或是我們想知道每次Jenkins運(yùn)行的日志及運(yùn)行結(jié)果，我們可以通過(guò)配置郵件服務(wù)來(lái)讓Jenkins每次完成任務(wù)之后通知相關(guān)人員。

8. 可以添加郵件提醒

1. 這里我們不用E-mail Notification，因?yàn)樗泥]件服務(wù)功能太少，無(wú)法自定義郵件內(nèi)容及自定義觸發(fā)鉤子，而且只能在異常情況下才能發(fā)郵件。我們使用Editable Email Notification 這個(gè)。

2. 打開(kāi)系統(tǒng)管理--系統(tǒng)配置--Extended Email Notification，不是管理系統(tǒng)--系統(tǒng)配置--郵件通知，千萬(wàn)不要配置錯(cuò)誤，否則不起作用。配置一下用來(lái)發(fā)郵件的郵箱。

3. 要是用別的廠家的郵箱服務(wù)就查下別的郵箱廠家smtp怎么配，用qq郵箱的除了user Name和password，其他的一樣。另外password寫的不是qq郵箱的密碼，而是開(kāi)啟smtp服務(wù)后發(fā)短信獲取的密碼。

4. 打開(kāi)創(chuàng)建的那個(gè)任務(wù)，增加構(gòu)建后操作步驟，選擇Editable Email Notification，Project Recipient List 那里寫你要發(fā)給誰(shuí)郵件，可以多個(gè)郵箱可以用分號(hào)隔開(kāi)

5. 然后點(diǎn)擊Advanced Setting-Triggers-Add Trigger，選擇 always，意思是無(wú)論什么情況下任務(wù)執(zhí)行完成就發(fā)郵件，也可以選擇其他模式，比如任務(wù)執(zhí)行異常才發(fā)郵件

6. 現(xiàn)在當(dāng)我們?cè)诒镜匦薷拇a后發(fā)出一個(gè)git push，Jenkins自動(dòng)構(gòu)建部署完成之后就會(huì)發(fā)一封郵件，郵件附件會(huì)有本次任務(wù)的日志

7. 至此，我們的郵件提醒功能也配置完成了

所有《每日一題》的 知識(shí)大綱索引腦圖 整理在此：https://www.yuque.com/dfe_evernote/interview/everyday
你也可以點(diǎn)擊文末的 “閱讀原文” 快速跳轉(zhuǎn)