jenkins自動構建前端專案(window,vue)

木子草明發表於2021-09-25

我們把一個多人協作的vue前端專案釋出伺服器,一般要經過以下步驟:

  • git更新最新的程式碼
  • 構建專案
  • 把構建後的程式碼上傳到伺服器

如果用jenkins來構建的話,只需要點選一次構建按鈕,就可以自動完成以上的步驟了,而且根據需求,可以實現更多的功能。

1.下載安裝jenkin

1.1 java環境

jenkins需要執行在Java的環境中,所以前提是需要先安裝jdk,測試jdk是否安裝好,在命令列輸入:java -version
在這裡插入圖片描述

1.2 下載jenkins

下載地址 jenkins下載
請新增圖片描述

下載後點選安裝,預設埠是8080,然後開啟 http://localhost:8080/,會出現如下頁面:
請新增圖片描述

根據提示,輸入管理員密碼,,然後安裝推薦外掛,等待安裝完畢後,然後設定登入的使用者名稱和密碼,就可以進入jenkins的頁面了:
在這裡插入圖片描述

2 配置

2.1 配置遠端伺服器環境

首先下載外掛publish over ssh:

  • 進入系統管理,然後點選外掛管理
    在這裡插入圖片描述
  • 搜尋外掛,並安裝
    在這裡插入圖片描述
  • 進入系統配置,配置遠端伺服器
    在這裡插入圖片描述
  • 配置遠端伺服器
    在這裡插入圖片描述
  • 點選右下角test configuration按鈕,測試配置

2.3 配置node環境

  • 安裝外掛nodejs plugin
    在這裡插入圖片描述
  • 配置新增node版本,點選global tool configuration
    在這裡插入圖片描述
  • 新增node版本
    在這裡插入圖片描述

3 構建

一些必要的外掛安裝配置過後,就可以開始構建專案了

3.1 新建專案

  • 點選新建專案
    在這裡插入圖片描述
  • 選擇專案模板
    在這裡插入圖片描述

3.2 原始碼管理

  • 滾動頁面到原始碼管理配置項,選擇git,此配置目的是自動從遠端拉取程式碼,
    在這裡插入圖片描述
    其中URL就是專案的git的地址,credentials是git登入憑據,還可以指定專案分支,
    其中credentials如果是第一次的話,需要點選新增完成配置後,才能選擇:在這裡插入圖片描述

3.3 構建環境配置

我們這裡是vue專案,所以選擇node環境,並選擇2.3配置node環境所配置的node版本:
在這裡插入圖片描述

3.4 構建

這一步jenkins會依次執行我們所配置的指令碼,

  • 用指令碼構建專案
    選擇execute windows batch command,這裡面就可以新增指令碼,像在命令列一樣
    在這裡插入圖片描述
  • 上傳至伺服器
    點選增加構建步驟,然後選擇send files or execute commands over ssh
    在這裡插入圖片描述
    其中當前專案目錄,如果沒有更改過的話,預設在C:\Windows\System32\config\systemprofile\AppData\Local\Jenkins\.jenkins\workspace\專案名稱

3.5 驗證自動構建

  • 開始構建
    經過以上的配置,就已經配置好了一個jenkins專案了,返回到首頁,就會有一個專案,點選構建按鈕,就可以自動構建了
    在這裡插入圖片描述
  • 構建歷史
    點選專案名稱,就可以進入到專案詳情頁,然後左下角會有構建歷史,點選構建歷史,就可以檢視每次構建的控制檯輸出情況:
    在這裡插入圖片描述
    控制檯輸出的資訊:
    在這裡插入圖片描述

這樣一個最基本的vue專案的持續構建就完成啦,不需要再手動構建專案,手動上傳到伺服器。

相關文章