Gitea+Jenkins+webhooks-前端自动化部署

jenkins中文汉化文档
安装Locale插件=>设置语言为zh_US=>重启=>设置语言为zh_CN=>刷新页面就可以了

Jenkins的插件安装,在插件管理中安装Generic Webhook Trigger用于gitea构建触发器,Blue Ocean可以理解为Jenkins的一个皮肤(个人感觉界面看起来和操作使用很舒服)

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_自动化

安装插件

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_自动化_02

第二个插件

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_Jenkins_03

第三个插件

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_Jenkins_04

关于Jenkins准备工作,已经基本做完,下一步将使用gitea中的webhooks与Jenkins进行联系,达到代码自动部署的效果

首先,我们先点新建任务,进入到任务列表,接下来,我将分享两种构建的方式,分别是批处理命令构建和pipeline流水线语法的方式构建

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_Jenkins_05

创建任务

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_推送_06

自由风格项目构建

在任务配置中输入gitea clone的地址,并且点击新建验证方式,我这里用的是用户名密码

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_推送_07

构建触发器
http://JENKINS_URL/generic-webhook-trigger/invoke

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_自动化_08

TOken
vue_vite

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_jenkins_09

然后在仓库设置中添加web钩子,设置请求的地址,地址与Jenkins构建触发器中示例地址一致

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_前端_10

web钩子设置

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_自动化_11

配置选择

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_前端_12

触发条件

我选择的是推送,即当前仓库收到推送信息就会通过webhooks通知Jenkins构建项目,最后测试一下是否能正常请求,请求成功后就会执行构建

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_jenkins_13

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_Jenkins_14

我的完整成功推送
http://192.168.2.202:8080/jenkins/generic-webhook-trigger/invoke?token=dajiba

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_自动化_15

配置构建

构建内容

#指此脚本使用/bin/sh 来执,说明如果没有声明,则脚本将在默认的shell中执行,默认的shell是由用户所在的系统定义为执行shell脚本
#!/bin/bash -l

#进入jenkins工作空间下项目目录中
cd /root/.jenkins/workspace/webhook-111111

#安装项目中的依赖
npm  install 

#打包
npm run build

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_前端_16

更新代码,测试更新

随便更新一些代码上去

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_自动化_17

上传代码

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_自动化_18

发现jenkins在自动更新

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_前端_19

构建pipeline流水线语法

创建任务

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_前端_20

构建触发器

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_jenkins_21

配置一个参数,如果以后还有项目,构建的时候可以灵活选择
single_project_name

/root/.jenkins/workspace/webhooks-rock

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_自动化_22

对应定义的值

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_自动化_23

发布到服务器语法

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_推送_24

然后就是构建流水线脚本,这里放出我配置的一段供大家参考。
pipeline { 
   agent any 
   stages { 
      stage('拉取代码') { 
          steps { 
              checkout([$class: 'GitSCM', branches: [[name: '*/master']], extensions: [], userRemoteConfigs: [[credentialsId: '7f49313d-880d-4a5e-836f-cef4bf2ec37a', url: 'http://192.168.2.204:3000/aike/test.git']]])
            } 
        }
      stage('选择node版本编译打包') { 
             steps { 
              nodejs('node') {
                sh '''cd ${single_project_name}
                      npm  install 
                      npm run build
                      tar -zcvf  ./front.end-levee.tar.gz   ./dist'''
              }
            } 
        } 
      stage('发布到服务器') { 
             steps { 
              sshPublisher(publishers: [sshPublisherDesc(configName: '192.168.2.204', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '''
            cd /a
            tar -xzf front.end-levee.tar.gz -C ./
            cp -r dist/* ./ 
            rm -rf   front.end-levee.tar.gz''', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/a', remoteDirectorySDF: false, removePrefix: '', sourceFiles: 'front.end-levee.tar.gz')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
            } 
        }             
   }
}

构建可以选择对应目录

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_jenkins_25

最终完整构建

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_推送_26

测试推送更新代码

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_Jenkins_27

最终成功图

构建可以选择对应目录

[外链图片转存中…(img-y6qOI4YS-1655878283587)]

最终完整构建

[外链图片转存中…(img-Q6HSAftj-1655878283588)]

测试推送更新代码

[外链图片转存中…(img-Ut9iazn7-1655878283588)]

最终成功图

windows jenkins netcore自动化部署 jenkins rancher webhook 自动部署_推送_28