前端專案打包部署,以前都是手工執行打包命令,打包結束後壓縮,然後上傳到伺服器上解壓部署。這種重複性的工作,確實有點讓人煩,而且效率也不高。 本文基於 vue 的前端專案、 GitHub 的程式碼倉庫,簡述在 CentOS7 上利用 jenkins 實現自動部署。
一、安裝外掛 NodeJS
Jenkins -> Manage Jenkins -> Manage Plugins

-> Avaliable 搜尋 NodeJS,勾選 NodeJS,點選 Install without restart 安裝

二、配置 NodeJS 外掛
Jenkins -> Manage Jenkins -> Global Tool Configuation

NodeJS 節點下,點選 NodeJS installations

填寫 Name,勾選 Install automatically,選擇 Version,最後點選 Save

#三、釋出配置
Jenkins -> New Item

填寫 job name,選擇 Freestyle project,點選 OK

點選 Configure 配置 job 構建引數

General 配置,填寫 Project name,Description

Source Code Management,選擇 Git,填寫 Repository URL,如果是私有倉庫,還需要填寫 Credentials( 點選 Add 新增)

Build Environment,勾選 Provide Node & npm bin/ folder to PATH

Build,點選 Add build step 下拉,選擇 Execute shell

輸入以下指令碼
node -v
npm install -g yarn --registry=https://registry.npm.taobao.org
yarn -v
yarn install
yarn lint
yarn build
複製程式碼

點選 Save
四、測試構建
Jenkins -> All -> node_vue -> Build Now

五、遇見問題

專案是在 windows 下開發,windows 對檔名大小不敏感,上傳到 CentOS7 構建時出現如上錯誤,通過更改檔名的大小寫,保持程式碼中引用檔名與實際檔名大小寫一致,構建成功。
