快捷導(dǎo)航

Jenkins+docker容器部署前端Vue項(xiàng)目的完整步驟記錄

更新時間：2026年01月26日 09:13:44 作者：小·寅

Jenkins是一個開源軟件項(xiàng)目,是基于Java開發(fā)的一種持續(xù)集成工具,用于監(jiān)控持續(xù)重復(fù)的工作,旨在提供一個開放易用的軟件平臺,使軟件項(xiàng)目可以進(jìn)行持續(xù)集成,這篇文章主要介紹了Jenkins+docker容器部署前端Vue項(xiàng)目的完整步驟,需要的朋友可以參考下

前言
1、cmd輸入ver查看電腦系統(tǒng)。
2、在Windows系統(tǒng)，win+x按A打開PowerShell，開啟Hyper-v功能。
3、重啟計算機(jī)之后
4、下載完成cocker雙擊點(diǎn)擊安裝
5、docker Desktop已經(jīng)安裝成功，啟動和驗(yàn)證docker Desktop
6、打開瀏覽器，訪問：http://localhost:8080，正式訪問jenkins
7、現(xiàn)在jenkins基礎(chǔ)配置已經(jīng)完成
8、已上搞定構(gòu)建，下一步，push自動構(gòu)建
總結(jié)

前言

Vue.js 項(xiàng)目自動化部署實(shí)戰(zhàn) | Jenkins CI/CD 流水線配置 | Docker 容器化部署教程。本文詳細(xì)介紹如何用 Jenkins 和 Docker 構(gòu)建 Vue 項(xiàng)目的自動化部署環(huán)境，包含多階段構(gòu)建優(yōu)化、Pipeline 腳本編寫、容器編排等實(shí)用技巧。

為大家整理一份從0-1詳細(xì)的流程吧！

是一步一步完成的，有興趣的可以看看。

1、cmd輸入ver查看電腦系統(tǒng)。

2、在Windows系統(tǒng)，win+x按A打開PowerShell，開啟Hyper-v功能。

輸入命令：Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All

如果詢問是否重啟，直接輸入Y并按回車。

3、重啟計算機(jī)之后

第一步cmd輸入：systeminfo | find "System Type"或者systeminfo | find "系統(tǒng)類型"并回車，查看處理器架構(gòu)信息，這一步是為了查看本系統(tǒng)適合安裝那個版本的docker，檢測類型為： x64-based PC，所以選擇下載Download for Windows-AMD64

第二步：訪問Docker官網(wǎng)：https://www.docker.com/products/docker-desktop/ ，

選擇下載Download for Windows-AMD64

4、下載完成cocker雙擊點(diǎn)擊安裝

第一步雙擊：

第二步會出現(xiàn)彈窗：全選點(diǎn)擊ok

Use WSL 2 instead of Hyper-V (recommended)：使用WSL 2而不是Hyper-V（推薦）。

Allow Windows Containers to be used with this installation：允許在此安裝中使用 Windows 容器。

Add shortcut to desktop：添加到桌面快捷方式。

第三步：等待安裝

第四步：安裝完成后，點(diǎn)擊Close

第五步：桌面會出現(xiàn)docker圖標(biāo)，雙擊打開

第六步：點(diǎn)擊“Accept”按鈕以繼續(xù)安裝

第七步：有賬號就登陸

最后登錄成功！

注意：這里有個問題需要注意，如果打開docker工具后，如果出現(xiàn)linux版本太舊了則會有提示命令，那么直接復(fù)制到cmd更新，如下幾圖

更新成功之后，會自動彈出以下頁面，關(guān)閉就行

再去開docker就可以啦！

5、docker Desktop已經(jīng)安裝成功，啟動和驗(yàn)證docker Desktop

第一步：win+x 直接按A建，打開PowerShell輸入命令：docker --version查看結(jié)果

第二步：運(yùn)行基礎(chǔ)鏡像：hello-world 試一試：docker run -rm hello-world

