使用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项目全套学习教程连载中，关注公众号第一时间获取。