Jenkins + Vue 项目自动化部署

  • Z时代
  • 2024-01-10
  • 分类：综合

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命令

然后点击保存

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

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

以上是 Jenkins + Vue 项目自动化部署 的全部内容， 来源链接： utcz.com/z/374556.html

回到顶部