成功！

第三步：創(chuàng)建第一個j名字為jenkins容器：docker run -a --name jenkins -p 8080:8080 -p 50000:50000 -v jenkins_home:/var/jenkins_home jenkins/jenkins:lts

命令解釋：
-d: 在后臺運(yùn)行容器。

--name jenkins: 給容器起個名字。

-p 8080:8080: 將你電腦的8080端口映射到容器的8080端口（Jenkins網(wǎng)頁界面）。

-p 50000:50000: 映射50000端口（用于代理通信）。

-v jenkins_home:/var/jenkins_home: 將容器內(nèi)的數(shù)據(jù)卷掛載到本地，這樣即使刪除容器，你的Jenkins數(shù)據(jù)（如任務(wù)、配置）也不會丟失。

第四步：打開docker Desktop，可以在Containers中看到名稱為jenkins的鏡像。

基礎(chǔ)命令：

運(yùn)行鏡像后powershell查看容器狀態(tài)

查看容器是否正在運(yùn)行

docker ps

查看所有容器（包括停止的）

docker ps -a

查看 Jenkins 啟動日志

docker logs jenkins

停止并刪除舊容器

docker stop jenkins(停止或者開始（stop /start）容器名為jenkins的容器)

docker rm jenkins(刪除容器名為robenkin 的容器)

強(qiáng)制刪除容器（無論是否運(yùn)行）

docker rm -f jenkins

第五步：很重要的一步獲取出事管理員密碼

PowerShell輸入：docker exec jenkins cat /var/jenkins_home/secrets/initialAdminPassword

6、打開瀏覽器，訪問：http://localhost:8080，正式訪問jenkins

第一步：復(fù)制密碼粘貼到管理員密碼中點(diǎn)擊繼續(xù)，打開jenkins

第二步：安裝，這里我選擇推薦-等待插件安裝完成-創(chuàng)建管理員賬戶-配置實(shí)例URL（保持默認(rèn)即可）

第三步：等待安裝

第四步：完成后創(chuàng)建管理員賬戶，保存并完成

第五步：顯示實(shí)例配置：http://localhost:8080/ 點(diǎn)擊保存并完成

第六步：點(diǎn)擊開始使用jenkins

第七步：打開的頁面如下

第八步：基礎(chǔ)插件安裝，右上角點(diǎn)擊設(shè)置或者瀏覽器直接輸入：http://localhost:8080/manage/，目的是打開安裝插件的頁面

第九步：選擇插件管理

第十步：必裝插件和插件頁面左側(cè)菜單介紹

必裝插件

首先安裝這幾個個核心插件：

NodeJS Plugin：用于在 Jenkins 中運(yùn)行 Node.js，Vue3 項(xiàng)目需要 Node.js 環(huán)境來執(zhí)行 npm install和 npm run build。

Gitee Plugin或者搜索Gitee：用于連接你的 Gitee 倉庫，支持 Webhook 自動觸發(fā)構(gòu)建，方便從 Gitee 拉取代碼。

Git Plugin：通常已經(jīng)預(yù)裝，用于 Git 版本控制操作，如果已安裝就不用重復(fù)安裝。

Pipeline：必裝，用于創(chuàng)建流水線任務(wù)，支持編寫 Jenkinsfile，將構(gòu)建過程代碼化，更容易維護(hù)和版本控制。

Docker Pipeline或者Docker Plugin：用于在流水線中操作 Docker，構(gòu)建 Docker 鏡像、運(yùn)行容器等。

Publish Over SSH：（可選），如果需要將構(gòu)建產(chǎn)物部署到遠(yuǎn)程服務(wù)器，如果 Jenkins 和部署在同一臺機(jī)器則不需要。

左側(cè)菜單介紹

Updates(更新)：顯示可更新的插件列表。在這里，你可以看到已安裝插件中有哪些有可用的更新版本，并進(jìn)行更新操作。

