使用Jenkins一鍵打包部署前端應用，就是這麼6！

SpringBoot實戰電商項目mall（25k+star）地址：github.com/macrozheng/…

摘要

上一次咱們講到了使用Jenkins一鍵打包部署SpringBoot應用，這一次咱們來說下如何一鍵打包部署前端應用，以Vue前端應用爲例，這裏咱們使用mall-admin-web中的代碼來進行演示。

學前準備

學習本文須要一些Jenkins和Nginx的知識，對這些不熟悉的小夥伴能夠參考如下文章。

• 使用Jenkins一鍵打包部署SpringBoot應用，就是這麼6！
• 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
複製代碼

項目地址

github.com/macrozheng/…

公衆號

mall項目全套學習教程連載中，關注公衆號第一時間獲取。