使用Jenkins一鍵打包部署前端應用，就是這麼6！
- 2020 年 1 月 20 日
- 筆記
上一次我們講到了使用Jenkins一鍵打包部署SpringBoot應用，這一次我們來講下如何一鍵打包部署前端應用，以Vue前端應用為例，這裡我們使用
mall-admin-web中的代碼來進行演示。
學前準備
學習本文需要一些Jenkins和Nginx的知識，對這些不熟悉的小夥伴可以參考以下文章。
Jenkins中的自動化部署
Vue前端應用的打包需要依賴NodeJS插件，所以我們先安裝並配置該插件，然後創建任務來打包部署。
安裝NodeJS插件
- 在系統設置->插件管理中選擇安裝插件；
- 搜索
NodeJS插件並進行安裝；
配置NodeJS插件
- 在系統設置->全局工具配置中進行插件配置；
- 選擇
新增NodeJS，配置好版本號以後，點擊保存即可完成設置；
創建任務
我們需要創建一個任務來打包部署我們的前端應用，這裡以我的
mall-admin-web項目為例。
- 任務執行流程如下：
- 構建一個自由風格的軟件項目：
- 在源碼管理中添加Git代碼倉庫相關配置，這裡我使用的Gitee上面的代碼，地址為：https://gitee.com/macrozheng/mall-admin-web
- 在構建環境中把我們的
node環境添加進去：
- 添加一個
執行shell的構建，用於將我們的前端代碼進行編譯打包：
- 構建腳本如下：
# 查看版本信息 npm -v # 解決存放在Github上的sass無法下載的問題 SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass # 將鏡像源替換為淘寶的加速訪問 npm config set registry https://registry.npm.taobao.org # 安裝項目依賴 npm install # 項目打包 npm run build
- 添加一個
使用ssh執行遠程腳本的構建，用於將我們打包後的代碼發佈到Nginx中去：
- 遠程執行腳本如下：
docker stop nginx echo '----stop nginx----' rm -rf /mydata/nginx/html echo '----rm html dir----' cp -r /mydata/jenkins_home/workspace/mall-admin-web/dist /mydata/nginx/html echo '----cp dist dir to html dir----' docker start nginx echo '----start nginx----'
- 點擊保存後，直接在任務列表中點擊運行即可完成自動化部署：
遇到的坑
node-sass無法下載導致構建失敗
由於node-sass的源使用的是Github上面的，經常無法訪問，我們構建的時候需要單獨設置node-sass的下載地址。
# linux SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass # window set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass
有些依賴無法下載導致構建失敗
由於npm源訪問慢的問題，有些源可能會無法下載，改用淘寶的npm源即可解決。
# 設置為淘寶的鏡像源 npm config set registry https://registry.npm.taobao.org # 設置為官方鏡像源 npm config set registry https://registry.npmjs.org
項目地址
https://github.com/macrozheng/mall-admin-web
