vueeach_jenkins编译vue项目自动发布

有个 vue 项目&＃xff0c;打算放到 jenkins 上编译&＃xff0c;顺便加上 webhook 提交代码后自动编译发布到对应的远程服务器 nginx 下。

jenkins 触发代码提交后自动构建请看这里: jenkins之webbook

一、配置 jenkins

系统管理 -> 全局工具配置 安装 nodejs 模块

二、编写 jenkins 执行脚本

• 第一步&＃xff1a;首先需要初始化 nodejs 环境

  下面是初始化脚本&＃xff0c;只需要执行一次即可

#!/usr/bin/env bash
nodeName&＃61;$1
NODE_HOME&＃61;${JENKINS_HOME}"/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/"${nodeName}
PATH&＃61;$PATH:${NODE_HOME}/bin
export NODE_HOME PATH
echo "环境变量&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>"
echo "node_home "${NODE_HOME}
echo "path "${PATH}
registry&＃61;$2
nodeModules&＃61;${3//","/" "}
echo "开始初始化nodejs资源&＃xff0c;请稍后..."
npm install cnpm -g --registry&＃61;${registry}
if [[ -n "${nodeModules}" ]];then
echo "要初始安装的模块:"${nodeModules}
cnpm install -g --unsafe-perm ${nodeModules} --save-dev
else
echo "没有要初始安装的模块"
fi
echo "环境版本&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>"
echo "node版本:"
node -v
echo "npm版本:"
npm -v
echo "cnpm版本:"
cnpm -v
echo "nodejs资源初始化完成"


参数说明 &＃xff1a;

• 参数一($1)&＃xff1a;必须&＃xff0c;使用的 nodejs 名称&＃xff0c;对应第一步在 jenkins 中安装的 nodejs 模块名称&＃xff0c;如果你安装了多个版本的&＃xff0c;会根据这个名称去定义环境变量来使用你指定的版本。我写的是 nodejs-12.16.2

• 参数二($2)&＃xff1a;必须&＃xff0c;指定的镜像站&＃xff0c;我写的是 https://registry.npm.taobao.org

• 参数三($3)&＃xff1a;非必须&＃xff0c;指定要初始化安装的模块&＃xff0c;记得模块用英文逗号分隔&＃xff0c;我写的是 postcss-import,autoprefixer,cssnano,postcss-loader,stylus-loader,css-loader,autoprefixer-loader,style-loader,node-sass,sass-loader,chalk,each-async,indent-string,npm-lifecycle

我的 jenkins 的初始化配置

• 第二步&＃xff1a;编写 jenkins 执行项目编译的脚本

  这个脚本会直接将 jenkins 工作空间所对应的项目代码进行编译&＃xff0c;并且将编译好的文件发到对应的远程服务器 nginx 下&＃xff0c;前提是你已经配置好了远程服务器的 nginx

前置条件&＃xff1a;

• 远程服务器 nginx&＃xff0c;必须先配置过公钥&＃xff0c;实现了 ssh 免密登录

#!/usr/bin/env bash
# node名称
nodeName&＃61;$1
# nginx代理的静态文件夹根目录
nginxSource&＃61;$2
# Jenkins项目名称
jenkinsProjectName&＃61;$3
# nginx 下项目名称
projectName&＃61;$4
# Jenkins编译项目相对路径
executableFolder&＃61;$5
# 运行服务器位置
serverDomain&＃61;$6
# 编译期额外安装的模块
nodeModules&＃61;${7//","/" "}
NODE_HOME&＃61;${JENKINS_HOME}"/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/"${nodeName}
PATH&＃61;${NODE_HOME}/bin:$PATH
export NODE_HOME PATH
echo "环境变量&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>"
echo "node_home "${NODE_HOME}
echo "path "${PATH}
echo "环境版本&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>"
echo "node版本:"
node -v
echo "npm版本:"
npm -v
echo "cnpm版本:"
cnpm -v
jenkins_home&＃61;${JENKINS_HOME}
# Jenkins的工作目录
jenkins_workspace&＃61;${jenkins_home}"/workspace"
#进入jenkins项目模块
cd ${jenkins_workspace}/${jenkinsProjectName}
#删除node包
rm -rf node_modules
#删除编译的可执行文件包
rm -rf ${executableFolder}
#删除上次编译重命名的编译包
rm -rf ${projectName}
#开始编译
if [[ -n "${nodeModules}" ]];then
echo "要安装的模块:"${nodeModules}
cnpm i ${nodeModules} --save
else
echo "没有要安装的模块"
fi
cnpm i
cnpm run build
mv ${executableFolder} ${projectName}
echo "projectName:${projectName}"
echo "serverDomain:${serverDomain}"
echo "nginxSource:${nginxSource}"
scp -o StrictHostKeyChecking&＃61;no -r ${projectName} ${serverDomain}:${nginxSource}


参数说明 &＃xff1a;

• 参数一($1)&＃xff1a;必须&＃xff0c;使用的 nodejs 名称&＃xff0c;对应第一步在 jenkins 中安装的 nodejs 模块名称&＃xff0c;如果你安装了多个版本的&＃xff0c;会根据这个名称去定义环境变量来使用你指定的版本。我写的是 nodejs-12.16.2

• 参数二($2)&＃xff1a;必须&＃xff0c;远程服务器的 nginx 代理的静态文件夹根目录。我写的是 /root/data/nginx

• 参数三($3)&＃xff1a;必须&＃xff0c;jenkins 下的项目名称&＃xff0c;会根据这个寻找项目来编译。我写的是 flow-dashboard-web

• 参数四($4)&＃xff1a;必须&＃xff0c;远程服务器的 nginx 下对应本项目的文件夹名称&＃xff0c;一般都会将其配置到 nginx 的代理路径下。我写的是 flow-dashboard-web

• 参数五($5)&＃xff1a;必须&＃xff0c;jenkins 下项目编译后生成的可执行的文件夹名称。vue 项目生成的一般为 dist&＃xff0c;我写的是 dist

• 参数六($6)&＃xff1a;必须&＃xff0c;远程服务器的地址&＃xff0c;格式为 用户名&＃64;ip。我写的是 root&＃64;root&＃64;172.26.80.xxx (ip 最后 3 位我用 x 代替了)

• 参数七($7)&＃xff1a;非必须&＃xff0c;编译期额外安装的模块&＃xff0c;用英文逗号分隔。这里我没写&＃xff0c;有一些通过 cnpm i 或 npm i 无法直接安装的模块&＃xff0c;就在这里写上&＃xff0c;会额外开始安装

我的 jenkins 的项目配置

我没有用到 nodejs 插件

到这里已经全部完成&＃xff0c;以上脚本可以适当简化&＃xff0c;我将所有可变参数都提出来了&＃xff0c;以后可以构建非 vue 项目。配合 webhook 实现了提交代码自动在 jenkins 编译&＃xff0c;发布到了远程 nginx &＃xff0c;刷新页面即可