Jenkins一键打包部署前端

Jenkins 中的自动化部署

Vue 前端应用的打包需要依赖NodeJS插件，先安装改插件。

安装NodeJS插件

① 在系统设置->插件管理中选择安装插件；
② 搜索NodeJS 插件并进行安装。

配置NodeJS插件

① 在系统设置->全局工具配置中进行插件配置；
② 选择新增NodeJS，配置好版本号以后，点击保存即可完成设置；

创建任务

① 任务流程

② 构建一个自由风格的软件项目：

③ 在源码管理中添加Git代码仓库相关配置，这里我使用的Gitee上面的代码，地址为：

④ 在构建环境中把我们的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无法下载导致构建失败

# 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