用Jenkins基于github来实现前端自动化集成打包部署前端资源文件
Jenkins基本介绍: Jenkins是一个开源软件项目，它是基于java开发的一种持续集成工具，它用于监控持续重复的工作。
它最大的优点是：在开发环境或测试环境代码部署都不需要运维介入，而是相关的开发人员，测试人员登录jenkins构建需要部署的tag或分支代码即可。整个过程不需要运维参与。因此我们现在想使用jenkins的话，我们首先需要安装java开发环境。
**一：安装java环境**
1）安装默认的JRE/JDK
**更新命令: sudo apt-get update**
**检查是否安装了java: java -version**
如果java命令没有找到的话，就说明没有安装java，因此我们需要安装java环境。
需要执行如下命令:**sudo apt-get install default-jre**
因此会安装JRE(Java Runtime Environment). 如果我们需要安装JDK(Java Development Kit)的话，请执行如下命令:
**sudo apt-get install default-jdk**
然后我们查看java版本，来测试java环境是否安装成功了，如下命令:
$**java -version**
如下图所示:
**二：安装jenkins**
按照官方文档来([https://jenkins.io/zh/doc/book/installing/](https://jenkins.io/zh/doc/book/installing/))安装即可：执行如下命令来安装:
[](javascript:void(0); "复制代码")
~~~
$ 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
$ sudo apt-get install jenkins
~~~
[](javascript:void(0); "复制代码")
如下图所示:
如上，因为我现在用的是自己的华为笔记本电脑，默认是使用的是linux系统。因此按照官网上的步骤安装即可。
安装完成后，jenkins的文件目录如下：
**安装目录：/var/lib/jenkins**
**日志目录: /var/log/jenkins/jenkins.log**
**2）启动jenkins**
~~~
service jenkins start
~~~
会报如下错误: bash: service: 未找到命令
解决的办法是：直接使用 su -root 来切换到root用户，比如如下命令:
$ su - root
然后使用 /sbin/service 来操作，比如如下所示命令:
~~~
$ /sbin/service jenkins start
~~~
这样我们就启动了jenkins了，现在我们就可以在浏览器下访问 http://localhost:8080/ 即可，如下所示:
**注意：jenkins是部署在本地的，默认端口为 8080;**
浏览器进入Jenkins，登录地址为:**http://localhost:8080/;**
关闭Jenkins的地址为:**http://localhost:8080/exit;**
重启Jenkins的地址为:**http://localhost:8080/restart;**
重新加载配置信息:**http://localhost:8080/reload;**
2.2 在服务器的指定目录找到密码登录
~~~
/var/lib/jenkins/secrets/initialAdminPassword
~~~
因此我们在命令行中运行如下命令即可获取到密码了；如下查看命令:
~~~
$ sudo vim /var/lib/jenkins/secrets/initialAdminPassword
~~~
然后复制密码后填写上去，继续执行下面的步骤即可。
这个过程可能会加载很慢，我们稍等一下后，我们按照默认配置安装插件即可，如下所示:
然后会进入如下页面进行默认安装插件即可，如下所示:
安装完成后，我们需要 创建第一个管理员用户。如下所示：
创建完成后，就可以开始使用jenkins，如下图所示：
接下来我们可以开始使用我们的Jenkins了，如下所示：
**三：Jenkins实现自动化部署**
实现的目标是：我们的本地项目发起一个git提交后，剩下的单元测试, 打包构建，代码部署，邮件提醒等，我们会全部自动化完成部署。
3.1. 准备
首先我们随便准备一个项目(我这边是使用webpack搭建的vue项目了)，在git仓库中新建一个项目，然后把该本地项目提交到github上去。
比如我这边项目如下所示：
**3.2. 在jenkins中绑定github**
我们现在要实现这么一个功能，当我们在本地项目往github远程仓库push我们的代码的时候，jenkins就能知道我们提交了代码，要实现这么一个功能的基本原理是：在远程仓库上需要配置一个Jenkins服务的接口地址，当本地向远程仓库发起push时候，远程仓库会向配置的Jenkins服务器的接口地址发起一个带参数的请求，当jenkins收到后开始工作。
**配置步骤如下：**
**Github配置**
1) 在Github上获取访问token的值，需要一个对项目有写权限的账户。
如果要实现自动构建的话，Jenkins需要获得远程代码仓库Github的读取权。
点击右上角的 Github --> setting --> Developer settting --> Personal access tokens -> 点击Generate new token 填写如下所示的内容：
创建成功后，会生成一个token的值如下：
先保存好这个token，后面会使用到。
**2) 用Ngrok实现内网穿透**
Ngrok的用途是：将内网的IP映射成对外可访问的域名。
国内Ngrok官网可以了解下：[https://www.ngrok.cc/](https://www.ngrok.cc/)
我们需要注册一个账号，注册完成后，我们可以直接添加隧道。如何开通隧道，可以看这篇文章([https://www.sunnyos.com/article-show-67.html](https://www.sunnyos.com/article-show-67.html))
开通完成后，我们变成如下这个样子了，如下图所示：
现在我们需要点击上图的客户端下载，下载自己系统对应的客户端。然后压缩后，文件夹内会有一个 叫 sunny 这个bat文件，我们进入下载目录的文件夹下，使用linux移动命令把该批处理文件移动到 /usr/local/bin 目录下即可；命令如下所示:
~~~
$ sudo mv sunny /usr/local/bin
~~~
然后我们进入 /usr/local/bin 目录下，运行命令: ./sunny clientid 隧道id; 即可，隧道id就是我们刚刚生成的。比如如下所示：
运行该命令后，我们回车可以看到如下信息了，如下图所示：
因此我们现在访问：http://kongzhi.free.idcfengye.com 就可以访问对应的本地服务 http://127.0.0.1:8080/ 服务了。如下所示：
**3）Github webhooks设置**
进入Github上指定的项目 --> setting -> WebHooks --> add webhook, 如下图所示：
完成后，点击下面 add webhooks 按钮，即可创建完成，如下图所示:
Jenkins的github配置
**4）安装Github Plugin**
点击 Manage Jenkins -> Manage Plugins -> 可选插件， 如下图所示:
点击下面的 "直接安装" 按钮, Jenkins会自动帮我们解决插件的依赖。如下图所示：
**5）配置Github Plugin**
Manage Jenkins -> Configure System -> Github -> 点击添加Github服务器， 如下图所示：
API URL 默认为：https://api.github.com，我们不动它，然后凭据点击 Add添加，如下图所示：
如上，我们之前已经生成了token之后。在如上配置中，我们页面中的类型选择 Secret text，在Secret中黏贴Github生成的Token，id和描述可以随便写，或不填。
最后点击添加按钮后，会回到主页面，在凭据中选择我们刚才创建的凭据，然后我们点击 "链接测试"。如果没有成功的话，则需要返回重新操作以上步骤，如下所示，我们只要点击保存完成配置即可，如下图所示:
到这里，基础配置已经完成了。
**3.3. Jenkins中创建任务**
1) 点击创建一个新任务，如下图所示：
输入一个任务名称，比如叫 testJekins, 然后选择第一项即可。如下图所示：
因此准备工作已经完成了，我们输入任务名称后，选择第一项后，点击底部的确定按钮，就可以进入下一步的页面了，如下图所示:
如上选择Github，填写项目的URL，该地址是我们Github上的主页地址，不是github资源地址。
**2). 源码管理配置**
打开刚刚我们创建的任务，切换到 "源码管理" tab项，然后在左侧选择 Git，然后我们把我们的github项目中的仓库地址，添加配置登录名和密码(点击添加会弹出一个框，我们默认操作就行)，及分支。如下图所示：
**3). 构建触发器**
**4). 构建环境**
****
其他暂时不用配置。配置完成后，我们再回到列表页面，看到基本的效果如下图所示，现在我们在本地项目代码再push一下，看是否发生了变化。
如上我们可以看到，我们每次代码push的时候，Jenkins会自动帮我们构建一次，但是它有几秒钟的延迟，如果我们立即push完成后，刷新页面后，并没有立即看到构建完成，而要过几秒钟再看下就可以了。
我们也可以看看控制台输出的信息也可以看得到如下信息，代表构建成功了。如下：
我们也可以看得到，我们的testJenkins项目中也有我们github上的项目中的所有文件，如下所示:
如上只是简单使用我们的github中的push命令后，在Jenkins中构建一下我们的代码，但是我们都明白我们希望的是，我们的push命令后，在Jenkins上会帮我们自动打包，比如像webpack中一样，调用npm run build 这样的命令后，打包到dist文件夹内，然后把dist文件夹内的所有代码放到ftp服务器下，因此我们想使用jenkins是否也能实现这样的呢？
**5). 实现自动化构建**
如上git push 触发钩子后，jenkins就可以开始工作了，我们之前使用webpack打包的，我们现在放到Jenkins来做这件事。
在我们的package.json 文件中有如下二个命令:
~~~
"scripts": {
"dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
"build": "webpack --progress --colors --devtool cheap-module-source-map"
},
~~~
为了能在Jenkins能自动打包构建，首先我们需要安装依赖包，使用命令：npm install,最后使用npm run build 构建文件。因此会使用到如下两个命令:
~~~
npm install
npm run build
~~~
我们想要在jenkins里面执行npm命令的话，首先我们需要在jenkins里面配置node环境，我们可以通过配置环境变量的方式引入node，也可以通过安装插件的方式来引入的，我们这边使用插件的方式吧，安装一下 nvm wrapper 这个插件。
**1) 安装NodeJS Plugin**
在插件管理界面搜索NodeJS，找到后，安装，重启，如下所示：
**2) 安装NodeJS**
Manage Jenkins -> Global Tool Configuration -> NodeJs(点击新增NodeJS按钮) 如下图所示:
点击保存按钮即可。
**3) 在构建环境配置下安装nodejs**
构建环境勾选 Provide Node & npm bin/folder to PATH，如下图所示：
每次build，都会首先执行环境构建，如果环境没有错误后，才会开始真正的实现构建过程。
**4) 构建**
我们现在可以把我们的打包命令放到构建中了，在构建过程中会执行该命令进行打包。如下命令：
npm config set registry http://registry.npm.taobao.org/ && npm install && rm -rf dist && npm run build
如下所示：
然后我们就可以点击保存按钮了。
此时我在本地项目中改下代码，然后使用git push代码上去的时候，就可以测试下，在push的过程中，再看看Jenkins中如下所示：
然后点击下面正在的的构建，控制台输出选项，如下图所示：
选择查看控制台就可以看到构建输出的信息了，如下图所示：
等构建完成后，命令行最后一行是Finished的状态如果是SUCCESS，则证明执行的任务顺利完成了。如果是FAILURE则证明中间有重大错误导致任务失败。UNSTABLE代表有些小问题，但是不阻碍任务执行。
代码在构建的过程中，会报如下的错误：
解决的办法在命令行中运行命令: sudo npm -g install phantomjs-prebuilt@2.1.16 --ignore-script
稍等一会儿，我们可以看到构建成功信息了，如下图所示：
然后我们点击项目的工作空间，将会发现多了dist和node\_modules两个文件夹了。如下图所示:
如上我们的代码已经自动构建完成了，但是我们目前还没有部署到某个服务器上去，因此我们现在要实现这么一个功能。
**6). 实现自动化部署**
自动化部署功能是需要的，因为如果公司只有一台服务器，我们可以使用人工部署的方式，但是如果公司有10台服务器甚至更多的话，如果使用人工方式，就很吃力了，并且一旦线上出问题了，回滚操作也比较麻烦。所以我们需要实现一个自动化部署的功能。
先在Jenkins上安装一个 Public Over SSH 插件，我们将会通过这个工具来实现服务器部署的功能。
**1) 安装插件**
点击 Manage Jenkins -> Manage Plugins -> 可选插件中，搜 Public Over SSH 插件，点击安装，安装完成后，重启Jenkins
如下图所示：
**2）配置**
点击 Manage Jenkins -> Configure System -> 拉倒最下面就有该窗口了，如下所示：
**配置项的含义如下**
Passphrase: 密码(key的密码，如果没有的话就不填写)
Path to key: key文件(私钥)的路径
SSH Server Name: 标示的名称(随便写)
Hostname: 需要链接ssh的主机名或ip地址，建议写服务器ip
Username： 用户名
Remote Directory: 远程目录(服务器文件目录: 比如 /usr/local/nginx/pcweb/)
如上填写完成后，点击保存按钮即可，我本地电脑没有对应的服务器，因此暂时不测试了。
配置完成后，我们需要到我们创建的任务，点击构建项tab，增加2行代码，如下：
~~~
cd dist && tar -zcvf dist.tar.gz *
~~~
含义是：进入dist文件夹内，把所有的文件打包成一个文件。如下所示：
点击构建后操作，增加构建后操作步骤，选择send build artificial over SSH，然后会弹出一个框，如下图所示：
**参数说明:**
Name: 选择一个我们配好的SSH服务器
Source files: 我们要传输的文件路径
Remove prefix: 要去掉前缀，不写远程服务器的目录结构，和Source files 写的一致。
Remote directory: 要写部署在远程服务器的那个目录地址下，如果我们不写的话，就是SSH Servers配置里面的默认远程目录。
Exec command: 传输完了要执行的命令，我们可以执行解压缩和解压缩完成后删除压缩包的2个命令。
因此
Source files 可以填写：dist/dist.tar.gz; 这样的。
Remove prefix 可以写成： dist/
Exec command可以写成如下命令:
cd testJenkins
tar -zxvf dist.tar.gz
rm -rf dist.tar.gz
最后我们点击保存按钮即可，现在我们在我们的本地修改完代码后，直接git push，在jenkins会自动构建打包，且会自动部署到我们服务
器代码上了。
**3.3 实现邮件提醒**
- 开篇卷
- 一.koa基础
- 1.koa基础之开发环境搭建
- 2.koa基础之路由
- 3.koa基础之路由另一种写法
- 4.koa基础之get 传值 以及获取 get 传值
- 5.koa 基础之动态路由的传值
- 6.koa基础之ejs模板的使用
- 7.koa基础之From表单提交get与post数据
- 8.koa基础之koa-bodyparser 中间件获取表单提交的数据
- 9.koa基础之koa-static 静态资源中间件 静态web服务
- 10.koa基础之koa-art-template 模板引擎的使用
- 11.koa基础之cookie 的基本使用
- 12.koa基础之koa中session的使用
- 13.koa基础之重定向
- 二.koa进阶
- koa对文件操作
- 上传文件
- 上传单个文件
- 上传多个文件
- 下载文件
- 下载单个文件
- 下载多个文件
- 参考文章
- koa模块化路由
- koa 允许跨域
- koa 应用生成器
- koa对数据库操作
- koa对mongodb的操作
- koa对redis的操作
- koa对mysql的操作
- koa对sqlite操作
- koa与elasticsearch的操作
- koa与PostgreSQL的操作
- koa与Neo4j的操作
- koa-static
- koa的async与await使用
- koa模板引擎
- art-template
- ejs模板引擎
- koa-jsonp使用
- 分页 jqPaginator_koa
- Koa2 ueditor
- koa-multer
- koa-session
- koa-cors
- koa全局变量定义
- koa-compress中间件
- 全球公用头像的使用
- token生成
- koa-passport
- Koa RESTful Api接口
- Koa中集成GraphQl实现 Server API 接口
- koa集成Swagger
- koa 二维码的实现
- 三.koa实战
- 一.koa与IM实战
- koa和websocket实战
- koa与Socket.io实战
- koa与WebRTC实战
- 二.koa与Web实战
- 三.koa与react实战
- 四.koa与vue实战
- 五.微信公众号开发
- 四.koa微服务
- 微服务框架
- Tars.js
- Seneca.js
- dubbo.ts
- 番外篇
- koa开发环境搭建
- Koa中间件
- koa中间件的执行顺序
- 浅谈koa中间件的实现原理
- async和await详解
- Async/Await原理解析
- koa文章参考
- 其他参考
- 网上学习资源
- json-server
- Jenkins打包指南
- 前端工作流规范
- 结束篇