• web前端jenkins自动部署pipeline用法


    前言

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

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

    〇、必备的环境及条件

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

    一、新建节点

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

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

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

    ,指定工作目录。(此处指定为/mnt)

    配置填写完毕,点击保存,即返回到了节点列表页面:

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

    二、启动节点服务器

    从节点列表点击该节点,进入到节点明细页面我们可以看到如下

    在浏览器中启动节点
    
    在命令行中启动节点
    
    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
    

    从这个命令可以看到,我们确实没有安装java环境

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

    首先,我们到官网上下载jdk8的稳定版本 Jdk官网,打开这个页面,我们可以看到如下:

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

    • 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
    

    随即,我们让配置生效

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

    利用第一步中的命令:

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

    下载agent.jar包

    • 1、右键,复制超链接

    • 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】-->【流水线】,点击确认

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

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

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

    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
    

    安装后验证一下:

    ansible --version
    

    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配置如下:

    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】

    然后在构建任务列表,点击当前正在构建的任务

    进入当前构建的详情页,--》【打开 Blue Ocean】

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

    结语

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

  • 相关阅读:
    当select框变化时 获取select框中被选中的值
    表字段添加、删除、修改
    初步了解JSONP
    通过 Chrome Workspace 调试本地项目(修改样式时及时保存)
    XAMPP PHP redis 扩展
    在右键菜单中加入 用...打开
    PHP unset 后恢复数组索引
    LINUX VI 常用命令
    排行榜 文字向上滚动效果
    jq 获取除节假日与周六日 外的日期 和 星期
  • 原文地址:https://www.cnblogs.com/ldld/p/14069784.html
Copyright © 2020-2023  润新知