gitlab和jenkins做持續(xù)集成構(gòu)建教程
背景介紹
上一個(gè)輪回,我花了三篇文章的時(shí)間著重向大家介紹了在條件有限的情況下,如何優(yōu)雅地進(jìn)行前端發(fā)版和迭代。慶七一,熱烈慶祝香港回歸,人民生活水平越來越好,昨天上午我自掏腰包買了臺(tái)服務(wù)器,決定由冷兵器腳本編程部署時(shí)代進(jìn)入熱武器CICD 時(shí)代。
而今,山河無恙,飛機(jī)腳本終于不用再飛寫第二遍了,敬禮!

gitlab & jenkins: 我代表 CICD 接管構(gòu)建部署,你們可以下崗,我們上崗!
手工苦力勞動(dòng):那我走。。。。。
需求分析
我們在處理計(jì)算機(jī)問題時(shí),應(yīng)該去思考這樣一個(gè)理念,“能坐著就不站著,能躺著就不坐著,懶對(duì)于程序員來說是一種美德,應(yīng)該發(fā)揚(yáng)光大”。關(guān)于前端發(fā)版這塊的內(nèi)容,就很雞肋,食之無味棄之可惜。這塊東西很死板,沒什么成長的,沒什么經(jīng)驗(yàn)的朋友可能就是一通 npm 命令,再一頓拖拉彈拽 GUI 操作,然后完事,稍微有點(diǎn)覺醒或者被動(dòng)覺醒的,可能會(huì)抽象出一些計(jì)算機(jī)邏輯釋放一些腳本技能做這件事,再者之,公司老板家里條件好的或者是 VP、CTO 重視的,可能會(huì)搞一套比較規(guī)范的 DevOps 流程,本質(zhì)還是在與時(shí)間賽跑,把一些低優(yōu)先級(jí)或者阻塞工作流的事情,交給對(duì)應(yīng)的擅長做這件事的法器去做,剩下的時(shí)間,大家該劃水的劃水,該學(xué)習(xí)的學(xué)習(xí),該找對(duì)象的找對(duì)象,勸君莫惜金縷衣,勸君惜取少年時(shí),花開堪甚至須折,莫待無花空折枝。
環(huán)境要求
可能眼尖的同學(xué)會(huì)看到我上圖中有個(gè) SecoClient,它是沸騰廠開發(fā)的一個(gè)偉屁恩客戶端,由于 gitlab 服務(wù)器是在另一套體系環(huán)境,所以要連上它,但是坑比的點(diǎn)在于,連上它以后,在公司的其他同事將無法訪問我們連接網(wǎng)線的局域網(wǎng)環(huán)境,在家的話那就更不行了,抱著試試看的心態(tài)去試試連上 secoclint 臨時(shí)分配的網(wǎng)絡(luò)可以進(jìn)行局域網(wǎng)訪問嘛,發(fā)現(xiàn)也還是不行,實(shí)屬無奈,何以解憂,唯有砸錢。
官網(wǎng)寫的配置要求是:
Minimum hardware requirements:
256 MB of RAM
1 GB of drive space (although 10 GB is a recommended minimum if running Jenkins as a Docker container)
Recommended hardware configuration for a small team:
4 GB+ of RAM
50 GB+ of drive space
這個(gè)很重要,如果你是買了云廠商 1G1 核的迷你型機(jī),那我勸你別往下搞了,卡成翔警告。2G2 核勉強(qiáng)磕磕碰碰能跑, 最好是給一個(gè) 4G4 核的機(jī)子,那就差不多了。
樓主我選的是 2G2 核,外加配了點(diǎn)虛擬內(nèi)存,不是很理想,如果不是 secoclient 的原因,我其實(shí)更傾向于用 Linux 去做這件事。
Jenkins 環(huán)境安裝與配置
安裝
這里是以 Windows 下的開發(fā)環(huán)境為例的,所以我會(huì)介紹下 windows 的,Linux 后面也會(huì)提及一下。
安裝 jenkins 的前置條件是電腦有 JAVA 運(yùn)行的環(huán)境,安裝 jdk 也很講究,不是所有版本都可以,你可以簡單地記一下 8,11,17 這三個(gè),具體地參見:https://www.jenkins.io/doc/administration/requirements/java/
這里介紹下沸騰廠的鏡像,有需要的君可自取,https://mirrors.huaweicloud.com/home, 對(duì)于的 jdk 下載文件在這里:https://mirrors.huaweicloud.com/java/jdk/
具體地安裝就是一路火花帶閃電地 next,然后配置 JAVA_HOME,例如我的就是C:\Program Files\Java\jdk-11.0.1, 再然后追加%JAVA_HOME%\bin;到 path,最后配置 CLASSPATH,記不住那一串 jar 包,寫個(gè)"."也是 OK 的。
Jenkins 安裝教程官網(wǎng)已經(jīng)寫的非常詳細(xì)了,我不再贅述,請看這里:https://www.jenkins.io/doc/book/installing/windows/
如果你是 Linux 用戶,可以看我很久以前積灰的文章, Linux 下安裝 JDK: https://www.cnblogs.com/cnroadbridge/p/15221231.html, Linux 下安裝 Jenkins: https://www.cnblogs.com/cnroadbridge/p/15221273.html, 當(dāng)然,這里既然你已經(jīng)選擇用 Linux 了,那為什么不用 Docker 呢?嗯,這個(gè)我后面再介紹。
jenkins 插件配置
這里簡單粗暴一點(diǎn)地做法就是點(diǎn)擊推薦安裝對(duì)應(yīng)地插件,然后裝一下 NodeJS、Publish Over SSH、Git plugin 這幾個(gè)插件,對(duì)應(yīng)前端構(gòu)建綽綽有余了。如果你插件安裝不上,網(wǎng)上一種做法是切換成清華源啥的,你可以試一下,我覺得更好地做法是,我建議你科學(xué) fq。
通用配置
Step 1: 點(diǎn)擊首頁的 Manage Jenkins 進(jìn)行配置

