web前端jenkins自动部署pipeline用法

2022-03-10 18:32:58

前言

在前端开发项目中，我们可能会遇到很多频繁重复的工作，尤其是是测试环境的缺陷修复与发版。手动部署多台服务器，也是一个体力活。而且很多公司规模并不是那么大，可能没有专门的团队来做这件事。这个时候我们就需要一个自动化的工具，来提高我们的效率。最典型的工具就是Jenkins。 接下来，我们讲探究一下怎么使用jenkins部署。本次内容，我们将学习或者巩固到如下知识点：

  • 如何新增并启动一个节点服务器
  • 运维神器【ansible】命令批量部署多台服务器
  • Linux系统下java环境搭建规范(本文中Linux 是CentOS 的发行版)
  • pipeline流水线方式部署的基本语法

〇、必备的环境及条件

  • 若干Linux服务器（服务器之间最好能免密访问）
  • 已经搭建好的jenkins平台
  • 已经搭建好的git代码仓库
  • 勤劳的双手

一、新建节点

节点，简单来说就是一个拉取你的最新代码执行打包构建的服务器。

【Manage Jenkins】--> 【Manage Nodes and Clouds】

web前端jenkins自动部署pipeline用法

节点列表页面【新建节点】，节点命名 为 h5-slave，与配置填写。

web前端jenkins自动部署pipeline用法web前端jenkins自动部署pipeline用法，指定工作目录。（此处指定为/mnt）web前端jenkins自动部署pipeline用法

配置填写完毕，点击保存，即返回到了节点列表页面：web前端jenkins自动部署pipeline用法

我们可以发现外面刚才见 h5-slave节点 有个红色的叉，表面该节点不可用。服务还没启动。此前无法作为jenkins构建。

二、启动节点服务器

从节点列表点击该节点，进入到节点明细页面web前端jenkins自动部署pipeline用法我们可以看到如下

在浏览器中启动节点

在命令行中启动节点

java -jar agent.jar -jnlpUrl http://xxx.xxx.x.x:8080/computer/h5-slave/slave-agent.jnlp -secret 8973d1ffe40afad5d9003cbf5ae3639dc49626e89567845cb5aabb2ac75cedc4 -workDir "/mnt"
Run from agent command line, with the secret stored in a file:

echo 8973d1ffe40afad5d9003cbf5ae3639dc49626e89567845cb5aabb2ac75cedc4 > secret-file
java -jar agent.jar -jnlpUrl http://xxx.xxx.x.x:8080/computer/h5-slave/slave-agent.jnlp -secret @secret-file -workDir "/mnt"

这像是一个操作指引，告诉我们在节点服务器执行如下命令即可启动成功。 同时，我们要想启动节点服务器，必须要具备如下环境与条件：

  • java 环境
  • 下载agent.jar包

nodejs环境对于web前端开发来说再熟悉不过了，但是Linux系统下java环境怎么部署呢？也需要一个规范。这里可以给出一个参考给大家：

java环境搭建

  • 1、检查是否已经安装java环境
java -version
// 或者
yum list installed |grep java

web前端jenkins自动部署pipeline用法从这个命令可以看到，我们确实没有安装java环境

  • 2、下载依赖包,并解压

首先，我们到官网上下载jdk8的稳定版本 Jdk官网，打开这个页面，我们可以看到如下：web前端jenkins自动部署pipeline用法

这些版本看起来眼花缭乱的，但是我们注意以下几点：

  • Linux ARM 针对移动端平台的linux系统
  • Linux x86 32位的
  • Linux x64 64位的

一般情况下，选择Linux x64就行了。

这里下载也可以通过两种方式下载：

  • 规规矩矩的下载tar.gz文件到本地，然后通过FTP上传到Linux服务器。
  • 在Linux服务器上直接通过wget命令下载。（前提是开通了网络权限）。或者有内网的依赖包，类库管理站，直接内网下载。

注意：这里官网下载需要你注册账号，登录

我们将jdkxxx.tar.gz放到/usr/local目录下，然后解压

// tar.gz文件解压：

tar -xzvf jdk.xxx.tar.gz

// zip文件解压
unzip jdk.xxx.zip 

// 如果没有zip命令，可以安装
yum install unzip -y
  • 3、配置jdk环境变量

打开配置文件

vi /etc/profile

在最后两行添加：

