jenkins通过码云的webhook自动部署vue项目并通过钉钉通知

jenkins通过码云的webhook自动部署vue项目并通过钉钉通知

公司前端开发需要频繁更新代码，需要及时部署到测试环境，所以亟需一套自动化部署的应用，然而jenkins加码云的webhook就可以实现这一功能，通过配置，当前端开发push代码后webhook会检测到代码更新发送请求给jenkins触发自动构建项目。

环境介绍

Linux：CentOS Linux release 7.7.1908 (Core)
JDK ： version “1.8.0_242”
Tomcat ：apache-tomcat-8.0.30
Git ： version 1.8.3.1
Node ：v13.11.0
Yarn ：1.22.4
Jenkins版本 ： 2.204.5

前言：下面文章介绍的操作和配置是在基础环境都准备好了的情况下进行的，所以在要保证jdk，node等这些环境都装好了，同时jenkins也搭建好了。

第一步 ：下载所需的插件

搜索并安装NodeJS Plugin（构建工具）、Publish Over SSH（用于远程发送构建好的包到指定的服务器)

这个是码云webhook的插件

下载安装钉钉插件

安装好了node以后需要在jenkins里面配置好

根据你的安装目录配置好，填好记得保存哈

然后我们需要配置好要远程的web服务器

拉到下面，找到ssh server，点击高级



新建一个项目

创建好项目后，点进去进行配置

设置保存构建的天数和个数，如果不设置每次构建保存会不断累积，占用磁盘空间

源码管理这里填的是代码仓库的地址等信息

这里填的是代码仓库登录的用户名和密码

选择webhook触发

这一步是为了能在钉钉上显示push代码触发构建的人的名字

选择执行shell，进行打包等操作
执行shell脚本中npm run build:pord 我的这样写是因为我拉取下来的vue项目中的package.json中build对应关系是这么写的，一般用npm run build 就可以

下面展示一些 内联代码片。

cd /root/.jenkins/workspace/前端开发环境-location     #进入jenkins的工作目录
npm install                                        #构建操作会安装所需要的依赖包             
npm run build:prod --report              #构建操作（注意测试时的代码必须是vue项目，不然会报错）
cd dist                                  #构建完成以后会生成一个dist目录，里面是我们要打包的文件
tar -zcvf test-html.tar.gz *             #将构建好的项目打包方便发送给远程服务器
cd ../

当我们执行完上面的步骤那么就已经成功将代码库中的代码拉取到jenkins的相应目录下，并打包好了，现在需要执行构建后操作，就是将打好的包远程传送给web服务器，解压并且替换掉旧的版本

#!/bin/bash

DATE=`date +%Y%m%d%H%M`   #得到一个时间作为版本
mkdir  /opt/version/$DATE                     #创建版本目录
echo $DATE >> /opt/version/version.txt       #记录版本
rm -rf  /usr/local/nginx/html/admin/*                          #清除网页根目录下的文件
mv  /opt/htmldata/test-html.tar.gz  /opt/version/$DATE/        #将jenkins打包好的文件放到指定版本目录中
cp /opt/version/$DATE/test-html.tar.gz /usr/local/nginx/html/admin    #复制到网页根目录中
cd    /usr/local/nginx/html/admin
tar -xf   test-html.tar.gz                  #解压
rm -rf test-html.tar.gz

这里可以先手动触发检测一下构建配置是否成功


最好看到构建成功就说明jenkins构建的配置是ok 的

登录配置码云

添加好以后进行测试，一定要测试成功才可以，没成功的话就检查一下前面的配置

在钉钉上建一个群，在群设置的点击智能群助手，创建一个机器人

选择自定义机器人

在jenkins中进入系统管理，点开系统配置

这样就基本配置完成了，当开发那边push相应的分支代码，jenkins就会被触发构建通过钉钉发送构建结果通知

本篇博客只能作为参考，可能有些地方是需要根据实际的版本，或者业务需求会需要改动的，所以如果报错的话可以具体看看是哪方面的错误，再进行更改，如有写的不对的地方，敬请各位大神谅解并指正！