從零搭建項目(13) --- 部署: 使用jenkins自動化部署

我的博客地址

正式地址
測試地址
前端源碼
后端源碼

文章目錄

  1. 項目及其技術棧介紹
  2. 前端: 項目初始化
  3. 前端: 使用Sass和Antd
  4. 前端: 開發體驗優化
  5. 前端: 搭建路由和狀態管理
  6. 前端: 支持Axios
  7. 前端: 打包與環境變量設置
  8. 前端: 團隊代碼規范
  9. 后端: 項目初始化和使用Koa相關
  10. 后端: 使用TypeORM和MySQL
  11. 部署: 使用nginx部署前端項目
  12. 部署: 后端部署
  13. 部署: 使用jenkins自動化部署

前言

這篇文章將是從零搭建博客系列的最后一篇,將會介紹jenkins的安裝以及配合github webhook進行前后端項目的自動化部署,主要內容如下:

  1. 安裝jenkins
  2. 配置jenkins和github webhook

安裝jenkins

安裝jenkins之前,首先看看他的配置需求:


image.png

基本上騰訊云的學生機都可以跑起來。

  • 安裝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

安裝完畢后他會自動退出進程:

image.png

之后輸入sudo service jenkins start開啟jenkins,jenkins相關命令如下:
sudo service jenkins start|stop|restart
然后我們在瀏覽器中輸入服務器ip:8080,jenkins默認監聽8080端口,稍等一會后會進入到該頁面:
image.png

注意: 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

    之后按照下面的截圖填寫名字,勾選repoadmin:repo_hook選項,然后點擊生成:
    image.png

    接下來會生成一個token,這個token務必用軟件記下來,因為后面再回來找是找不到的了:
    image.png

  • 新建webhook
    上述完成后我們去到要部署的項目中,比如我的就是test項目:


    image.png

    點擊setting -> webhooks:


    image.png

    點擊add webhook,然后按照下圖填寫信息,然后點擊添加:
    image.png
  • 設置jenkins
    之后我們來到jenkins頁面,點擊添加新項目:


    image.png

填寫完名字后,選擇創建一個自由風格項目,然后確定:


image.png

接著去到jenkins自己的系統管理界面:


image.png

image.png

在github項點擊添加github服務器:


image.png

image.png

然后輸入名稱,點擊添加按鈕添加jenkins憑證:


image.png

之后再彈出框中填寫如下,之后點擊確定:


image.png

然后在下拉框中選擇你剛才填寫的描述項,并勾上管理hook按鈕:


image.png

點擊連接測試,出現如下即為成功,點擊底下的保存后退出:


image.png

我們回到剛才新建的項目中,點進去配置頁面:


image.png

image.png

第一項General勾選github項目,并將項目地址填進去:

image.png

第二項源碼管理:


image.png

如果上面的Credentials沒有選項,點擊添加按鈕選擇jenkins,在彈出框中填寫如下圖,添加完畢后在點下拉框應該就要選項了:


image.png

第三項構建觸發器選項:


image.png

第四項構建環建中選擇該項:


image.png

之后下面會出現一個綁定項,點擊新增,選擇secret text:


image.png

然后選擇之前填寫的標識:
image.png

第五項構建選擇執行shell,這個shell是在你的項目上傳到github,github通知給jenkins之后執行的腳本:


image.png

比如下面一個簡單的shell腳本:
安裝依賴 -> build出靜態文件 -> 將靜態文件移到目標目錄:


image.png

編輯完成后點擊保存按鈕。

驗證成果

之后我們在前端中添加一行字,然后push到github上:


image.png

再來到jenkins中查看,你會發現項目開始自動部署了:


image.png

你可以點擊進度條查看部署進度:
image.png

等待部署完成后,刷新頁面,最新的效果就出來了:


image.png

后端部署的方式和前端類似,在這里就不做贅述了,大家也可以自己實踐一下。

后記

從零搭建項目系列到這里就結束了,本打算再通過一篇文章寫寫把前端資源弄到cdn上去,但迫于目前已經沒有已備案域名,所以這一步只能往后延,等以后有心思了再補上。
也希望大家能夠提出意見幫助我調整文章內容,使其更易懂,幫到更多的人。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。