vue each_jenkins编译vue项目自动发布

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

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

一、配置 jenkins

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

二、编写 jenkins 执行脚本

• 第一步：首先需要初始化 nodejs 环境

  下面是初始化脚本，只需要执行一次即可

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

参数说明 ：

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

• 参数二($2)：必须，指定的镜像站，我写的是 https://registry.npm.taobao.org

• 参数三($3)：非必须，指定要初始化安装的模块，记得模块用英文逗号分隔，我写的是 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 的初始化配置

jenkins-初始化nodejs项目

• 第二步：编写 jenkins 执行项目编译的脚本

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

前置条件：

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

#!/usr/bin/env bash
# node名称
nodeName=$1
# nginx代理的静态文件夹根目录
nginxSource=$2
# Jenkins项目名称
jenkinsProjectName=$3
# nginx 下项目名称
projectName=$4
# Jenkins编译项目相对路径
executableFolder=$5
# 运行服务器位置
serverDomain=$6
# 编译期额外安装的模块
nodeModules=${7//","/" "}
NODE_HOME=${JENKINS_HOME}"/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/"${nodeName}
PATH=${NODE_HOME}/bin:$PATH
export NODE_HOME PATH
echo "环境变量===========>"
echo "node_home "${NODE_HOME}
echo "path "${PATH}
echo "环境版本===========>"
echo "node版本:"
node -v
echo "npm版本:"
npm -v
echo "cnpm版本:"
cnpm -v
jenkins_home=${JENKINS_HOME}
# Jenkins的工作目录
jenkins_workspace=${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=no -r ${projectName} ${serverDomain}:${nginxSource}

参数说明 ：

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

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

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

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

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

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

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

我的 jenkins 的项目配置

jenkins下vue项目配置

我没有用到 nodejs 插件

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