基于Jenkins、Node.js、碼云和Shell的Vue前端自動化部署

前言

今年大三了，接手了一個專案，因為周期較緊，需要專案能實作自動化部署，從而提高開發效率，故而簡單研究了一下自動化部署技術，

前置條件

碼云私有倉庫
Vue單應用
Jenkins已安裝
阿里云服務器CenOS 8.x
Node.js

Jenkins安裝與配置賬戶較為簡單，請自行百度

配置

進入Jenkins面板后

在這里插入圖片描述

安裝Node.js插件

系統管理》》插件管理

在這里插入圖片描述

查詢node.js插件
此處已安裝，若未安裝，請轉移到可選插件搜索

安裝Gitee插件

系統管理》》插件管理

在這里插入圖片描述

此處我已經安裝，若未安裝則在可選插件欄目進行搜索

配置Gitee

系統管理》》系統配置
在這里插入圖片描述

找到Gitee配置
選擇證書令牌添加
根據提示的獲取地址 https://gitee.com/profile/personal_access_tokens 進行碼云私人令牌生成
生成令牌后，回傳Jenkins主界面，點擊
出現如下表單
點擊保存

點擊新建任務

輸入任務名稱
選擇一個自由風格的軟體專案
點擊確定

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ql2VIax7-1601400392189)(CSDN前端自動化部署.assets/1601397925636.png)]

General配置

選擇剛剛創建好的Gitee配置

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-sR2I4OPj-1601400392192)(CSDN前端自動化部署.assets/1601398985559.png)]

原始碼管理配置

由于是私有倉庫，此處不配置權限認證資訊，會報錯
需要Linux服務器安裝Git

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Zn1DjZ1S-1601400392196)(CSDN前端自動化部署.assets/1601399107818.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-hpDi7cVM-1601400392200)(CSDN前端自動化部署.assets/1601399203326.png)]

構建觸發器配置

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-HEuvTO8z-1601400392203)(CSDN前端自動化部署.assets/1601399620679.png)]

生成密碼

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Lkkfdosi-1601400392208)(CSDN前端自動化部署.assets/1601399831126.png)]

在私有倉庫找到webhook配置

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Oou2iwTl-1601400392213)(CSDN前端自動化部署.assets/1601399727519.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-j7ZLhnDT-1601400392217)(CSDN前端自動化部署.assets/1601399803708.png)]

構建環境配置

選擇Node環境

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-OgjD1r3k-1601400392220)(CSDN前端自動化部署.assets/1601399899758.png)]

構建配置

選擇執行shell
以下為腳本內容

# 設定代理
npm config set registry https://registry.npm.taobao.org
# 安裝依賴
npm install 
# 把之前的構建刪掉
rm -rf dist
# 開始構建 , 這個可以看你專案的構建命令 , 不一定都是一樣的
npm run build:prod
# 洗掉目標檔案
rm -rf linux下專案的全路徑/*
# 拷貝構建后的檔案
cp -r /var/lib/jenkins/workspace/專案名/dist/*  linux下專案的全路徑

點擊保存

測驗

回傳Jenkins主界面

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TGl5mNmC-1601400392223)(CSDN前端自動化部署.assets/1601400259318.png)]

選擇剛剛創建好的工程
點擊立即構建
左下方可以查看構建的歷史
以后只要在本地提交代碼到碼云，則Jenkins會自動拉去代碼并進行專案構建發布

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/146559.html

標籤：其他

上一篇：HTML+CSS+JavaScript 實作圖片3D展覽

下一篇：前端筆記JavaScript JSON