jenkins自動構建前端項目(window,vue)

• 2021 年 9 月 25 日
• 筆記
• 前端工程化

我們把一個多人協作的vue前端項目發布伺服器，一般要經過以下步驟：

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

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

1.下載安裝jenkin

1.1 java環境

jenkins需要運行在Java的環境中，所以前提是需要先安裝jdk，測試jdk是否安裝好，在命令行輸入：java -version

1.2 下載jenkins

下載地址 jenkins下載

下載後點擊安裝，默認埠是8080，然後打開 //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項目的持續構建就完成啦，不需要再手動構建項目，手動上傳到伺服器。