出现了！前端自动化部署！ （3）- Jenkins Giao起来！

Jenkins Giao起来！

Jenkins 是什么鬼

咱们的正主Jenkins终于要来了，哈哈哈，老规矩，看一下Jenkins是干吗的，百度百科走起：

你们看到Java也无需惧怕，我不想知道管是怎么开发滴，我就想知道它是怎么使用滴（请脑补德彪口音），给一个简单的解释吧，jenkins可让咱们把一些经常使用的配置的操做集成成一个工做流任务，在须要的时候去执行这个任务就能够了。

好比，咱们即将要作的动做是将github上的代码（没错，趁大家不注意我已经把项目的代码上传到github仓库了！）拉取到服务器上，而后进行npm run build来打包，再将打包后的资源文件放到～/nginx/www里面, 这样当咱们访问nginx服务器的时候，nginx就能够给浏览器返回这些文件，页面也就渲染出来了哟，那么这么一套繁琐的步骤在没有jenkins以前是怎么作的呢？

---

代码部署方式

实现代码部署的方式不少，咱们能够在远端去pull代码，而后运行 npm install && npm run build等等的动做，也能够在本地打包好代码后用上一篇的方法将其传输到服务器上（也能够用ftp软件来进行传输），总之很麻烦了。

而如今只须要配置一个jenkins任务，在代码push到github以后直接执行这个jenkins任务就能够了，是否是很简单，并且，jenkins来能够去配置一个连接github仓库的webhook钩子，到时候只要咱们push代码到github仓库的某个分支，jenkins对应的任务就会自动执行，真的是居家旅行，杀人越货，不对，是代码部署的必备神器呀。

---

Jenkins的使用

好啦，那么接下来咱们就去giao起来吧。

安装运行Jenkins

首先，jenkins能够脱离docker安装在服务器上，可是既然咱们有了docker，那就直接由docker来拉取运行一个jenkins容器吧。

docker run \
  --rm \
  -u root \
  -p 8080:8080 \
  -v jenkins-data:/var/jenkins_home \ 
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v "$HOME":/home \ 
  jenkinsci/blueocean
复制代码

\是换行符啦，一行放不下分开放。-u 服务器用户名，-p仍是映射端口，咱们访问服务器的8080端口就会访问到这个容器的8080端口了（jenkins服务默认开启的就是8080端口），还有一句 比较重要

-v "$HOME":/home
复制代码

这个意思就是jenkins访问的/home目录，其实就是你服务器的$HOME目录（其实默认的就是~目录啦，~就是/root啦），上面两句都是自动的，能够不用理会，jenkinsci/blueocean就是咱们的镜像名字，蓝海（blueocean）是一个UI比较精美的jenkins的工做流任务台，我猜测它的做者确定是海贼王的影迷，233333

配置Jenkins

这个时候咱们能够访问 http://ip地址:8080 来配置jenkins了。

解锁Jenkins

首先须要解锁一下jenkins：

1. 获取一下密码, 就在终端里面哟

   

2. 把密码填写到页面上解锁

3. 点击continue继续

选择插件，创建管理员帐号

解锁以后须要去选择一些jenkins的插件配置，若是不知道选择什么的话，就选择默认的插件吧，后面再自行更改。
接下来建立一个管理员帐号，而后登录进去就能够了。

编写Jenkinsfile文件

好的，下一个步骤咱们该去建立任务而后执行了，在这里咱们先停下来去作另外一个事情吧，那就是在本地的web项目中建立一个Jenkinsfile文件（注意，没有后缀名哟），这个文件就像gulp中的gulpfile.js、webpack中的webpack.config.js同样来编写任务的，格式也很简单：