export JAVA_HOME=/usr/local/jdk-xxxx
export PATH=$PATH:$JAVA_HOME/bin

web前端jenkins自动部署pipeline用法

随即，我们让配置生效

source /exr/profile
  • 4、验证java环境是否装成功

利用第一步中的命令：

java -version
// 或者
yum list installed |grep java

web前端jenkins自动部署pipeline用法

下载agent.jar包

  • 1、右键，复制超链接

web前端jenkins自动部署pipeline用法

  • 2、到节点服务器上、任意路径上，下载
wget [右键复制超链接后的url]
  • 3、启动节点服务器

拷贝此前新建节点后页面提示的一长串命令，然后用nohup方式 启动即可。

nohup java -jar agent.jar -jnlpUrl http://1xx.xx.1.2:8080/computer/h5-salve/slave-agent.jnlp -secret 
2eb8b373985964a61d4a8fa40cd8b452bd575704254292510a2aeec4da18adfb -workDir "/mnt"&

注意：前面有一个nohup，结尾有一个&，且&前面不要有空格

节点启动成功后，我们即可用该节点自动部署了。

四、新建item

  • 1、【jenkins】 -->【新建item】-->【流水线】，点击确认

web前端jenkins自动部署pipeline用法

  • 2、在配置中，其他先不管，只填写【流水线】

web前端jenkins自动部署pipeline用法

填写完后，一定要记得点击【应用】或者【保存】。

我们来看看流水线的标准语法结构:

pipeline {
    agent {
        label ‘[节点名]‘
    }

   stages {
      stage(‘process name 1‘) {
         steps {
            // Get branch lastest code from a GitHub repository
            echo ‘pull code start: get latest code‘
            git branch: ‘1.0.0‘,
                credentialsId: ‘59d70ec8-6236-4bba-add1-15447d212d62‘,
                url: ‘https://gitlab.xxx.com/hjqh/future-am-admin.git‘

         }
      }
      stage(‘process name2‘) {
         steps {

         }

      }
      stage(‘process name3‘) {
         steps { 
         }
         
      }
   }
}

具体实际的配置，我们可以参考如下：

pipeline {
    agent {
        label ‘h5-slave‘
    }

   stages {
      stage(‘Pull code‘) {
         steps {
            // Get branch lastest code from a GitHub repository
            echo ‘pull code start: get latest code‘
            git branch: ‘1.0.0‘,
                credentialsId: ‘59sssc8-6236-4bba-add1-15447d212d62‘,
                url: ‘https://gitlab.xxxx.com/hjqh/future-am-admin.git‘

         }

      }
      stage(‘Build‘) {
         steps {
            // Get branch lastest code from a GitHub repository
            echo ‘build start......‘
            // 安装依赖
            sh ‘npm install --registry=https://registry.npm.taobao.org‘
            // 打包构建
            sh ‘npm run build‘
            // 重命名打包名
            sh ‘mv dist ./admin‘
            // 压缩，方便更快传输到目标应用服务器
            sh ‘tar -czvf admin.tar.gz admin‘
            // 控制台打印
            echo "build success..."

         }

      }
      stage(‘Deploy‘) {
         steps {
            echo ‘deploy start...‘
            // 用ansible命令备份应用服务器上原有的文件
            sh ‘ansible admin -i /mnt/hosts -m shell -a "mv /home/apps/admin /home/apps/backup/app-`date +%Y%m%d%H%M%S`"‘
            // 用ansible命令将节点服务器部署包上传至应用服务器
            sh ‘ansible admin -i /mnt/hosts -m copy -a "src=/mnt/workspace/xxx/admin.tar.gz  dest=/home/apps"‘
            // 用ansible命令操作应用服务器，解压应用服务器上的部署包（解压及完成部署）
            sh ‘ansible admin -i /mnt/hosts -m shell -a "tar -zxvf /home/apps/admin.tar.gz -C /home/apps/"‘
             // 用ansible命令操作应用服务器，删除节点服务器上的部署包
            sh ‘rm -rf /mnt/workspace/xxx/admin.tar.gz /mnt/workspace/xxx/admin /home/apps/admin.tar.gz‘
            echo ‘deploy success‘

         }
         
      }
   }
}

