使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)
jenkins的安裝
Jenkins是一款開(kāi)源 CI&CD 軟件,用于自動(dòng)化各種任務(wù),包括構(gòu)建、測(cè)試和部署軟件。
Jenkins 支持各種運(yùn)行方式,可通過(guò)系統(tǒng)包、Docker 或者通過(guò)一個(gè)獨(dú)立的 Java 程序。
安裝
這里的操作系統(tǒng)為WSL Ubuntu,其它系統(tǒng)的安裝的請(qǐng)參考jenkins官方文檔
wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add - sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list' sudo apt-get update sudo apt-get install jenkins
更換端口號(hào)(默認(rèn)運(yùn)行在8080端口)
jenkins的配置文件在 /etc/default/jenkins;在其中找到HTTP-PORT并修改

運(yùn)行
sudo systemctl start jenkins # OR sudo service jenkins start
如果要開(kāi)機(jī)自動(dòng)運(yùn)行
sudo systemctl enable jenkins
如果運(yùn)行時(shí)碰到如下圖的錯(cuò)誤,請(qǐng)先安裝jdk

基礎(chǔ)配置
啟動(dòng)成功后輸入對(duì)應(yīng)的地址(ip:port)進(jìn)入jenkins管理界面-如下圖

在上圖中紅色字體對(duì)應(yīng)的文件中拿到默認(rèn)的管理員密碼-具體命令
cat /var/lib/jenkins/secrets/initialAdminPassword
命令執(zhí)行完成后返回如下圖

輸入密碼之后進(jìn)入到自定義Jenkins界面(如下圖)

在此界面我們選擇安裝推薦的插件就會(huì)開(kāi)始安裝插件;如下圖

插件安裝完成后就會(huì)自動(dòng)進(jìn)入設(shè)置用戶(hù)名密碼界面(如下圖)

輸入完成后點(diǎn)擊按鈕保存并完成就會(huì)進(jìn)入下一個(gè)界面實(shí)例配置

點(diǎn)擊按鈕保存并完成就進(jìn)入一個(gè)新界面,再點(diǎn)擊其中的按鈕開(kāi)始使用Jenkins就進(jìn)入了jenkins的主界面(如下圖),至此就完成了jenkins的安裝與基礎(chǔ)配置。

發(fā)布vue項(xiàng)目
> 打包vue項(xiàng)目需要nodejs,打包完成后需要通過(guò)ssh把打包好的文件上傳到目標(biāo)服務(wù)器上。所以下面我們將會(huì)來(lái)安裝jenkins的nodejs插件和Publish Over SSH插件。
安裝插件-nodejs
在jenkins主界面工作臺(tái),依次點(diǎn)擊系統(tǒng)管理>插件管理進(jìn)入插件管理界面(如下圖)

搜索結(jié)果如下圖

勾選完插件并點(diǎn)擊安裝后進(jìn)入到插件下載界面(如下圖)

配置nodejs插件
在jenkins主界面工作臺(tái),依次點(diǎn)擊系統(tǒng)管理>全局工具設(shè)置進(jìn)入插件管理界面并找到NodeJs選項(xiàng)(如下圖)

安裝Publish Over SSH插件并配置
Publish Over SSH插件的安裝和nodejs插件是一樣,安裝完成后開(kāi)始配置插件;
在jenkins主界面工作臺(tái),依次點(diǎn)擊系統(tǒng)管理>系統(tǒng)配置進(jìn)入插件配置界面,滾動(dòng)到Publish over SSH的位置,然后點(diǎn)擊SSH Servers下面的新增按鈕(如下圖)

點(diǎn)擊按鈕高級(jí)后出現(xiàn)的界面如下

創(chuàng)建任務(wù)
至此,打包vue所需的jenkins插件都已經(jīng)安裝完成,下面我們開(kāi)始創(chuàng)建vue項(xiàng)目打包的任務(wù)。
具體操作如下圖

點(diǎn)擊按鈕確定后,如下圖

安裝上圖所說(shuō)的配置完成后點(diǎn)擊保存按鈕就會(huì)跳轉(zhuǎn)到所創(chuàng)建任務(wù)的詳情界面。

至此一個(gè)我們便實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的一鍵打包前端項(xiàng)目的jenkins配置。
到此這篇關(guān)于使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)jenkins打包發(fā)布vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.js 無(wú)限滾動(dòng)列表性能優(yōu)化方案
這篇文章主要介紹了Vue.js 無(wú)限滾動(dòng)列表性能優(yōu)化方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue addRoutes實(shí)現(xiàn)動(dòng)態(tài)權(quán)限路由菜單的示例
本篇文章主要介紹了vue addRoutes實(shí)現(xiàn)動(dòng)態(tài)權(quán)限路由菜單的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09
vue實(shí)現(xiàn)導(dǎo)出word文檔的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出word文檔(包括圖片),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue前端測(cè)試開(kāi)發(fā)watch監(jiān)聽(tīng)data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測(cè)試開(kāi)發(fā)watch監(jiān)聽(tīng)data的數(shù)據(jù)變化,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05
elementplus el-table(行列互換)轉(zhuǎn)置的兩種方法
本文主要介紹了elementplus el-table(行列互換)轉(zhuǎn)置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06