pipeline {
 # 这里是要依赖的镜像，由于咱们的代码须要在服务器上打包，因此须要node环境
 # 在这里配置一下让那个docker去启动一个node的容器（启动的时候若是没有node:8.16.1-alpine镜像会自动pull，不用担忧）
    # node运行后端口为3000:3000（这种端口映射不用说了吧）
    agent {
        docker {
            image 'node:8.16.1-alpine'
            args '-p 3000:3000'
        }
    }
    # 配置环境变量
    environment { 
        CI = 'true'
    }
    # 任务的具体动做（每个stage都是一个动做），形式是流式的，说白了就是上面的执行完下面的执行
    stages {
    	# 首先先去打包构建
        stage('Build') {
        	# steps表明步骤，一个stage能够设置多个steps，每个sh后面跟着的就是这个步骤所执行的代码
            # 一个steps也能够设置多个sh
            steps {
            	# 这里须要先去下载项目全部的包（这就是咱们运行node容器的缘由，没有node下载个毛线）
                # 使用yarn是由于npm实在是太慢了（不会用yarn就去学一下），yarn不须要单独下载，node:8.16.1-alpine镜像中已经下载好了
                # 若是用到node-sass的话配置一下node-sass的下载地址，否则就算是yarn下载起来也是贼慢的
                # 再而后执行打包任务
                sh '''      
                    yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
                    yarn
                    yarn build
                '''
            }
        }
 # 打包完了理论上还应该有test的stage，算了算了，一切从简
        # 直接部署代码
        stage('Deliver') { 
        	# 先清空/home/nginx/www/react-mixture目录，为何是/home而不是~路径呢？由于咱们在启动jenkins
            # 容器的时候就配置了，jenkins访问/home其实就是在访问$HOME(就是~,也就是/root)
            # 而后把打包出来的build文件夹里的全部文件扔过去（vue-cli打包后应该是dist目录），nginx服务器就能够访问到这些文件了，部署就完成了
            steps {
                sh '''             
                    rm -rf /home/nginx/www/react-mixture/*
                    mv ./build/* /home/nginx/www/react-mixture
                '''
            }
        }
    }
}
复制代码

这个配置是否是很是很是的简单呢，哈哈哈，而后把代码提交到github仓库就能够了。

可是不要高兴的太早，个人乞丐版服务器运行yarn build基本上必失败，没办法，运行内存过小了，因此我只能选择在本地打包好代码提交到github，jenkins去帮我直接移动代码到nginx了。大家的服务器若是ok的话能够安装上面的来，和我同样乞丐版的能够参考下面的Jenkinsfile：

pipeline {
 # 不须要node容器了
    agent any
    environment { 
        CI = 'true'
    }
    # 下面也没啥看的，直接把代码从githu分支里拉出来后扔到nginx www里了
    stages {
        stage('Build') {
            steps {
                sh ''
            }
        }
        stage('Deliver') { 
            steps {
                sh '''
                    rm -rf /home/nginx/www/react-mixture/*
                    mv ./build/* /home/nginx/www/react-mixture
                '''  
            }
        }
    }
}
复制代码

ok，Jenkinsfile写好后就能够去jenkins里建立个任务啦，一步一步来哟。

建立 Jenkins 任务流

任务流是Jenkins中的基本单元，咱们分开步骤来作吧：

1. jenkins主页面左侧导航中选择建立任务

2. 填写任务名，选择流水线（pipeline）后肯定。

3. 配置任务相关信息

描述的话能够填写一下这个任务的描述，构建触发器中选择 “GitHub hook trigger for GITScm polling” 是为了之后创建webhook的（就是当github仓库push代码的时候自动触发任务执行），高级选项中定义流水线 “Pipeline Script from SCM” 以及SCM中选择GIT也是为了webhook，仓库的url建议你们填写https类型连接的，这样远程服务器就会利用https方式去github拉取代码，若是选择了ssh连接的话，还须要将远程服务器的ssh key配置在github中，有点麻烦哟，下面分支就填写要触发任务执行并拉取代码的分支就行了，好比我选择的github分支就是build分支。

进入蓝海，成为海贼王！

任务创建完成后会自动跳转到任务的详情页（也能够从任务列表中点击任务进入详情），而后选择在 BlueOcean中进行操做（主要是由于UI好看）。

进入到BlueOcean后，咱们能够选择运行任务：

而后每次任务的运行均可以在下面table中查看到，点击进去详情还能够看到这次运行的具体状况。

若是失败的话查看一下哪里失败了再来，成功的话那就ok了，此次自动部署就结束了啊，很简单哟，须要注意的是，远程链接总是断掉，并且jenkins仍是崩掉，从新链接服务器，从新docker run就好啦。

Webhook钩子

ok，若是咱们想作到每次push代码都会自动执行任务的话，还须要一些操做哟。

咱们先去在jenkins首页中找到系统设置：

而后找到Github后点击高级设置后勾选 “为 Github 指定另一个 Hook URL”，下面的url地址不要改动就行了，而后就能够保存啦。

而后去到github仓库中进入Settings设置界面选择web hook后点击add webhook去添加一个钩子：

而后对钩子作一些配置，填入刚才的URL，选择那些动做能够触发钩子等等：

这样配置完成后，到咱们在对应的分支进行push的时候，jenkins就会自动的执行咱们配置好的任务，进行自动化部署啦。

---

后语

进行到这里确定很是不容易吧，我只是为你们指出了一条“较为简单”的直达路线，可是具体的关于自动化部署的知识仍是须要你们本身慢慢摸索学习，若是碰到问题也不要慌张，一点一点的解决就好啦，好啦，就说这么多！

がんばれ、少年!