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安装即可
[[email protected] ~]# yum -y install git
[[email protected] ~]# git --version
git version 1.8.3.1
2、安装yarn（用来构建的工具，也可以用npm，不过前端的同事说效果都一样，但是yarn的更稳定快速，这里就用yarn）
直接yum -y install yarn是会报错的，没有这个包，所以先添加yarn的源，执行面的命令即可
[[email protected] ~]# curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
[[email protected] ~]#yum -y install yarn
[[email protected] ~]# node -v
v6.16.0
[[email protected] ~]# yarn -n
yarn install v1.15.2
二、在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命令
然后点击保存
四、配置完成后点击立即构建
点进去查看控制台输出，看有没有报错