SpringBoot實戰電商專案mall（25k+star）地址：github.com/macrozheng/…
摘要
上一次我們講到了使用Jenkins一鍵打包部署SpringBoot應用，這一次我們來講下如何一鍵打包部署前端應用，以Vue前端應用為例，這裡我們使用mall-admin-web中的程式碼來進行演示。
學前準備
學習本文需要一些Jenkins和Nginx的知識，對這些不熟悉的小夥伴可以參考以下文章。
Jenkins中的自動化部署
Vue前端應用的打包需要依賴NodeJS外掛，所以我們先安裝並配置該外掛，然後建立任務來打包部署。
安裝NodeJS外掛
- 在系統設定->外掛管理中選擇安裝外掛；
- 搜尋
NodeJS外掛並進行安裝；
配置NodeJS外掛
- 在系統設定->全域性工具配置中進行外掛配置；
- 選擇
新增NodeJS，配置好版本號以後，點選儲存即可完成設定；
建立任務
我們需要建立一個任務來打包部署我們的前端應用，這裡以我的
mall-admin-web專案為例。
- 任務執行流程如下：
- 構建一個自由風格的軟體專案：
- 在原始碼管理中新增Git程式碼倉庫相關配置，這裡我使用的Gitee上面的程式碼，地址為：gitee.com/macrozheng/…
- 在構建環境中把我們的
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
複製程式碼專案地址
公眾號
mall專案全套學習教程連載中，關注公眾號第一時間獲取。