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


我們把一個多人協作的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項目的持續構建就完成啦,不需要再手動構建項目,手動上傳到服務器。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM