jenkins 构建发布vue项目

前言

这是我去年的一次技术日志，我们有个项目使用到了vue，vue的编译打包与java的maven类似，不过用的是npm。由于我们的项目都是使用Jenkins进行发布的，基于CICD的思想，我自然而然的想到Jenkins来发布vue。于是就尝试了一番，过程不算复杂，如果有Jenkins使用经验不费半天功夫就搞定了。在此我将过程分享出来，供大家参考。

步骤一：安装node

vue使用的是npm打包，而npm是node.js的包管理工具，那么我们需要先安装node。
使用下面脚本一次完成：
注：如果需要别的node版本，可上官网自行选择下载

# 下载node
wget https://nodejs.org/dist/v10.15.0/node-v10.15.0-linux-x64.tar.xz
# 解压缩
tar xf node-v10.15.0-linux-x64.tar.xz
mv node-v10.15.0-linux-x64 /usr/local/node_10.15
# 配置环境变量
ln -s /usr/local/node_10.15/bin/npm /usr/local/bin/
ln -s /usr/local/node_10.15/bin/node /usr/local/bin/
# 测试
node -v && npm -v

步骤二：Jenkins安装node插件及配置

服务器上安装好node之后，还需要在Jenkins安装node插件来配合使用。

1. 在插件管理里面搜索 nodejs 找到并安装插件。
   
2. 配置node插件
   在系统管理->全局工具配置，找到node选项
   新增个node配置，指定别名（随意），取消勾选自动安装，安装目录填写第一步安装的node目录，保存即可
   

步骤三：配置一个打包vue项目的job

1. 新建自由风格的job，构建参数，源码选择等，根据常规配置即可。
2. 构建环境：选 Provide Node & npm bin/ folder to PATH
   如果有多个node环境，可自行选择。
   
3. 构建：选 execute shell
   这里主要是使用npm进行编译，用tar打包压缩是为了方便后面部署。
   命令如下：

echo $PATH
node -v
npm -v
npm install 
npm run build 
#ls dist 
tar -zcf dist.tar.gz dist

5. 构建后操作：选Send build artifacts over SSH
   选择项目运行的服务器，将打包好的文件发布过去，然后根据实际情况进行部署配置即可。
   vue打包后就是纯静态的html文件了，使用一个web容器（nginx，tomcat，apache等等）运行起来，或者放到docker集群运行。我这里使用nginx作为展示（需要先部署并运行nginx，这里不进行讨论）。
   远程执行命令如下：

rm -rf /usr/local/nginx/html/dist
cd /root/war
rm -rf dist 
tar -zxf dist.tar.gz -C 
mv dist  /usr/local/nginx/html/

测试

执行构建，如果没有报错，一般就发布成功。然后访问项目，看看是不是正常的。有问题则一步一步检查排除。

参考：
linux下安装node
jenkins 打包node项目