腳本之家服務器常用軟件

快捷導航

Jenkins配置前端自動打包部署全過程（若依項目）

更新時間：2024年09月02日 09:26:57 作者：諸葛九天

Jenkins作為一個開源的自動化服務器,廣泛用于持續(xù)集成、持續(xù)部署(CI/CD)流程中,這篇文章主要給大家介紹了關于Jenkins配置前端自動打包部署（若依項目）的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下

一、新建項目

創(chuàng)建一個 Freestyle Project

二、拉取 github 代碼

點擊 新建 Item 創(chuàng)建一個 Freestyle Project

在配置頁面-->General,勾選[丟棄舊的構建]，填寫保存的構建天數(shù)和構建的最大個數(shù)

在 源碼管理 處選擇 git ，輸入倉庫地址，點擊添加。

三、build 打包

Execute shell里寫腳本,對前端代碼進行打包壓縮具體代碼如下:

# 安裝npm依賴并構建項目
npm --registry https://registry.npmmirror.com install
# 構建測試環(huán)境
npm run build:stage

腳本解釋與寫法總結：

1.我看很多博客這里寫很多，對于初學者，可能摸不到頭腦，我該怎么寫，才能自動構建到測試環(huán)境。

2.buid steps：構建步驟，也就是構建環(huán)境配置、打包進行處理。

首先前端打包問題。

Q：jenkins 從gitlab服務拉取的代碼在哪里打包吶？

A:拉取的代碼在這目錄下 /var/lib/jenkins/workspace/

在jenkins控制臺查看

，代碼有了，jenkins打包，但你得安裝nodejs吧安裝npm 安裝依賴吧，比如你的寫下面這寫

 安裝依賴
npm install

# 建議不要直接使用 cnpm 安裝依賴，會有各種詭異的 bug?？梢酝ㄟ^如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npmmirror.com

然后打包，構建測試環(huán)境。使用下面命令

# 構建測試環(huán)境
npm run build:stage

前端打包完，會生成一個dist文件夾

好了。這就打包好了。也相當于buid 好了。

接下來，我的把這個dist文件夾發(fā)送到另一臺測試環(huán)境服務器。

四、部署到測試服務器

在真實的開發(fā)場景中，Jenkins 幾乎不會和前端資源放到一個服務器。大多數(shù)情況下 Jenkins 所處的服務器環(huán)境就是一個工具用的服務器，放置了一些公司中常用的工具。因此構建到指定的服務器也至關重要。

1、安裝發(fā)送到遠程插件

系統(tǒng)管理 -> 插件管理 搜索 Publish Over SSH 進行安裝。

Send build artifacts over SSH

選項解釋：

Source files：要上傳到目標服務器的文件。它是一個相對路徑，相對于 Jenkins 的工作目錄由于上面的 build 打包后，在工作目錄中生成一個dist文件夾，所以這里寫相對路徑 **/dist/**

寫法	說明
/dist/*	一個*代表匹配dist文件夾所以文件，但是dist文件夾下面的static文件夾不會部署到測試服務器（不這樣寫）
/dist/**	2個* 能把dist文件夾下的所有文件夾和文件都能部署到測試服務器（我這樣寫的）

Remove prefix：移除的路徑，這里移除 dist 路徑

比如：這里寫 dist/ 表示：我只部署dist文件夾中static 部分內(nèi)容，我肯定要把dist文件夾去掉，只在測試服務器顯示static文件，這就用到這個選項了。

Remote directory：發(fā)送到的服務端路徑（這里填目標服務器發(fā)送文件夾的目標路徑）

1.這里不填：

表示你在系統(tǒng)設置中，也有這個插件，已經(jīng)設置過了。

例如：我在系統(tǒng)設置中設置了 /opt/ruoyi 這里就不要設置了。

你如果在設置目標路徑，會重復，也就是把dist發(fā)送到 /opt/ruoyi/opt/ruoyi/dist 子文件家中了，純屬套娃了。

Exec command：發(fā)送成功后執(zhí)行的命令（選填）

部署方式：（我就測試2種寫法）

1.把整個前端dist文件夾都部署上傳到測試服務器。我這樣寫：就把整個dist源文件夾發(fā)送到測試服務器就行，其他不寫。

2.把部分前端dist文件夾中static文件和其他文件部署上傳到測試服務器。（比較實用）

如圖：

說明：

Source files寫法規(guī)則介紹：Ant User Manual Directory-based Tasks

為了使事情更加靈活，我們添加了一個額外的功能，這使得匹配多個目錄級別成為可能。這可用于匹配完整的目錄樹，或目錄樹中任何位置的文件。

為此，** 必須將用作目錄的名稱。

當**在模式中將用作目錄的名稱時，它將匹配零個或多個目錄。

例如： /test/**匹配下的所有文件/目錄/test/，例如/test/x.java、或/test/foo/bar/xyz.html，但不匹配/xyz.xml。

有一種“簡寫”——如果模式以/ 或結尾\，則** 附加。

例如，mypackage/test/被解釋為 mypackage/test/**