In the previous company, we use front-end webpack build the project, the project is built, we will use some commands or tools linux ftp upload our files to the server, although it is possible in this way, but recent interview, people will Q. how do I deploy front-end project, I said we are currently doing so, and finally people will feel very low, there is no final conclusion on short interview. So today to tell you to use Jenkins at github based front-end to achieve integrated automation package deployment front-end resource file.
Jenkins Basic introduction: Jenkins is an open source software project, it is based on a java development of continuous integration tool for the continuous monitoring duplication of work.
Its biggest advantage is: no need to intervene in the operation and maintenance of the development environment or test environment deployment of code, but rather to developers, testers login jenkins build tag or branch of code need to be deployed. The whole process does not require participation in operation and maintenance. So now we want to use jenkins, we first need to install java development environment.
A: install java environment
1) install the default JRE / JDK
Update command: sudo apt-get update
to check whether the installed java: java -version
If the java command does not find the words, it means there is no java installed, so we need to install the java environment.
Need to execute the following command: sudo APT-GET install default-jre
So installs JRE (Java Runtime Environment) if we need to install JDK (Java Development Kit), then use the following command:
sudo apt-get install default-jdk
Then we see the java version java environment to test whether the installation was successful, the following command:
$ java -version
As shown below:
II: Installation jenkins
According to the official documentation ( https://jenkins.io/zh/doc/book/installing/ ) can be installed: Run the following command to install:
$ 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
As shown below:
As above, because I am using their own laptops Huawei, the default is to use a linux system. Therefore, according to the official website of the steps can be installed.
After installation is complete, jenkins file directory as follows:
Installation directory: / var / lib / jenkins
log directory: /var/log/jenkins/jenkins.log
2) Start jenkins
service jenkins start
It will be reported the following error: bash: service: command not found
The solution is: su -root directly to switch to the root user, such as the following command:
$ su - root
Then use the / sbin / service to operate, such as shown in the following command:
$ /sbin/service jenkins start
So we started jenkins, and now we can access in your browser http: // localhost: 8080 /, as shown below:
注意：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.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 [email protected] --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 实现邮件提醒
待续更新中...... (目前还有其他重要的事情要处理)