前端自动化部署linux centOs + Jenkins + nignx + 单页面应用

Jenkins是什么？

Jenkins 是一款业界流行的开源持续集成工具，普遍用于项目开发，具备自动化构建、测试和部署等功能。

 

准备工做

Linux centOS系统阿里云服务器一个

码云一个存放vue项目的仓库

 

开始安装与初始化

1、安装JDK

yum install -y java 

2、安装jenkins

添加Jenkins库到yum库，Jenkins将从这里下载安装。

1 wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo

2 rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key

3 yum install -y jenkins 

若是不能安装就到官网下载jenkis的rmp包，官网地址（http://pkg.jenkins-ci.org/redhat-stable/）

1 wget http://pkg.jenkins-ci.org/redhat-stable/jenkins-2.7.3-1.1.noarch.rpm

2 rpm -ivh jenkins-2.7.3-1.1.noarch.rpm 

配置jenkis的端口（可用xshell可视化编辑保存）

 vi /etc/sysconfig/jenkins 

找到修改端口号：

JENKINS_PORT="8080"  此端口不冲突能够不修改 

3、启动jenkins

service jenkins start/stop/restart 

• 安装成功后Jenkins将做为一个守护进程随系统启动
• 系统会建立一个"jenkins"用户来容许这个服务，若是改变服务全部者，同时须要修改/var/log/jenkins, /var/lib/jenkins, 和/var/cache/jenkins的全部者
• 启动的时候将从/etc/sysconfig/jenkins获取配置参数
• 默认状况下，Jenkins运行在8080端口，在浏览器中直接访问该端进行服务配置
• Jenkins的RPM仓库配置被加到/etc/yum.repos.d/jenkins.repo

4、打开jenkins 

在浏览器中访问 
首次进入会要求输入初始密码以下图， 
初始密码在：/var/lib/jenkins/secrets/initialAdminPassword 

选择"Install suggested plugins"安装默认的插件，下面Jenkins就会本身去下载相关的插件进行安装。 

建立超级管理员帐号 

参考： centos下搭建Jenkins持续集成环境(安装jenkins)

建立任务

1. 点击建立一个新任务

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

至此，基础准备工做已经完成，咱们在服务器上安装了Jenkins并启动，而后进行了初始化配置，创建了一个新任务。接下来咱们开始配置咱们须要的功能。

 

实现git钩子功能

首先咱们要实现一个git钩子功能，就是咱们向github/码云等远程仓库push咱们的代码时，jenkins能知道咱们提交了代码，这是自动构建自动部署的前提，钩子的实现原理是在远端仓库上配置一个Jenkins服务器的接口地址，当本地向远端仓库发起push时，远端仓库会向配置的Jenkins服务器的接口地址发起一个带参数的请求，jenkins收到后开始工做。

1. 打开刚建立的任务，选择配置，添加远程仓库地址，配置登陆名及密码及分支。
   
2. 安装Generic Webhook Trigger Plugin插件（系统管理-插件管理-搜索Generic Webhook Trigger Plugin）若是可选插件列表为空，点击高级标签页，替换升级站点的URL为： http://mirror.xmission.com/jenkins/updates/update-center.json而且点击提交和当即获取。

或者你直接去官网搜索下载.hpi文件，而后在高级那上传插件也行（参考连接）

1. 添加触发器
   第2步安装的触发器插件功能很强大，能够根据不一样的触发参数触发不一样的构建操做，好比我向远程仓库提交的是master分支的代码，就执行代码部署工做，我向远程仓库提交的是某个feature分支，就执行单元测试，单元测试经过后合并至dev分支。灵活性很高，能够自定义配置适合本身公司的方案，这里方便演示咱们不作任何条件判断，只要有提交就触发。在任务配置里勾选Generic Webhook Trigger便可
   
2. 仓库配置钩子 此处以准备工做的码云仓库为例，由于公司用的是码云，github的配置基本一致，进入码云项目主页后，点击管理-webhooks-添加，会跳出一个这样的框来。

URL格式为 http://<User ID>:<API Token>@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke （注意下用英文符号编写 ） userid和api token在jenkins的系统管理-管理用户-admin-设置里，没有的话生成个。这是个人

Jenkins IP地址和端口是你部署jenkins服务器的ip地址，端口号没改过的话就是8080。
密码填你和上面userid对应的密码，我这里是root。
下面的几个选项是你在仓库执行什么操做的时候触发钩子，这里默认用push。
点击提交完成配置。

