乐趣区

关于后端:Jenkins打造强大的前端自动化工作流

jiezi

筹备工作

  1. 先筹备一个我的项目，我这里间接应用 vue-cli 脚手架生成了一个我的项目，其余技术栈也一样，只有是个我的项目就行。

  1. 建设这个我的项目的远端 git 仓库，并把本地代码提交下来。我这里用的码云，github 也统一。
  2. 筹备一台能外网拜访的服务器，非要用你本人的电脑当服务器也能够，保障外网可拜访即可。我这里用的是阿里云 ubantu14.04，另外，阿里云老手注册有一个月的收费服务器可领，不想花钱的能够试一下。
  3. 服务器上配好 Java 环境。

Jenkins 的装置与启动

linux 下：ubuntu 14.04 中装置 Jenkins
windows 下：

  1. 从 Jenkins 官网下载最新 war 文件。
  2. 运行 java -jar jenkins.war 即可。

Jenkins 初始化

  1. jenkins 的默认端口是 8080, 启动胜利后在浏览器关上。
  2. 进入后会让咱们输管理员明码，关上网页上提醒门路下的文件，复制明码粘贴输出即可。
  3. 而后会让装置须要的插件，此处选默认即可，期待装置实现。
  4. 创立一个管理员账户。
  5. 下面都实现后会看到这个界面。

创立工作

  1. 点击创立一个新工作

  1. 抉择自在格调的软件我的项目，并起一个名字

至此，根底筹备工作曾经实现，咱们在服务器上安装了 Jenkins 并启动，而后进行了初始化配置，建设了一个新工作。接下来咱们开始配置咱们须要的性能。

实现 git 钩子性能

首先咱们要实现一个 git 钩子性能，就是咱们向 github/ 码云等近程仓库 push 咱们的代码时，jenkins 能晓得咱们提交了代码，这是主动构建主动部署的前提，钩子的实现原理是在远端仓库上配置一个 Jenkins 服务器的接口地址，当本地向远端仓库发动 push 时，远端仓库会向配置的 Jenkins 服务器的接口地址发动一个带参数的申请，jenkins 收到后开始工作。

  1. 关上刚创立的工作，抉择配置，增加近程仓库地址，配置登录名及明码及分支。

  1. 装置 Generic Webhook Trigger Plugin 插件（系统管理 - 插件治理 - 搜寻 Generic Webhook Trigger Plugin）如果可选插件列表为空，点击高级标签页，替换降级站点的 URL 为：http://mirror.xmission.com/jenkins/updates/update-center.json并且点击提交和立刻获取。
  2. 增加触发器
    第 2 步装置的触发器插件性能很弱小，能够依据不同的触发参数触发不同的构建操作，比方我向近程仓库提交的是 master 分支的代码，就执行代码部署工作，我向近程仓库提交的是某个 feature 分支，就执行单元测试，单元测试通过后合并至 dev 分支。灵活性很高，能够自定义配置适宜本人公司的计划，这里不便演示咱们不做任何条件判断，只有有提交就触发。在工作配置里勾选 Generic Webhook Trigger 即可

  1. 仓库配置钩子 此处以码云为例，因为公司用的是码云，github 的配置基本一致，进入码云我的项目主页后，点击治理 -webhooks- 增加，会跳出一个这样的框来。


URL 格局为 `http://<User ID>:<API Token>@<Jenkins IP 地址 >: 端口 /generic-webhook-trigger/invoke` userid 和 api token 在 jenkins 的系统管理 - 治理用户 -admin- 设置里，这是我的



Jenkins IP 地址和端口是你部署 jenkins 服务器的 ip 地址，端口号没改过的话就是 8080。明码填你和下面 userid 对应的明码，我这里是 root。上面的几个选项是你在仓库执行什么操作的时候触发钩子，这里默认用 push。点击提交实现配置。
  1. 测试钩子


点击测试，如果配置是胜利的，你的 Jenkins 左侧栏构建执行状态里将会呈现一个工作。

另外，你也能够试下本地提交代码，提交代码后，jenkins 也会开始一个工作, 目前咱们没有配置工作开始后让它做什么，所以默认它只会在你提交新代码后，将新代码拉取到 jenkins 服务器上。到此为止，git 钩子咱们配置实现。

实现自动化构建

git push 触发钩子后，jenkins 就要开始工作了，自动化的构建工作能够有很多种，比如说装置降级依赖包，单元测试，e2e 测试，压缩动态资源，批量重命名等等，无论是 npm script 还是 webpack，gulp 之类的工作流，你之前在本地能做的，在这里同样能够做。
作为演示，这里只演示三个根本罕用的工作流程，装置依赖包 -> 单元测试 -> 打包，也就是上面这三个命令。

npm install
npm run test
npm run build
复制代码
  1. 首先，和本地运行 npm script 一样，咱们要想在 jenkins 外面执行 npm 命令，先要在 jenkins 外面配置 node 的环境，能够通过配置环境变量的形式引入 node，也能够通过装置插件的形式，这里应用了插件的形式，装置一下 nvm wrapper 这个插件。
  2. 关上刚刚的 jenkins 工作，点击配置外面的构建环境，勾选这个，并指定一个 node 版本。

  1. 点击构建，把要执行的命令输进去，多个命令应用 && 离开。

  1. 保留。
  2. 此时本地批改一下代码 push 测试一下（也能够点击立刻构建测试），点击本次触发的那个工作，抉择控制台输入，将会看到 Jenkins 在云端执行的过程。

