前言
这是我去年的一次技术日志,我们有个项目使用到了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插件来配合使用。
- 在插件管理里面搜索 nodejs 找到并安装插件。
- 配置node插件
在系统管理->全局工具配置,找到node选项
新增个node配置,指定别名(随意),取消勾选自动安装,安装目录填写第一步安装的node目录,保存即可
步骤三:配置一个打包vue项目的job
- 新建自由风格的job,构建参数,源码选择等,根据常规配置即可。
- 构建环境:选 Provide Node & npm bin/ folder to PATH
如果有多个node环境,可自行选择。 - 构建:选 execute shell
这里主要是使用npm进行编译,用tar打包压缩是为了方便后面部署。
命令如下:
echo $PATH
node -v
npm -v
npm install
npm run build
#ls dist
tar -zcf dist.tar.gz dist
- 构建后操作:选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下安装nodejenkins 打包node项目