Available plugins：(可用插件)：瀏覽和安裝新插件的頁面。你可以在這里搜索并安裝Jenkins社區(qū)提供的各種插件。

Installed plugins： (已安裝插件)：查看當(dāng)前已經(jīng)安裝的插件列表。你可以在這里管理已安裝的插件，例如禁用、啟用、卸載或升級插件。

Advanced settings：(高級設(shè)置)：進(jìn)入插件管理的高級配置頁面。通常包括配置插件更新站點(diǎn)、代理設(shè)置等高級選項(xiàng)。

Download progress：(下載進(jìn)度)：

第十一步：插件安裝完畢重啟jenkins

最重要的要開始啦！?。?/span>

7、現(xiàn)在jenkins基礎(chǔ)配置已經(jīng)完成

開始配置核心工具和創(chuàng)建一個自動化部署任務(wù)，目的是把 Vue 項(xiàng)目和 Jenkins 連接起來。

將vue項(xiàng)目推送到git倉庫就不用解釋了。

如果遇到代碼推送新倉庫ssh的問題，可以快速生成，不需要就不管。

綁定虛擬郵箱，輸入命令獲取ssh：ssh-keygen -t ed25519 -C "隨便一個郵箱都行"。

直接復(fù)制新的ssh去git倉庫添加：type $HOME\.ssh\id_ed25519.pub | clip。

第一步：關(guān)聯(lián)vue和jenkins，在jenkins首頁點(diǎn)擊設(shè)置

第二步：選擇全局工具配置

第三步：拉到最下方，找到NodeJS，輸入別名Nodejs(名稱后面再Pipeline流水線中會用到)，勾選自動安裝，在版本處下拉選擇與自己項(xiàng)目兼容的node版本，點(diǎn)擊保存。

第四步：添加getee賬戶憑證：讓 Jenkins 有權(quán)限訪問 Gitee 上的代碼倉庫，還是在jenkins點(diǎn)擊設(shè)置，在安全中選擇憑據(jù)管理

選擇System

點(diǎn)擊全局憑據(jù)

第五步：打開全局憑證之后，按如下填寫

類型：選擇 Username with password。

用戶名：你的 Gitee 登錄用戶名/郵箱。

密碼：你的 Gitee 登錄密碼。

ID 和描述：可以留空，系統(tǒng)會自動生成。為了清晰，建議在描述里寫上“Gitee登錄憑據(jù)”。

第六步：添加成之后，就會看到下圖

第七步：準(zhǔn)備完成后，創(chuàng)建第一個 Pipeline 任務(wù)，返回到j(luò)enkins首，點(diǎn)擊左側(cè)新建Item

輸入任務(wù)名稱，選擇Pipeline流水線點(diǎn)擊確定。

第八步：將會出現(xiàn)General常規(guī)配置頁面，直接滑動到下方Definition部分選擇Pipeline script

在腳本中輸輸入：注意git branch: 'master', 這個是對應(yīng)git的分支的

pipeline {
    agent any
    tools {
        nodejs "Nodejs"
    }
    stages {
        stage('拉取代碼') {
            steps {
                git branch: 'master', 
                     url: '你對應(yīng)的git地址替換',
                     credentialsId: '找到你的credentialsId替換'
            }
        }
        stage('安裝依賴') {
            steps {
                sh '''
                # Element Plus 項(xiàng)目常見依賴
                npm config set registry https://registry.npmmirror.com
                
                # 安裝依賴（包含 element-plus 和圖標(biāo)庫）
                npm install
                
                # 如果需要，單獨(dú)安裝 element-plus 圖標(biāo)
                npm list @element-plus/icons-vue || npm install @element-plus/icons-vue
                '''
            }
        }
        stage('構(gòu)建項(xiàng)目') {
            steps {
                sh 'npm run build'
            }
        }
    }
}