我的博客地址
文章目錄
- 項(xiàng)目及其技術(shù)棧介紹
- 前端: 項(xiàng)目初始化
- 前端: 使用Sass和Antd
- 前端: 開發(fā)體驗(yàn)優(yōu)化
- 前端: 搭建路由和狀態(tài)管理
- 前端: 支持Axios
- 前端: 打包與環(huán)境變量設(shè)置
- 前端: 團(tuán)隊(duì)代碼規(guī)范
- 后端: 項(xiàng)目初始化和使用Koa相關(guān)
- 后端: 使用TypeORM和MySQL
- 部署: 使用nginx部署前端項(xiàng)目
- 部署: 后端部署
- 部署: 使用jenkins自動(dòng)化部署
前言
這篇文章將是從零搭建博客系列的最后一篇递递，將會(huì)介紹jenkins的安裝以及配合github webhook進(jìn)行前后端項(xiàng)目的自動(dòng)化部署，主要內(nèi)容如下:
- 安裝jenkins
- 配置jenkins和github webhook
安裝jenkins
安裝jenkins之前鼠锈，首先看看他的配置需求:
基本上騰訊云的學(xué)生機(jī)都可以跑起來。
-
安裝openjdk-8-jdk
jenkins依賴于java的openjdk齿兔，所以安裝之前先安裝openjdk-8-jdk仆救。
首先輸入sudo add-apt-repository ppa:openjdk-r/ppa將倉(cāng)庫(kù)添加進(jìn)來云矫，這里需要注意的是膳沽，執(zhí)行這個(gè)命令的時(shí)候會(huì)提示需要按一下回車。
之后sudo apt update更新源让禀。
最后輸入echo y|sudo apt-get install openjdk-8-jdk挑社，稍等片刻安裝完畢后。
輸入java -version查看版本巡揍，如果有下面的輸出痛阻，則表明安裝完畢:
image.png 安裝jenkins
安裝完openjdk-8-jdk之后，直接復(fù)制運(yùn)行下面的代碼下載并安裝jenkins腮敌，這個(gè)安裝的時(shí)間可能會(huì)比較長(zhǎng):
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
安裝完畢后他會(huì)自動(dòng)退出進(jìn)程:
之后輸入
sudo service jenkins start開啟jenkins阱当，jenkins相關(guān)命令如下:sudo service jenkins start|stop|restart然后我們?cè)跒g覽器中輸入
服務(wù)器ip:8080，jenkins默認(rèn)監(jiān)聽8080端口糜工，稍等一會(huì)后會(huì)進(jìn)入到該頁(yè)面:
注意: jenkins有可能因?yàn)榉阑饓ε懿黄饋矶氛猓@時(shí)候可以輸入sudo ufw allow 8080開放指定的端口，騰訊云的防火墻默認(rèn)是關(guān)閉的啤斗，所以不存在這個(gè)問題。
-
jenkins初始化配置
根據(jù)提示需要輸入一個(gè)密碼赁咙，這個(gè)密碼所在的文本就是上圖中提示的路徑钮莲，我們將它拷貝出來并輸入進(jìn)去點(diǎn)擊繼續(xù):
image.png
之后點(diǎn)擊安裝推薦插件即可免钻，之后繼續(xù)等待，如果很多插件安裝失敗崔拥，請(qǐng)點(diǎn)擊重試:
image.png
完成后我們創(chuàng)建一個(gè)管理員賬號(hào):
image.png
保存完成后就可以進(jìn)入到j(luò)enkins操作界面了极舔，該階段即算完成。
image.png
配置jenkins和github webhook
這一節(jié)介紹如何將github與jenkins連接起來链瓦，介紹只以前端項(xiàng)目為例拆魏，因?yàn)榍昂蠖伺渲檬且粯拥摹?/p>
-
生成github personal access token
我們進(jìn)入到github中，點(diǎn)擊頭像慈俯，選擇setting:
image.png
然后點(diǎn)擊Developer Setting:
image.png
之后點(diǎn)擊personal access token:
image.png
點(diǎn)擊生成token按鈕:
image.png
之后按照下面的截圖填寫名字渤刃，勾選repo和admin:repo_hook選項(xiàng)，然后點(diǎn)擊生成:
image.png
接下來會(huì)生成一個(gè)token贴膘，這個(gè)token務(wù)必用軟件記下來卖子，因?yàn)楹竺嬖倩貋碚沂钦也坏降牧?/strong>:
image.png -
新建webhook
上述完成后我們?nèi)サ揭渴鸬捻?xiàng)目中，比如我的就是test項(xiàng)目:
image.png
點(diǎn)擊setting -> webhooks:
image.png
點(diǎn)擊add webhook刑峡，然后按照下圖填寫信息洋闽，然后點(diǎn)擊添加:
image.png -
設(shè)置jenkins
之后我們來到j(luò)enkins頁(yè)面，點(diǎn)擊添加新項(xiàng)目:
image.png
填寫完名字后突梦，選擇創(chuàng)建一個(gè)自由風(fēng)格項(xiàng)目诫舅，然后確定:
接著去到j(luò)enkins自己的系統(tǒng)管理界面:
在github項(xiàng)點(diǎn)擊添加github服務(wù)器:
然后輸入名稱，點(diǎn)擊添加按鈕添加jenkins憑證:
之后再?gòu)棾隹蛑刑顚懭缦鹿迹簏c(diǎn)擊確定:
然后在下拉框中選擇你剛才填寫的描述項(xiàng)刊懈，并勾上管理hook按鈕:
點(diǎn)擊連接測(cè)試，出現(xiàn)如下即為成功撮奏，點(diǎn)擊底下的保存后退出:
我們回到剛才新建的項(xiàng)目中俏讹，點(diǎn)進(jìn)去配置頁(yè)面:
第一項(xiàng)General勾選github項(xiàng)目，并將項(xiàng)目地址填進(jìn)去:
第二項(xiàng)源碼管理：
如果上面的Credentials沒有選項(xiàng)畜吊，點(diǎn)擊添加按鈕選擇jenkins泽疆，在彈出框中填寫如下圖，添加完畢后在點(diǎn)下拉框應(yīng)該就要選項(xiàng)了:
第三項(xiàng)構(gòu)建觸發(fā)器選項(xiàng):
第四項(xiàng)構(gòu)建環(huán)建中選擇該項(xiàng):
之后下面會(huì)出現(xiàn)一個(gè)綁定項(xiàng)玲献，點(diǎn)擊新增殉疼，選擇secret text:
然后選擇之前填寫的標(biāo)識(shí):
第五項(xiàng)構(gòu)建選擇執(zhí)行shell，這個(gè)shell是在你的項(xiàng)目上傳到github捌年，github通知給jenkins之后執(zhí)行的腳本:
比如下面一個(gè)簡(jiǎn)單的shell腳本:
安裝依賴 -> build出靜態(tài)文件 -> 將靜態(tài)文件移到目標(biāo)目錄:
編輯完成后點(diǎn)擊保存按鈕瓢娜。
驗(yàn)證成果
之后我們?cè)谇岸酥刑砑右恍凶郑缓髉ush到github上:
再來到j(luò)enkins中查看礼预，你會(huì)發(fā)現(xiàn)項(xiàng)目開始自動(dòng)部署了:
你可以點(diǎn)擊進(jìn)度條查看部署進(jìn)度:
等待部署完成后眠砾，刷新頁(yè)面，最新的效果就出來了:
后端部署的方式和前端類似托酸，在這里就不做贅述了褒颈，大家也可以自己實(shí)踐一下柒巫。
后記
從零搭建項(xiàng)目系列到這里就結(jié)束了，本打算再通過一篇文章寫寫把前端資源弄到cdn上去谷丸，但迫于目前已經(jīng)沒有已備案域名堡掏，所以這一步只能往后延，等以后有心思了再補(bǔ)上刨疼。
也希望大家能夠提出意見幫助我調(diào)整文章內(nèi)容泉唁，使其更易懂，幫到更多的人揩慕。