命令行最初一行是 Finished 状态的如果是 SUCCESS（蓝色）则证实执行的工作都顺利进行，是 FAILURE（红色）则证实两头有重大谬误导致工作失败，UNSTABLE（黄色）代表有尽管有些小问题，但不妨碍工作进行，黄色或者红色能够去命令行看下谬误输入，看下哪里出了问题。

  1. 如果上一步是 SUCCESS，点击我的项目的工作空间，将会发现多了 dist 和 node_modules 两个文件夹。

至此，咱们曾经搭建了一个繁难的构建工作流程，构建实现了，咱们须要自动化部署。

实现自动化部署

自动化部署可能是咱们最须要的性能了，公司就一台服务器，咱们能够应用人工部署的形式，然而如果公司有 100 台服务器呢，人工部署就有些吃力了，而且一旦线上出了问题，回滚也很麻烦。所以这一节实现一下主动部署的性能。

  1. 首先，先在 Jenkins 上装一个插件 Publish Over SSH，咱们将通过这个工具实现服务器部署性能。
  2. 在要部署代码的服务器上创立一个文件夹用于接管 Jenkins 传过来的代码，我在服务器上建了一个 testjenkins 的文件夹。
  3. Jenkins 想要往服务器上部署代码必须登录服务器才能够，这里有两种登录验证形式，一种是 ssh 验证，一种是明码验证，就像你本人登录你的服务器，你能够应用 ssh 免密登录，也能够每次输明码登录，系统管理 - 零碎设置里找到 Publish over SSH 这一项。重点参数阐明：
Passphrase：明码（key 的明码，没设置就是空）Path to key：key 文件（私钥）的门路
Key：将私钥复制到这个框中(path to key 和 key 写一个即可)

SSH Servers 的配置：SSH Server Name：标识的名字（轻易你取什么）Hostname：须要连贯 ssh 的主机名或 ip 地址（倡议 ip）Username：用户名
Remote Directory：近程目录（下面第二步建的 testjenkins 文件夹的门路）高级配置：Use password authentication, or use a different key：勾选这个能够应用明码登录，不想配 ssh 的能够用这个先试试
Passphrase / Password：明码登录模式的明码
Port：端口（默认 22）Timeout (ms)：超时工夫（毫秒）默认 300000
复制代码

配置实现后，点击 Test Configuration 测试一下是否能够连贯上，如果胜利会返回 success，失败会返回报错信息，依据报错信息改过即可。

  1. 接下来进入咱们创立的工作，点击构建，减少 2 行代码，意思是将 dist 外面的货色打包成一个文件，因为咱们要传输。
cd dist&&
tar -zcvf dist.tar.gz *
复制代码

  1. 点击构建后操作，减少构建后操作步骤，抉择 send build artificial over SSH，参数阐明：
Name: 抉择一个你配好的 ssh 服务器
Source files：写你要传输的文件门路
Remove prefix：要去掉的前缀，不写近程服务器的目录构造将和 Source files 写的统一
Remote directory：写你要部署在近程服务器的那个目录地址下，不写就是 SSH Servers 配置里默认近程目录
Exec command：传输完了要执行的命令，我这里执行理解压缩和解压缩实现后删除压缩包 2 个命令
复制代码

  1. 当初当咱们在本地将 Welcome to Your Vue.js App 批改为 Jenkins 后收回一个 git push，过一会就会发现咱们的服务器上曾经部署好了最新的代码，是不是很 6。

至此，咱们的自动化部署也实现了，然而如果过程中有异样怎么办，或是咱们想晓得每次 Jenkins 运行的日志及运行后果，咱们能够通过配置邮件服务来让 Jenkins 每次实现工作后告诉相干人员。

实现邮件揭示

这里咱们不必 E -mail Notification，因为它的邮件服务性能太少，无奈自定义邮件内容及自定义触发钩子，而且只能在异常情况下能力发邮件。咱们应用 Editable Email Notification 这个。

  1. 关上系统管理 - 系统配置 -Extended E-mail Notification，不是系统管理 - 系统配置 - 邮件告诉，千万不要配错了，否则不起作用。配置一下用来发邮件的邮箱，我这里用的是我本人的 qq 邮箱。


要是用别的厂家的邮箱服务就查下别的邮箱厂家 smtp 怎么配，用 qq 邮箱的除了 user Name 和 password 其余的和我写一样就行。另外 password 写的不是 qq 邮箱的明码，而是开启 smtp 服务后发短信获取的明码。
  1. 关上创立的那个工作，减少构建后操作步骤抉择 Editable Email Notification，Project Recipient List 那里写你要发给谁邮件，能够多个，用分号隔开。

而后点击 Advanced Settings-Triggers-Add Trigger，抉择 always，意思是无论什么状况工作执行完就发邮件，也能够抉择其余模式，如工作执行异样了才发邮件。

我这里配置的接管邮件的地址也是我的 qq 邮箱，这个能够依据本人公司的工作流程配。

  1. 当初当咱们在本地批改代码后收回一个 git push，Jenkins 主动构建部署实现后就会给我发一封邮件，邮件附件里会有本次工作的日志。

至此，咱们的邮件揭示性能也配置完了。

转自：https://juejin.im/post/6844903591417757710

退出移动版