从上述的实际流水线脚本，我们需要注意如下：

  • 1、整个流水线语法的空格、缩进、换行，需要严格注意
  • 2、一个stages里面包含多个stage，可以理解为多个步骤
  • 3、第一个步骤，一般都得指定git地址和分支、以及jenkins全局配置的credentialsId 这样才能拉取到制定分支的最新的代码。
  • 4、执行shell命令 以sh 开头，中间有空格，一行命令写完后，注意换行。
  • 用到了神奇的ansible命令工具。

理解ansible

首次看到ansible，是否是一头雾水？先来看概念

ansible是新出现的自动化运维工具，基于Python开发，集合了众多运维工具（puppet、cfengine、chef、func、fabric）的优点，实现了批量系统配置、批量程序部署、批量运行命令等功能。

从上述概念上，我们可以知道，ansible就是一个实现批量部署的工具。 假如你又10台服务器需要部署，部署的包、命令一模一样，操作10次就太费劲了。引入ansible，就可提升效率。

1、下载安装
yum install ansible -y

web前端jenkins自动部署pipeline用法

web前端jenkins自动部署pipeline用法安装后验证一下：

ansible --version

web前端jenkins自动部署pipeline用法

2、新建一个ansible配置文件

我们在节点服务器的/mnt目录下,新建一个hosts文件：

// 新建或者编辑hosts文件
vi hosts
// 输入如下配置，并保存
[admin]
admin-01 ansible_connection=local
admin-02 ansible_connection=1xx.1xx.1xx.1
admin-03 ansible_connection=1xx.1xx.1xx.2

[h5]
h5-01 ansible_connection=local
h5-02 ansible_connection=1xx.1xx.1xx.1
h5-03 ansible_connection=1xx.1xx.1xx.2

从上述命令，我们可以推断出这么一个场景：

  • 1、需要部署的应用系统有2个组，一个是admin，一个是h5，且每个组下面有三台应用服务器
  • 2、ansible_connection=local 表示该jenkins节点，自己也同时作为一台应用服务器。

最终，我们的ansible配置如下：web前端jenkins自动部署pipeline用法

3、ansile命令

由第二步，我们可以知道，ansible配置路径为 /mnt/hosts，以此前我们用到的ansible命令为例

sh ‘ansible admin -i /mnt/hosts -m copy -a "src=/mnt/workspace/xxx/admin.tar.gz  dest=/home/apps"‘

上述命令表示，将节点服务器的mnt/workspace/xxx/admin.tar.gz （src=xxx）文件拷贝，批量上传到admin这个组里面的所有服务器的home/apps路径下（ dest=xxx）上去。admin这个组下面有哪些服务器？通过 -i /mnt/hosts 指定配置文件来读取。

sh ‘ansible admin -i /mnt/hosts -m shell -a "tar -zxvf /home/apps/admin.tar.gz -C /home/apps/"‘

上述命令，- m shell "[你的shell命令]",其实也很好理解。注意shell命令要有双引号。

想了解更多的ansible相关的信息，可点击Ansible中文权威指南。

五、jenkins构建

点击构建之前一定要确保节点服务器 跟应用部署服务器之间是免密访问的（找运维人员处理即可）。 否者你的ansible命令就得重新写，带带上登录用户信息才行。

再者，我们一直没有强调节点服务器搭建nodejs环境，这个也是必备的。 至于何如安装nodejs环境，请参考Linux下nodejs环境搭建

我们打开新建的item页面，点击【build Now】web前端jenkins自动部署pipeline用法

然后在构建任务列表，点击当前正在构建的任务web前端jenkins自动部署pipeline用法

进入当前构建的详情页，--》【打开 Blue Ocean】web前端jenkins自动部署pipeline用法

我们可以看到上面的几个步骤，就是我们流水线代码里面的几个stage，一一对应，模块层次分明。查看构建日志也方便，比传统的Publish over SSH远程部署方式要好很多。

结语

作为一个前端开发，我们应该学会用工具，来提升提升日常开发的效率。本篇以最繁琐最笨的方式，来解决小公司小团队的自动化部署问题。掌握了这种基本的技能，朝着devOps又更进一步了。当然，技术无所谓优劣，能解决你的实际问题的，就是好的技术。

web前端jenkins自动部署pipeline用法

上一篇：【ASP.NET Core分布式项目实战】（二）oauth2 + oidc 实现 server部分


下一篇：【ASP.NET Core分布式项目实战】（一）IdentityServer4登录中心、oauth密码模式identity server4实现