我的博客地址
文章目錄
- 項目及其技術棧介紹
- 前端: 項目初始化
- 前端: 使用Sass和Antd
- 前端: 開發體驗優化
- 前端: 搭建路由和狀態管理
- 前端: 支持Axios
- 前端: 打包與環境變量設置
- 前端: 團隊代碼規范
- 后端: 項目初始化和使用Koa相關
- 后端: 使用TypeORM和MySQL
- 部署: 使用nginx部署前端項目
- 部署: 后端部署
- 部署: 使用jenkins自動化部署
前言
這篇文章將是從零搭建博客系列的最后一篇,將會介紹jenkins的安裝以及配合github webhook進行前后端項目的自動化部署,主要內容如下:
- 安裝jenkins
- 配置jenkins和github webhook
安裝jenkins
安裝jenkins之前,首先看看他的配置需求:
基本上騰訊云的學生機都可以跑起來。
-
安裝openjdk-8-jdk
jenkins依賴于java的openjdk,所以安裝之前先安裝openjdk-8-jdk。
首先輸入sudo add-apt-repository ppa:openjdk-r/ppa
將倉庫添加進來,這里需要注意的是,執行這個命令的時候會提示需要按一下回車。
之后sudo apt update
更新源。
最后輸入echo y|sudo apt-get install openjdk-8-jdk
,稍等片刻安裝完畢后。
輸入java -version
查看版本,如果有下面的輸出,則表明安裝完畢:
image.png 安裝jenkins
安裝完openjdk-8-jdk之后,直接復制運行下面的代碼下載并安裝jenkins,這個安裝的時間可能會比較長:
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
安裝完畢后他會自動退出進程:
之后輸入
sudo service jenkins start
開啟jenkins,jenkins相關命令如下:sudo service jenkins start|stop|restart
然后我們在瀏覽器中輸入
服務器ip:8080
,jenkins默認監聽8080端口,稍等一會后會進入到該頁面:注意: jenkins有可能因為防火墻跑不起來,這時候可以輸入sudo ufw allow 8080
開放指定的端口,騰訊云的防火墻默認是關閉的,所以不存在這個問題。
-
jenkins初始化配置
根據提示需要輸入一個密碼,這個密碼所在的文本就是上圖中提示的路徑,我們將它拷貝出來并輸入進去點擊繼續:
image.png
之后點擊安裝推薦插件即可,之后繼續等待,如果很多插件安裝失敗,請點擊重試:
image.png
完成后我們創建一個管理員賬號:
image.png
保存完成后就可以進入到jenkins操作界面了,該階段即算完成。
image.png
配置jenkins和github webhook
這一節介紹如何將github與jenkins連接起來,介紹只以前端項目為例,因為前后端配置是一樣的。
-
生成github personal access token
我們進入到github中,點擊頭像,選擇setting:
image.png
然后點擊Developer Setting:
image.png
之后點擊personal access token:
image.png
點擊生成token按鈕:
image.png
之后按照下面的截圖填寫名字,勾選repo
和admin:repo_hook
選項,然后點擊生成:
image.png
接下來會生成一個token,這個token務必用軟件記下來,因為后面再回來找是找不到的了:
image.png -
新建webhook
上述完成后我們去到要部署的項目中,比如我的就是test項目:
image.png
點擊setting -> webhooks:
image.png
點擊add webhook,然后按照下圖填寫信息,然后點擊添加:
image.png -
設置jenkins
之后我們來到jenkins頁面,點擊添加新項目:
image.png
填寫完名字后,選擇創建一個自由風格項目,然后確定:
接著去到jenkins自己的系統管理界面:
在github項點擊添加github服務器:
然后輸入名稱,點擊添加按鈕添加jenkins憑證:
之后再彈出框中填寫如下,之后點擊確定:
然后在下拉框中選擇你剛才填寫的描述項,并勾上管理hook按鈕:
點擊連接測試,出現如下即為成功,點擊底下的保存后退出:
我們回到剛才新建的項目中,點進去配置頁面:
第一項General
勾選github項目,并將項目地址填進去:
第二項源碼管理:
如果上面的Credentials沒有選項,點擊添加按鈕選擇jenkins,在彈出框中填寫如下圖,添加完畢后在點下拉框應該就要選項了:
第三項構建觸發器選項:
第四項構建環建中選擇該項:
之后下面會出現一個綁定項,點擊新增,選擇secret text:
然后選擇之前填寫的標識:
第五項構建選擇執行shell,這個shell是在你的項目上傳到github,github通知給jenkins之后執行的腳本:
比如下面一個簡單的shell腳本:
安裝依賴 -> build出靜態文件 -> 將靜態文件移到目標目錄:
編輯完成后點擊保存按鈕。
驗證成果
之后我們在前端中添加一行字,然后push到github上:
再來到jenkins中查看,你會發現項目開始自動部署了:
你可以點擊進度條查看部署進度:
等待部署完成后,刷新頁面,最新的效果就出來了:
后端部署的方式和前端類似,在這里就不做贅述了,大家也可以自己實踐一下。
后記
從零搭建項目系列到這里就結束了,本打算再通過一篇文章寫寫把前端資源弄到cdn上去,但迫于目前已經沒有已備案域名,所以這一步只能往后延,等以后有心思了再補上。
也希望大家能夠提出意見幫助我調整文章內容,使其更易懂,幫到更多的人。