如：

http://admin:110ca60a40ffd1d3dac63adc4d01510f2e@120.79.40.118:8080/generic-webhook-trigger/invoke

 

1. 测试钩子

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

另外，你也能够试下本地提交代码，提交代码后，jenkins也会开始一个任务,目前咱们没有配置任务开始后让它作什么，因此默认它只会在你提交新代码后，将新代码拉取到jenkins服务器上。到此为止，git钩子咱们配置完成。

 

实现自动化构建（演示而已，npm包安装可能有问题）

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版本。

 

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

1. 保存
2. 此时本地修改一下代码push测试一下（也能够点击当即构建测试），点击本次触发的那个任务，选择控制台输出，将会看到Jenkins在云端执行的过程。

 

命令行最后一行是Finished状态的若是是SUCCESS（蓝色）则证实执行的任务都顺利进行，是FAILURE（红色）则证实中间有重大错误致使任务失败，UNSTABLE（黄色）表明有虽然有些小问题，但不阻碍任务进行，黄色或者红色能够去命令行看下错误输出，看下哪里出了问题。

 

1. 若是上一步是SUCCESS，点击项目的工做空间，将会发现多了dist和node_modules两个文件夹。

 

至此，咱们已经搭建了一个简易的构建工做流程，构建完成了，咱们须要自动化部署。

 

若是失败了通常是npm安装失败，建议单页面部署不须要上面说的命令，直接本地打包把dist文件夹提交仓库

 

实现自动化部署

自动化部署多是咱们最须要的功能了，公司就一台服务器，咱们可使用人工部署的方式，可是若是公司有100台服务器呢，人工部署就有些吃力了，并且一旦线上出了问题，回滚也很麻烦。因此这一节实现一下自动部署的功能。

1. 首先，先在Jenkins上装一个插件Publish Over SSH，咱们将经过这个工具实现服务器部署功能。
2. 在要部署代码的服务器上建立一个文件夹用于接收Jenkins传过来的代码，我在服务器上建了一个testjenkins的文件夹。
3. Jenkins想要往服务器上部署代码必须登陆服务器才能够，这里有两种登陆验证方式，一种是ssh验证，一种是密码验证，就像你本身登陆你的服务器，你可使用ssh免密登陆，也能够每次输密码登陆，系统管理-系统设置里找到Publish over SSH这一项。 重点参数说明： （详细看下文的错误解决）

Passphrase：密码（key的密码，没设置就是空）

Path to key：key文件（私钥）的路径

Key：将私钥复制到这个框中(path to key和key写一个便可) 

 

SSH Servers的配置：

SSH Server Name：标识的名字（随便你取什么）

Hostname：须要链接ssh的主机名或ip地址（建议ip）

Username：用户名

Remote Directory：远程目录（上面第二步建的testjenkins文件夹的路径）

 

高级配置：

Use password authentication, or use a different key：勾选这个可使用密码登陆，不想配ssh的能够用这个先试试

Passphrase / Password：密码登陆模式的密码

Port：端口（默认22）

Timeout (ms)：超时时间（毫秒）默认300000复制代码

配置完成后，点击Test Configuration测试一下是否能够链接上，若是成功会返回success，失败会返回报错信息，根据报错信息改正便可。

 

因为配置缘由形成一下错误 （参考连接）
错误： jenkins.plugins.publish_over.BapPublisherException: Failed to connect session for config [131]. Message [Auth fail]

配置方法： 

