vue 自動化部署 jenkins 篇

lifefriend_007發表於2019-04-10

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

一、安裝外掛 NodeJS

Jenkins -> Manage Jenkins -> Manage Plugins

vue 自動化部署 jenkins 篇

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

vue 自動化部署 jenkins 篇

二、配置 NodeJS 外掛

Jenkins -> Manage Jenkins -> Global Tool Configuation

vue 自動化部署 jenkins 篇

NodeJS 節點下,點選 NodeJS installations

vue 自動化部署 jenkins 篇

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

vue 自動化部署 jenkins 篇

#三、釋出配置

Jenkins -> New Item

vue 自動化部署 jenkins 篇

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

vue 自動化部署 jenkins 篇

點選 Configure 配置 job 構建引數

vue 自動化部署 jenkins 篇

General 配置,填寫 Project name,Description

vue 自動化部署 jenkins 篇

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

vue 自動化部署 jenkins 篇

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

vue 自動化部署 jenkins 篇

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

vue 自動化部署 jenkins 篇

輸入以下指令碼

node -v
npm install -g yarn --registry=https://registry.npm.taobao.org
yarn  -v
yarn install

yarn lint
yarn build
複製程式碼

vue 自動化部署 jenkins 篇

點選 Save

四、測試構建

Jenkins -> All -> node_vue -> Build Now

vue 自動化部署 jenkins 篇

五、遇見問題

vue 自動化部署 jenkins 篇

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

vue 自動化部署 jenkins 篇

相關文章