在之前的公司，我们前端使用webpack构建项目，项目构建完成后，我们会使用ftp或linux的一些命令工具上传我们的文件到服务器上，这种方式虽然是可以，但是最近面试的时候，人家会问我前端如何部署项目，我就说我们公司目前是这样操作的，最后人家会感觉很low，最后总之总之没有面试上。因此今天来给大家介绍下使用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/)安装即可：执行如下命令来安装:

$ wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -sudo sh -c 'echo deb upload/201911281625146627.gif" alt="复制代码" style="border-width: initial !important; border-style: none !important; border-color: rgb(221, 221, 221); border-image: initial !important; background-color: rgb(255, 255, 255); max-width: 700px !important; height: auto;" />

如下图所示:

如上，因为我现在用的是自己的华为笔记本电脑，默认是使用的是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了，现在我们就可以在浏览器下访问 upload/201911281625157184.png" alt="" style="border: 0px; max-width: 700px !important; height: auto;" />

注意：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的值如下：