jenkins自动化部署vue项目


一、搭建node环境

1. 下载linux版本的nodejs,并上传到linux下。

​https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz​

2. 解压并进行链接相关文件。

解压node:​​tar xvf node-v10.15.3-linux-x64.tar.xz​

重命名:​​mv node-v10.15.3-linux-x64 node​​ ,这边将文件夹命名为node,方便进行ln链接的时候比较方便。

链接:分别将node和npm链接到​​/usr/local/bin​​下,

ln -s /usr/local/node/bin/node /usr/local/bin/node
ln -s /usr/local/node/bin/npm /usr/local/bin/npm

测试验证:

node -v
npm -v

jenkins自动化部署vue项目_自动化部署

3. 安装cnpm

因为npm是国外的,使用起来比较卡,这边添加了国内的npm,并使用淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org 
ln -s /usr/local/node/bin/cnpm /usr/local/bin/cnpm
cnpm -v

结果:

jenkins自动化部署vue项目_centos7_02

二、jenkins环境搭建


该文章主要是对tomcat部署项目环境自动化构建,不过安装过程是一样的,只是对项目配置上是不一样,并且需要安装插件工具NodeJs。安装完成后进入全局工具配置,配置刚才安装好的node环境。


jenkins自动化部署vue项目_jenkins_03

三、jenkins自动化部署配置

1、创建一个自由风格的项目软件。

jenkins自动化部署vue项目_jenkins_04

2、相关设置信息。

  1. 设置git路径。
    jenkins自动化部署vue项目_vue部署_05
    jenkins自动化部署vue项目_自动化部署_06
  2. 构建相关命令配置
    jenkins自动化部署vue项目_vue部署_07
    说明: echo $PATH表示输出环境变量的值,npm -v和node -v表示查看node和npm的版本。输出这三个值的目的主要是为了在构建的时候可以在编译窗口上查看相关版本和环境变量信息。

3、设置资源文件路径,表示将部署后的文件复制到/data/文件夹下,也可以自己指定不同的文件夹。

jenkins自动化部署vue项目_centos7_08

设置完成后进行保存和应用,进入主页面,点击立即构建,这时候可以查看控制台输出。示例:

jenkins自动化部署vue项目_jenkins_09

这样就成功将文件部署到/data/文件夹下了。