Jenkins的前端自动化工作流搭建的过程，搭建完这套工作流，我们只需要在本地发起一个git提交，剩下的单元测试，打包构建，代码部署，邮件提醒等功能全部自动化完成，让持续集成、持续交付、持续部署变得简单易操作，真正解决人工构建部署的诸多问题。

Jenkins是什么？

Jenkins 是一款业界流行的开源持续集成工具，广泛用于项目开发，具有自动化构建、测试和部署等功能。
下面我们就来安装Jenkins。

准备工作

一个阿里云服务器(这里用的Ubuntu16.04)
一个公共的git仓库
一个可以进行打包的项目代码库

开始

• 我这里用的是阿里云的轻量服务器，装的是ubuntu16.04系统，首先我们要设置下服务器的安全设置，打开一些端口。下面是我的一些端口设置。

  
  image.png
  image.png

• 然后我们通过SSH远程连接服务器, 并且切换到管理员账号

  
  image.png
• 在服务上安装Java(Jenkins需要java环境)
  • 执行命令
    sudo apt-get install openjdk-8-jdk
    显示报错，需要切换源。
    W: Failed to fetch http://mirrors.cloud.aliyuncs.com/ubuntu/dists/xenial/InRelea se Could not resolve 'mirrors.cloud.aliyuncs.com' W: Failed to fetch http://mirrors.cloud.aliyuncs.com/ubuntu/dists/xenial-updates /InRelease Could not resolve 'mirrors.cloud.aliyuncs.com' W: Failed to fetch http://mirrors.cloud.aliyuncs.com/ubuntu/dists/xenial-securit y/InRelease Could not resolve 'mirrors.cloud.aliyuncs.com' W: Some index files failed to download. They have been ignored, or old ones used
  • 切换源
    执行
    cd /etc/apt/sources.list.d
cp sources-aliyun-0.list sources-aliyun-0.list.bak # 保留原版本以防改
    将 sources-aliyun-0.list 内的内容替换成以下内容

deb http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
##测试版源
deb http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
# 源码
deb-src http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
##测试版源
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
# Canonical 合作伙伴和附加
deb http://archive.canonical.com/ubuntu/ xenial partner

参考这篇文章https://segmentfault.com/a/1190000016153084

• 安装好Java之后开始安装Jenkins，执行下面的代码

wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
echo y|sudo apt-get install jenkins

• 运行Jenkins
  Jenkins 是以服务的形式运行的,故可使用如下民两个管理服务，默认使用 8080 端口
  启动服务：sudo service jenkins start
  相关服务命令: sudo service jenkins start|stop|restart
• 至此，可以通过 http://ip:8080 访问 Jenkins 了，然后就是初始化和使用了

Jenkins初始化和相关配置

• 初始化
  jenkins的默认端口是8080,启动成功后在浏览器打开。
  进入后会让我们输管理员密码，打开网页上提示路径下的文件，复制密码粘贴输入即可。
  然后会让安装需要的插件，此处选默认即可，等待安装完成。
  创建一个管理员账户。
  上面都完成后会看到这个界面。

  
  image.png

• 创建任务
  1、点击创建一个新任务

  
  image.png
  

  2、选择自由风格的软件项目，并起一个名字

  
  image.png
  至此，基础准备工作已经完成，我们在服务器上安装了Jenkins并启动，然后进行了初始化配置，建立了一个新任务。接下来我们开始配置我们需要的功能。
• 实现git钩子功能
  首先我们要实现一个git钩子功能，就是我们向github/码云等远程仓库push我们的代码时，jenkins能知道我们提交了代码，这是自动构建自动部署的前提，钩子的实现原理是在远端仓库上配置一个Jenkins服务器的接口地址，当本地向远端仓库发起push时，远端仓库会向配置的Jenkins服务器的接口地址发起一个带参数的请求，jenkins收到后开始工作。
  1、打开刚创建的任务，选择配置，添加远程仓库地址，私有仓库需要配置登录名及密码。
  image.png
  注意！！这里踩了一个坑踩了好久，因为服务器上没有安装git，所以，这里之前一直报错
  image.png
  要解决这个问题，只需要在服务器某个文件夹下git clone下，如果这个url可以clone成功，基本就可以解决这个问题。
  还有就是，私有仓库，需要配置下SSH秘钥或者用户名和密码。
  2、安装Generic Webhook Trigger Plugin插件（系统管理-插件管理-搜索Generic Webhook Trigger Plugin）如果可选插件列表为空，点击高级标签页，替换升级站点的URL为：http://mirror.xmission.com/jenkins/updates/update-center.json并且点击提交和立即获取。
  3、添加触发器
  第2步安装的触发器插件功能很强大，可以根据不同的触发参数触发不同的构建操作，比如我向远程仓库提交的是master分支的代码，就执行代码部署工作，我向远程仓库提交的是某个feature分支，就执行单元测试，单元测试通过后合并至dev分支。灵活性很高，可以自定义配置适合自己公司的方案，这里方便演示我们不做任何条件判断，只要有提交就触发。在任务配置里勾选Generic Webhook Trigger即可
  image.png
  4、仓库配置钩子 此处以码云为例，因为公司用的是码云，github的配置基本一致，进入码云项目主页后，点击管理-webhooks-添加，会跳出一个这样的框来。
  image.png
  URL格式为 http://<User ID>:<API Token>@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke
  userid和api token在jenkins的系统管理-管理用户-admin-设置里。
  Jenkins IP地址和端口是你部署jenkins服务器的ip地址，端口号没改过的话就是8080。
  密码填你和上面userid对应的密码，我这里是admin。
  下面的几个选项是你在仓库执行什么操作的时候触发钩子，这里默认用push。
  点击提交完成配置。
  5、测试钩子

1. image.png
   

   点击测试，如果配置是成功的，你的Jenkins左侧栏构建执行状态里将会出现一个任务。

   
   image.png
   

   另外，你也可以试下本地提交代码，提交代码后，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版本。

image.png

3、点击构建，把要执行的命令输进去，多个命令使用&&分开。

image.png
4、保存。
5、此时本地修改一下代码push测试一下（也可以点击立即构建测试），点击本次触发的那个任务，选择控制台输出，将会看到Jenkins在云端执行的过程。
命令行最后一行是Finished状态的如果是SUCCESS（蓝色）则证明执行的任务都顺利进行，是FAILURE（红色）则证明中间有重大错误导致任务失败，UNSTABLE（黄色）代表有虽然有些小问题，但不阻碍任务进行，黄色或者红色可以去命令行看下错误输出，看下哪里出了问题。
image.png

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

image.png
至此，我们已经搭建了一个简易的构建工作流程。

参考掘金文章：实战笔记：Jenkins打造强大的前端自动化工作流