一、生成密钥
个人jenkins服务安装在了linux下的jenkins用户下
[jenkins@jenkins ~]$ ssh-keygen  
Generating public/private rsa key pair.
Enter file in which to save the key (/home/jenkins/.ssh/id_rsa): //密钥生成路径，直接默认回车便可
Created directory '/home/jenkins/.ssh'.
Enter passphrase (empty for no passphrase):  //默认回车
Enter same passphrase again: //默认回车
Your identification has been saved in /home/jenkins/.ssh/id_rsa.
Your public key has been saved in /home/jenkins/.ssh/id_rsa.pub.
The key fingerprint is:
c0:3d:31:ee:81:b6:5d:5f:d7:83:96:a3:92:85:e0:ab jenkins@jenkins
二、进入到目录进行查看
[jenkins@jenkins ~]$ cd .ssh/
[jenkins@jenkins .ssh]$ ll
total 8
-rw-------. 1 jenkins jenkins 1671 Jul 17 23:23 id_rsa
-rw-r--r--. 1 jenkins jenkins  397 Jul 17 23:23 id_rsa.pub
三、将公钥拷贝到authorized_keys文件
[jenkins@jenkins .ssh]$ cat id_rsa.pub >> authorized_keys     
四、将生成的authorized_keys拷贝到要链接的linux机器上的对应用户或者直接root下的.ssh文件夹下
[jenkins@jenkins .ssh]$ scp authorized_keys root@192.168.0.91:/home/root/.ssh 
The authenticity of host '192.168.0.91 (192.168.0.91)' can't be established.
RSA key fingerprint is ff:dc:00:df:2c:40:70:63:95:ad:53:85:b7:8a:15:06.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added '192.168.0.91' (RSA) to the list of known hosts.
reverse mapping checking getaddrinfo for bogon [192.168.0.91] failed - POSSIBLE BREAK-IN ATTEMPT!
wqq@192.168.0.91's password: 
authorized_keys                                                                 100%  397     0.4KB/s   00:00   
五、配置SSH Server 左上角的jenkins-->系统管理-->系统设置 

其中Remote Directory：远程目录（写上面第二步建的testjenkins文件夹的路径）能test成功就行

 

 

 

4. 接下来进入咱们建立的任务，点击构建，增长2行代码，意思是将dist里面的东西打包成一个文件，由于咱们要传输。

cd dist&& 

tar -zcvf dist.tar.gz * 

完整示例（不推荐）

 

推荐本地打好包直接：

 

5. 点击构建后操做，增长构建后操做步骤，选择send build artificial over SSH， 参数说明：

Name:选择一个你配好的ssh服务器

Source files ：写你要传输的文件路径

Remove prefix ：要去掉的前缀，不写远程服务器的目录结构将和Source files写的一致

Remote directory ：写你要部署在远程服务器的那个目录地址下，不写就是SSH Servers配置里默认远程目录

Exec command：传输完了要执行的命令，我这里执行了解压缩和解压缩完成后删除压缩包2个命令 

 

 

接着安装好nginx 参考Nginx 安装配置

nginx配置改动下：

注意nginx配置改了后得重启

/usr/local/webserver/nginx/sbin/nginx -s reload # 从新载入配置文件

/usr/local/webserver/nginx/sbin/nginx -s reopen # 重启 Nginx

/usr/local/webserver/nginx/sbin/nginx -s stop # 中止 Nginx

 

 

保存

 

1. 如今当咱们在本地将Welcome to Your Vue.js App修改成Jenkins本地打包后发出一个git push，过一会就会发现咱们的服务器上已经部署好了最新的代码，是否是很6。

 

至此，咱们的自动化部署也完成了，可是若是过程当中有异常怎么办，或是咱们想知道每次Jenkins运行的日志及运行结果，咱们能够经过配置邮件服务来让Jenkins每次完成任务后通知相关人员

 

实现邮件提醒

这里咱们不用E-mail Notification，由于它的邮件服务功能太少，没法自定义邮件内容及自定义触发钩子，并且只能在异常状况下才能发邮件。咱们使用Editable Email Notification这个。

1. 打开系统管理-系统配置-Extended E-mail Notification，不是系统管理-系统配置-邮件通知，千万不要配错了，不然不起做用。配置一下用来发邮件的邮箱，我这里用的是我本身的qq邮箱。

要是用别的厂家的邮箱服务就查下别的邮箱厂家smtp怎么配，用qq邮箱的除了user Name和password其余的和我写同样就行。另外password写的不是qq邮箱的密码，而是开启smtp服务后发短信获取的密码。

打开建立的那个任务，增长构建后操做步骤选择Editable Email Notification，Project Recipient List那里写你要发给谁邮件，能够多个，用分号隔开。

而后点击Advanced Settings-Triggers-Add Trigger，选择always，意思是不管什么状况任务执行完就发邮件，也能够选择其余模式，如任务执行异常了才发邮件。

 

我这里配置的接收邮件的地址也是个人qq邮箱，这个能够根据本身公司的工做流程配。
4. 如今当咱们在本地修改代码后发出一个git push，Jenkins自动构建部署完成后就会给我发一封邮件，邮件附件里会有本次任务的日志。