Step 2: 點(diǎn)擊 Configure System 進(jìn)行系統(tǒng)配置
具體的關(guān)注以下幾點(diǎn), Jenkins Location 里的 Jenkins URL 填你的公網(wǎng) IP,郵箱隨便填個(gè)如果你不用郵件服務(wù)的話,
gitlab 可仿照如下配置:
publish over

Step 3: 點(diǎn)擊 Global Tool Configuration 進(jìn)行全局工具配置
這里你主要關(guān)注下 git 就好, 如果你不配置,很有可能拉不下來,所以這里點(diǎn)一下

Step 4: 點(diǎn)擊 Security 下的 manage credentials

你可以仿照下圖,添加適合你的 gitlab API token 或者賬戶密碼

gitlab 的 API TOken 是這樣的

好了,到這里安裝配置相關(guān)的大致就 OK 了。
結(jié)合 gitlab 進(jìn)行持續(xù)構(gòu)建
這里我以構(gòu)建集成一個(gè) vue 項(xiàng)目為例--臥龍機(jī)構(gòu)端,向大家介紹如何結(jié)合 Jenkins 進(jìn)行持續(xù)構(gòu)建。
Step1:創(chuàng)建項(xiàng)目

Step2:填寫配置
這里描述隨便寫點(diǎn)東西吧。
gitlab 服務(wù)器配置

gitlab 倉庫配置
構(gòu)建前對(duì)服務(wù)器做點(diǎn)事
構(gòu)建命令
構(gòu)建命令后執(zhí)行, 最后點(diǎn)擊保存就好了,如果你點(diǎn)應(yīng)用的話,其實(shí)就是暫存的意思。

最后點(diǎn)擊 build now 就可與開始構(gòu)建了

點(diǎn)擊構(gòu)建歷史可以看到相關(guān)的歷史, 點(diǎn)擊控制臺(tái),可以看到相關(guān)的構(gòu)建日志,這方便了回溯,定位問題的根源。
好的,至此教程差不多就接近尾聲了, 你學(xué)會(huì)了嗎?
介紹一個(gè)新思路
我本意是想搞一個(gè)去中心化jenkins,畢竟公司給發(fā)的美帝聯(lián)心想有20GB內(nèi)存,足夠撐起jenkins的一片天,但是問題就在于,之前提到的secoclient連上了以后,我就與我的同事失聯(lián)了,雖然我在我本地可以搞持續(xù)集成,但是他們不可以訪問的到,獨(dú)樂樂不如眾樂樂,讓對(duì)應(yīng)的同事共享下我的Jenkins,我們對(duì)應(yīng)的開發(fā)人手養(yǎng)一只Jenkins,好像也不太現(xiàn)實(shí),畢竟windowser。emmm,如果你是mac或者linux,那完全是可以搞去中心化的Jenkins的,人手養(yǎng)一只Jenkins,用到的時(shí)候放出來,潤潤潤,不用的時(shí)候把它停掉,豈不是美哉,我簡單地貼一份配置,具體的有興趣的讀者看這里:https://hub.docker.com/_/jenkins
docker-compose.yml
version: "3.7"
services:
jenkins:
image: jenkinsci/blueocean
ports:
- 8080:8080
- 50000:50000
networks:
- jenkins
volumes:
- jenkins:/var/jenkins_home
- /var/run/docker.sock:/var/run/docker.sock
networks:
jenkins:
volumes:
jenkins:
FAQ
文中提及的上期的三篇文章是什么?
基于 bat 腳本的前端發(fā)布流程設(shè)計(jì)與實(shí)現(xiàn):https://www.yuque.com/ataola/blog/nul1i4
使用 Shell 腳本優(yōu)化 Linux 服務(wù)器上部署流程:https://www.yuque.com/ataola/blog/ece4x8
基于 bat 腳本的前端發(fā)布流程的優(yōu)化:https://www.yuque.com/ataola/blog/mye713
密碼忘記了怎么辦?找到
.jenkins目錄,例如C:\ProgramData\Jenkins\.jenkins, 然后打開config.xml, 將<useSecurity>false</useSecurity>,然后重啟,進(jìn)入到Jenkins現(xiàn)在暫時(shí)是沒有密碼的,你可以再次設(shè)置下就OK了。內(nèi)存不足怎么辦?
全局安裝下cross-env和increase-memory-limit, 然后package.json追加scripts "fix-memory-limit": "cross-env LIMIT=10240 increase-memory-limit"
vite2.7.x 打包遇到 (vite:css-post) renderChunk error 怎么辦?
卸載 vite,升級(jí)到最新版可破此功.
改成清華源,還是裝不上插件怎么辦?
建議自強(qiáng),嗯,科學(xué)地自強(qiáng)哈.
那你為什么不直接用 gitlab runner 呢?
主要還是各方面受限,因?yàn)閷?duì)應(yīng)搞 gitlab 服務(wù)器的人,他沒裝 gitlab runner,所有也無法運(yùn)行一些 gitlab.yml 配置,進(jìn)行 CICD 構(gòu)建。如有你有興趣了解,具體的可以看這里,https://about.gitlab.com/features/continuous-integration/
最后
希望我老板如果不小心看到這篇文章,能感動(dòng)地給我漲點(diǎn)薪水吧,因?yàn)樽再M(fèi)買服務(wù)器我這都快吃不起東北大米了,23333333。
