Jenkins自動化編譯部署vue項目至遠程服務器


概要:本示例用的Jenkins 2.342版本,Jenkins是安裝在windows服務器上,打包后上傳文件部署到Linux服務器。

1.下載安裝jenkins

Jenkins-windows版本 Jenkins官網下載,注:這里jenkins版本不能太低,好像需要2.277.1及以上版本

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

2.安裝插件nodejs plugin

然后去Manage Jenkins -> Global tool configuration 配置添加node版本,查看本機安裝的node版本命令行輸入:node -v

當然還有另外一種情況,就是Jenkins所在機器上還沒安裝過node,這里可以選擇自帶安裝node,如下圖

也可以添加多個node版本,后面選擇其中一個使用。

保存就OK!這樣我們在新建item,配置項目構建環境時就可以選擇nodejs了!

3.構建項目

3.1 jenkins主頁左側側邊欄點擊新建Item

3.2 源碼管理

滾動頁面到源碼管理配置項,選擇git,此配置目的是自動從遠程拉取代碼,

其中URL就是項目的git遠程倉庫地址(填寫完地址下面出現紅色報錯信息,不用擔心,接着去配置好下面的credentials后就好了),

credentials是git登錄憑據,還可以指定項目分支,其中credentials如果是空的,則需要點擊添加完成配置后,才能選擇:

3.3 構建環境

我們這里是vue項目,所以選擇node環境,並選擇前面配置的node環境版本,如下圖

3.4 構建(重點

a. 用腳本構建項目,因為我的jenkins安裝在windows上所以我選的是Execute windows batch command,如果是安裝在Linux上就選擇Execute shell;

直接輸入相關命令:npm install && npm run build

或者通過下圖所示方式,編譯打包后將dist文件夾復制一份到其它地方(或上傳到遠程服務器對應目錄下)。

說明:這里復制到本機的另外目錄下面是用來演示用的,可以忽略。

每次構建都要先運行安裝依賴npm install 是不是沒必要,可以通過配置參數化來判斷構建時是否要先執行安裝依賴命令,如下圖所示:

if "%isInstall %" == "true" (
call echo 依賴安裝
call npm install 
)
call echo 編譯打包
call npm run build

b. 上傳至windows服務器比較麻煩(使用powerShellServer工具連接到遠程服務器)

也可以在windows 上開啟FTP服務,參考:https://www.cnblogs.com/kikochz/p/13686906.html

然后就可以用publish over ftp 來遠程上傳服務器

c. 上傳至Linux服務器(需求Jenkins提前安裝遠程連接服務器插件 publish over ssh) 

先去Manage Jenkins -> Configure System 中配置遠程服務器(Linux服務器),找到 publish over SSH 滑至最底部 – SSH Servers模塊 – 新增

展開高級層,填寫遠程服務器密碼,然后點擊右側Test按鈕,測試是否連接成功,最后保存。

方式一:構建步驟再增加一個Send files or execute commands over SSH(打包操作后推送文件到遠程服務器)

方式二:或者在構建后操作步驟增加一個Send build artifacts over SSH

下面按方式二點擊構建后操作步驟,然后選擇Send build artifacts over SSH

擴展:下方可以添加多個Transfers板塊

各個參數的意思分別如下:

Source files:源文件,如果要傳輸文件夾內所有文件和文件夾則需要在文件夾路徑后加兩個*符號,如上圖所示;

Remove prefix:移除前綴,是指源文件的前綴,比如這里只是傳輸dist文件夾里的所有文件,但是dist文件夾本身不需要在遠程服務器出現,那么就需要將其移除,如上圖所示;

Remote directory:遠程服務器目錄,注意該目錄是相對於上面在系統設置里配置的ssh servers的路徑。

Exec command:在傳輸完成后執行的命令,一般為清理文件、復制文件、重啟一些服務等等。

Make empty dirs:此選項會更改插件的默認行為。默認行為是匹配該文件是否存在,如果存在則創建目錄存放。選中此選項會直接創建一個目錄存放文件,即使是空目錄。

3.5 點擊構建按鈕驗證構建效果

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

 


免責聲明!

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



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