使用jenkins一鍵打包釋出vue專案

guojikun發表於2021-05-10

jenkins的安裝

Jenkins是一款開源 CI&CD 軟體,用於自動化各種任務,包括構建、測試和部署軟體。

Jenkins 支援各種執行方式,可通過系統包、Docker 或者通過一個獨立的 Java 程式。

安裝

這裡的作業系統為WSL Ubuntu,其它系統的安裝的請參考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
sudo apt-get install jenkins

更換埠號(預設執行在8080埠)

jenkins的配置檔案在 /etc/default/jenkins;在其中找到HTTP-PORT並修改

企業微信截圖_20210507124427.png

執行

sudo systemctl start jenkins
# OR
sudo service jenkins start

如果要開機自動執行

sudo systemctl enable jenkins

如果執行時碰到如下圖的錯誤,請先安裝jdk

企業微信截圖_20210507124308.png

基礎配置

啟動成功後輸入對應的地址(ip:port)進入jenkins管理介面-如下圖

企業微信截圖_20210507124747.png

上圖中紅色字型對應的檔案中拿到預設的管理員密碼-具體命令

cat /var/lib/jenkins/secrets/initialAdminPassword

命令執行完成後返回如下圖

企業微信截圖_20210507125217.png

輸入密碼之後進入到自定義Jenkins介面(如下圖)

企業微信截圖_20210507125324.png

在此介面我們選擇安裝推薦的外掛就會開始安裝外掛;如下圖

企業微信截圖_20210507125519.png

外掛安裝完成後就會自動進入設定使用者名稱密碼介面(如下圖)

企業微信截圖_20210507125805.png

輸入完成後點選按鈕儲存並完成就會進入下一個介面例項配置

企業微信截圖_20210507130109.png

點選按鈕儲存並完成就進入一個新介面,再點選其中的按鈕開始使用Jenkins就進入了jenkins的主介面(如下圖),至此就完成了jenkins的安裝與基礎配置。

企業微信截圖_20210507130412.png

釋出vue專案

> 打包vue專案需要nodejs,打包完成後需要通過ssh把打包好的檔案上傳到目標伺服器上。所以下面我們將會來安裝jenkins的nodejs外掛和Publish Over SSH外掛。

安裝外掛-nodejs

在jenkins主介面工作臺,依次點選系統管理>外掛管理進入外掛管理介面(如下圖)

企業微信截圖_20210507142101.png

搜尋結果如下圖

plugins nodejs.png

勾選完外掛並點選安裝後進入到外掛下載介面(如下圖)

企業微信截圖_20210508083514.png

配置nodejs外掛

在jenkins主介面工作臺,依次點選系統管理>全域性工具設定進入外掛管理介面並找到NodeJs選項(如下圖)

企業微信截圖_20210508084303.png

安裝Publish Over SSH外掛並配置

Publish Over SSH外掛的安裝和nodejs外掛是一樣,安裝完成後開始配置外掛;

在jenkins主介面工作臺,依次點選系統管理>系統配置進入外掛配置介面,滾動到Publish over SSH的位置,然後點選SSH Servers下面的新增按鈕(如下圖)

企業微信截圖_20210508113827.png
點選按鈕高階後出現的介面如下

企業微信截圖_20210508114150.png

建立任務

至此,打包vue所需的jenkins外掛都已經安裝完成,下面我們開始建立vue專案打包的任務。

具體操作如下圖

企業微信截圖_20210507135244.png

點選按鈕確定後,如下圖

FireShot Pro Webpage Screenshot #002 - 'vue-test Config [Jenkins]' - localhost.png

安裝上圖所說的配置完成後點選儲存按鈕就會跳轉到所建立任務的詳情介面。

企業微信截圖_20210508143239.png

至此一個我們便實現了一個簡單的一鍵打包前端專案的jenkins配置。

如有疏漏,歡迎指出
您的點贊就是對我最大的認可。

相關文章