Jenkins + Vue 项目自动化部署

最近公司项目在测试前端项目,需要频繁的进行更换文件,虽然工作量不大,但是频繁的重复工作有点降低了工作效率,于是就搭建了jenkins + Vue 的自动化部署,可以实现自己拉取代码+构建+然后再发到web服务器上面,只需要告诉开发Jenkins的地址,去点一下鼠标就能实现自动化部署了。

环境介绍：
系统：CentOS Linux release 7.6.1810 (Core)
JDK：java version “1.8.0_172”
Tomcat：apache-tomcat-8.5.40
Jenkins：Jenkins2.164.2
yarn：1.15.2
node：v6.17.1
git version :1.8.3.1

前言:本篇文章需要在已有Jenkins的条件下才可以进行,还没有安装Jenkins的可以去看我的文章Jenkins搭建 ,也可以去看其他大神的文章,这里就不赘述了。

一、准备工作
1、安装git （拉代码所用）
这个很简单，直接yum安装即可

[root@test1 ~]# yum -y install git
[root@test1 ~]# git --version
git version 1.8.3.1

2、安装node

执行下面的命令即可

[root@test1 ~]# curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

[root@test1 ~]#source ~/.bashrc

[root@test1 ~]# nvm install stable

[root@test1 ~]# node -v
v12.2.0

[root@test1 ~]# npm install -g yarn

[root@host1 ~]# yarn -v
1.16.0

二、在Jenkins安装相关插件

搜索并安装NodeJS Plugin（构建工具）、Publish Over SSH（用于远程发送构建好的包到服务器） ps：我已经安装了所以这里搜不到）

安装完后去配置一下让jenkins能够使用Node插件


配置需要远程的Web服务器（这里只演示一台，如果有多台Web服务器，重复这部操作即可）

拉到下面，找到Publish over SSH

增加需要部署的Web服务器

测试一下看是不是成功

三、配置自动部署的任务
1、创建一个自由风格的项目

2、配置

（1）、先配置代码库
代码库由于前端开发的代码是放在git上的，这里就选了git，如果是放在SVN上的选下面的Subversion就可以了

（2）、填写一个可以登录到代码库的账号和密码然后点添加

（3）配置构建环境 选择 Provide Node & npm bin/ folder to PATH

（4）配置自动化打包
选择 增加构建步骤 —Excute shell

命令附上

cd /root/.jenkins/workspace/test-bbs  #进入项目目录
yarn install   #构建操作,照着填即可
yarn build     #构建操作,照着填即可
cd dist       #构建完成后在当前目录生成一个dist目录,里面存放的就是我们需要打包的文件,所以进去执行打包命令
#rm -rf test-bbs.tar.gz   #删除上次打包生成的压缩文件，打包的时候会自动删除整个dist文件夹无需这一步
tar -zcvf test-bbs.tar.gz *   #把新生成的项目打包tar包方便传输到远程服务器
cd ../

(5)打包好后把tar包发送到远程服务器并执行解包
选择“构建后操作步骤 —“Send build artifacts over SSH” 。

cd /var/www/html/bbs/   #进入到放置bbs的资源目录
rm -rf *                           #先删除旧的文件
mv /root/node/bbs/test-bbs.tar.gz /var/www/html/bbs/   #把从jenkins上发送过来的新包移到资源目录
tar -xf test-bbs.tar.gz            #进行解压
#rm -rf  test-bbs.tar.gz           #解压完成后删掉解压包
cd /var/www/html/                #进入网站目录
chmod -R o=rx bbs         #给予目录读和执行权限

Name：第二步创建的远程服务器名称

Source files：本地需要传输过去的文件路径

Remove prefix：过滤掉的目录名

Remote directory：远程服务器的保存路径

Exec command：传输完成后在远程服务器执行的shell命令

然后点击保存

四、配置完成后点击立即构建

点进去查看控制台输出，看有没有报错