前言

Vue.js 項(xiàng)目自動(dòng)化部署實(shí)戰(zhàn) | Jenkins CI/CD 流水線配置 | Docker 容器化部署教程。本文詳細(xì)介紹如何用 Jenkins 和 Docker 構(gòu)建 Vue 項(xiàng)目的自動(dò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ì)算機(jī)之后

第一步cmd輸入：systeminfo | find "System Type"或者systeminfo | find "系統(tǒng)類型"并回車，查看處理器架構(gòu)信息，這一步是為了查看本系統(tǒng)適合安裝那個(gè)版本的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)擊安裝

第一步雙擊：

第二步會(huì)出現(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

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

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

第七步：有賬號(hào)就登陸

最后登錄成功！

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

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

再去開docker就可以啦！

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

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

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

成功！

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

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

--name jenkins: 給容器起個(gè)名字。

-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ù)、配置）也不會(huì)丟失。

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

基礎(chǔ)命令：

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

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

docker ps

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

docker ps -a

查看 Jenkins 啟動(dòng)日志

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è)菜單介紹

必裝插件

首先安裝這幾個(gè)個(gè)核心插件：

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 自動(dòng)觸發(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 和部署在同一臺(tái)機(jī)器則不需要。

左側(cè)菜單介紹

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第三步：拉到最下方，找到NodeJS，輸入別名Nodejs(名稱后面再Pipeline流水線中會(huì)用到)，勾選自動(dòng)安裝，在版本處下拉選擇與自己項(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)會(huì)自動(dòng)生成。為了清晰，建議在描述里寫上“Gitee登錄憑據(jù)”。

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

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

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

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

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

pipeline {
    agent any
    tools {
        nodejs "Nodejs"
    }
    stages {
        stage('拉取代碼') {
            steps {
                git branch: 'master', 
                     url: '你對(duì)應(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'
            }
        }
    }
}

第九步：最終點(diǎn)擊保存，最終測試構(gòu)建，保存后會(huì)進(jìn)入詳情頁，點(diǎn)擊左側(cè)的立即構(gòu)建，觸發(fā)第一次手動(dòng)構(gòu)建，點(diǎn)擊后，下方會(huì)出現(xiàn)構(gòu)建歷史如#30，第一次構(gòu)建就是#1

8、已上搞定構(gòu)建，下一步，push自動(dòng)構(gòu)建

第一步：在jenkins中點(diǎn)擊配置

第二步：選擇以下，點(diǎn)擊保存

第三步：然后打開對(duì)應(yīng)的git倉庫，點(diǎn)擊管理

選擇Webhooks

點(diǎn)擊添加webHook

***這里有點(diǎn)繞哦

在git的webHooks中填寫如下圖

***url在哪找呢：url在jenkins中的Gitee webhook 觸發(fā)構(gòu)建，需要在 Gitee webhook ：是這里的url，必須要使用真正的域名，而不是本地http://localhost/，localhost是添加不了的

*** Webhook別名：自己取一個(gè)就行

***WebHook密碼在哪找呢：在jenkins的general中點(diǎn)擊生成

最后：就成功了！自動(dòng)構(gòu)建：當(dāng)git push origin master的時(shí)候jenkins將觸發(fā)自動(dòng)構(gòu)建。

總結(jié) 

到此這篇關(guān)于Jenkins+docker容器部署前端Vue項(xiàng)目的文章就介紹到這了,更多相關(guān)Jenkins+docker容器部署Vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！