【Jenkins】Gitlab webhook 触发 Jenkins Pipeline 自动构建部署前端项目

有同学可能看过我的 上一篇博文，和本文的目的相同，那么为何还要再写这一篇文章呢，原因如下

1. 上一篇博文中通过 docker 安装的 gitlab-runner，直到构建完成都没有问题（所以上一篇文章的内容依然是正确的，大家不用担心），但在我试图将 dist 目录拷贝到服务器的别处时却一直遇到问题，不得已暂时放弃 docker
2. 课程要求使用 Jenkins Pipeline 做自动部署相关的工作

环境配置

CentOS 7 + node + git + java

node 安装参见 CentOS 7 安装 Node.js（一定要记得配置环境变量）

git 安装一如既往地不记得（应该 yum install git 就可？）

Jenkins 的安装使用需要 java（建议 1.8），一般云服务器应该会自带，若没有请自行搜索教程

安装 Jenkins

首先到 清华镜像站 下载 Jenkins 的 rpm 包

这里建议安装最新版本，否则进入 Jenkins 后可能会出现 warning（最新版在最下面！！！）

下载：右键复制链接地址，终端执行

wget https://mirrors4.tuna.tsinghua.edu.cn/jenkins/redhat/jenkins-2.220-1.1.noarch.rpm -v

安装：终端执行

rpm -ivh jenkins-2.220-1.1.noarch.rpm

启动：终端执行

若成功会出现绿色提示，若失败可以尝试参考 这篇博文

service jenkins start

使用 Jenkins

启动后 Jenkins 服务运行在服务器 8080 端口，通过浏览器进行访问

这里的步骤都是老生常谈，网上有很多，而且大部分都可以正常运转，在此不再赘述

这里不详细写的原因还有一个就是我对于哪些插件需要哪些插件不需要其实也并不清楚，否则一定会介绍给大家

应该必须的插件：PipeLine，GitLab Plugin，Generic Webhook Trigger Plugin

创建任务

进入 Jenkins 后，点击左侧新建 Item 创建一个新的项目，输入名称（随意），选择流水线

配置触发器为 GitLab webhook（如果没有此选项请检查是否缺少相关插件）

下面的 Pipeline 脚本我们到后面再进行配置

配置 GitLab webhook

进入你的 GitLab 项目，在 Settings-Integrations 中配置

URL：填入刚才 Jenkins 配置中显示的 URL

Secret Token：加密用，如无需要不填写

Push events 下的输入框：可以填入 master 以确保只有 master 分支的 push 才会发送 Push events

配置完毕后下翻点击添加

添加成功后，首先测试一下连通性：点击 Push events

如果提示成功，返回值 200（当然这是不可能的），就说明从 push 到触发构建的过程是 OK 的

当然，现在你看到的一定是错误提示，现在让我们点击 Edit，翻到页面下方查看错误详情

如果按照我的步骤进行，现在你应当看到一个 403 的错误，点击详情看到响应如下

他的意思是：匿名的用户没有进行工作/构建的许可，现在，我们就到 Jenkins 里给他这个许可

从左侧菜单的 Manage Jenkins 进入 Configure Global Security（一个黄色小锁的图标）

更改 Authorization 的选项为 Anyone can do anything

当然，这样其实是不安全不正常的操作，所以还可以使用安全矩阵为 Anonymous User 加上 Build 权限

现在再回到 Gitlab 测试一下 webhook，应该可以连通了~

编写 Pipeline 脚本

现在我们有了叫醒工人的功能，但是工人要干些什么呢？自然是 更新代码，安装依赖，构建，部署 等工作

这些我们都在 Pipeline 的脚本中体现出来

打开项目的配置，找到最下面的 Pipeline，在其中填入脚本，这里展示一下我的脚本并加以说明：

pipeline {
    
    agent any
    
    stages {
        stage('git') {
            steps {
                git branch: 'master', credentialsId: 'rg3-gitlab', url: 'http://xxx/xxx/jenkins-try.git'
            }
        }
        stage('install') {
            steps {
                sh 'npm config set registry https://registry.npm.taobao.org'
                sh 'npm install'
            }
        }
        stage('build') {
            steps {
                sh 'npm run build'
            }
        }
        stage('deploy') {
            steps {
                sh 'cp -r dist /my/nginx-5000'
            }
        }
    }
    
}

agent any 表示不做任何代理，看过上一篇博文的同学都知道我们当时是用了一个 node 的 docker 镜像做的代理，所以这次可能会出现 npm 和 node not found 的问题

--------------------------------------------------------------------------------------------------------------------------------------

我们要求服务器上已经安装了 node 并配置好环境变量（检测方法就是在任意路径都能执行 node -v 输出版本号）

如果服务器的 node 没有问题，下面就进入 Manage Jenkins - Configure System（齿轮图标）

加入你服务器的 PATH，可以执行命令 echo $PATH 获取

保存，这时候 pipeline 里的 npm 和 node 应该就可以正常运行了（如果还不能请尝试安装 Node 插件后再试）

--------------------------------------------------------------------------------------------------------------------------------------

一个 stage 就是一个流程，steps 表明要做的事

--------------------------------------------------------------------------------------------------------------------------------------

git branch 表示从 git 仓库拉取新的代码，第一个参数为分支名称，不用解释

第二个参数为身份认证的名称，是这个 git 仓库所需要的的账号和密码

我们先进入 Manage Jenkins - Configure System，在 Gitlab Connection 这里进行配置（若没有请安装 Gitlab 相关插件）

从完整的过程来看这里似乎并不需要配置一个 connection，不过如果你遇到与 Gitlab 连接失败的情况，不仿配置一下

这里主要的任务是点击 Add，在 Username 和 Password 中输入你这个 git 仓库的账号和密码

你也可以提供一个好记的 ID，如果不提供，系统会自动帮你生成一个，比如我将其命名为 rg3-gitlab

现在到 Jenkins 左侧菜单中的 凭据 中就可以查看到你已经创建的凭据

这个 ID 就是你需要写入的第二个参数！

第三个参数是项目的 git 地址，鉴于这里使用了 账号+密码 的认证方式，这里必须使用 HTTP 的地址

--------------------------------------------------------------------------------------------------------------------------------------

下面的过程就是老生常谈的 npm install，npm run build，最后将 dist 传到 nginx 的目录下

我这里配置的 nginx 目录为 /my/nginx-5000/dist，所以 cp -r dist /my/nginx-5000 就可以将 dist 的全部内容传过去并覆盖旧的内容

这里还要注意 权限 的问题，Jenkins 并不是作为 root 执行 shell 命令的，所以对于这种涉及到文件操作的命令，很有可能发生 Permission denied 的错误，合理使用 chmod（推荐使用 Filezilla，可以图形化修改权限）授予权限即可

测试

1. 在 Gitlab 上手动触发一次 Push events，观察是否有新构建产生，流水线是否正常完成
2. 在本地 master 进行更改并提交，观察是否有新构建产生，流水线是否正常完成

流水线的信息在点进项目就可以很方便地查看

希望大家能根据这篇文章顺利完成 服务器端 Jenkins 通过 Gitlab webhook 自动构建部署前端项目 的工作

软工三加油！！！