我的博客地址
文章目錄
- 項目及其技術棧介紹
- 前端: 項目初始化
- 前端: 使用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上去，但迫于目前已經沒有已備案域名，所以這一步只能往后延，等以后有心思了再補上。
也希望大家能夠提出意見幫助我調整文章內容，使其更易懂，幫到更多的人。
