前端自动化部署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
				

如果不能安装就到官网下载jenkisrmp包,官网地址(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端口,在浏览器中直接访问该端进行服务配置
  • JenkinsRPM仓库配置被加到/etc/yum.repos.d/jenkins.repo

4、打开jenkins 

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

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第1张图片

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

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第2张图片

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第3张图片

创建超级管理员账号 

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第4张图片

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第5张图片

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

创建任务

  1. 点击创建一个新任务

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第6张图片

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

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第7张图片

至此,基础准备工作已经完成,我们在服务器上安装了Jenkins并启动,然后进行了初始化配置,建立了一个新任务。接下来我们开始配置我们需要的功能。

 

实现git钩子功能

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

  1. 打开刚创建的任务,选择配置,添加远程仓库地址,配置登录名及密码及分支。
    前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第8张图片
  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即可
    前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第9张图片
  2. 仓库配置钩子 此处以准备工作的码云仓库为例,因为公司用的是码云,github的配置基本一致,进入码云项目主页后,点击管理-webhooks-添加,会跳出一个这样的框来。

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第10张图片
URL格式为 http://:@:端口/generic-webhook-trigger/invoke (注意下英文符号编写 ) userid和api token在jenkins的系统管理-管理用户-admin-设置里,没有的话生成个。这是我的

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

如:

http://admin:[email protected]:8080/generic-webhook-trigger/invoke

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第11张图片

 

  1. 测试钩子

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第12张图片
点击测试,如果配置是成功的,你的Jenkins左侧栏构建执行状态里将会出现一个任务。

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第13张图片

另外,你也可以试下本地提交代码,提交代码后,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版本。

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第14张图片

 

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

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第15张图片

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

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第16张图片

 

命令行最后一行是Finished状态的如果是SUCCESS(蓝色)则证明执行的任务都顺利进行,是FAILURE(红色)则证明中间有重大错误导致任务失败,UNSTABLE(黄色)代表有虽然有些小问题,但不阻碍任务进行,黄色或者红色可以去命令行看下错误输出,看下哪里出了问题。


前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第17张图片

 

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

 

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第18张图片

至此,我们已经搭建了一个简易的构建工作流程,构建完成了,我们需要自动化部署。

 

如果失败了一般是npm安装失败,建议单页面部署不需要上面说的命令,直接本地打包把dist文件夹提交仓库

 

实现自动化部署

自动化部署可能是我们最需要的功能了,公司就一台服务器,我们可以使用人工部署的方式,但是如果公司有100台服务器呢,人工部署就有些吃力了,而且一旦线上出了问题,回滚也很麻烦。所以这一节实现一下自动部署的功能。

  1. 首先,先在Jenkins上装一个插件Publish Over SSH,我们将通过这个工具实现服务器部署功能。
  2. 在要部署代码的服务器上创建一个文件夹用于接收Jenkins传过来的代码,我在服务器上建了一个testjenkins的文件夹。
  3. Jenkins想要往服务器上部署代码必须登录服务器才可以,这里有两种登录验证方式,一种是ssh验证,一种是密码验证,就像你自己登录你的服务器,你可以使用ssh免密登录,也可以每次输密码登录,系统管理-系统设置里找到Publish over SSH这一项。 重点参数说明: (详细看下文的错误解决)
Passphrase:密码(key的密码,没设置就是空)
Path to keykey文件(私钥)的路径
Key:将私钥复制到这个框中(path to keykey写一个即可)

 

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,失败会返回报错信息,根据报错信息改正即可。

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第19张图片

 


由于配置原因造成一下错误 (参考链接
错误: jenkins.plugins.publish_over.BapPublisherException: Failed to connect session for config [131]. Message [Auth fail]

配置方法:

1、生成密钥
我的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
2、进入到目录进行查看
[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
3、将公钥拷贝到authorized_keys文件
[jenkins@jenkins .ssh]$ cat id_rsa.pub >> authorized_keys    
4、将生成的authorized_keys拷贝到要连接的linux机器上的对应用户或者直接root下的.ssh文件夹下
[jenkins@jenkins .ssh]$ scp authorized_keys [email protected]:/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!
[email protected]'s password:
authorized_keys                                                                 100%  397     0.4KB/s   00:00  
5、配置SSH Server 左上角的jenkins-->系统管理-->系统设置

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第20张图片

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

 

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第21张图片

 

 

4. 接下来进入我们创建的任务,点击构建,增加2行代码,意思是将dist里面的东西打包成一个文件,因为我们要传输。

cd dist&&
tar -zcvf dist.tar.gz *
完整示例(不推荐)

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第22张图片

 

推荐本地打好包直接:

 

5. 点击构建后操作,增加构建后操作步骤,选择send build artificial over SSH, 参数说明:

Name:选择一个你配好的ssh服务器
Source files :写你要传输的文件路径
Remove prefix :要去掉的前缀,不写远程服务器的目录结构将和Source files写的一致
Remote directory :写你要部署在远程服务器的那个目录地址下,不写就是SSH Servers配置里默认远程目录
Exec command:传输完了要执行的命令,我这里执行了解压缩和解压缩完成后删除压缩包2个命令
				

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第23张图片

 

 

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

nginx配置改动下:

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第24张图片

注意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

 

 

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第25张图片

保存

 

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

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第26张图片

 

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

 

实现邮件提醒

这里我们不用E-mail Notification,因为它的邮件服务功能太少,无法自定义邮件内容及自定义触发钩子,而且只能在异常情况下才能发邮件。我们使用Editable Email Notification这个。

  1. 打开系统管理-系统配置-Extended E-mail Notification,不是系统管理-系统配置-邮件通知,千万不要配错了,否则不起作用。配置一下用来发邮件的邮箱,我这里用的是我自己的qq邮箱。

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第27张图片

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

打开创建的那个任务,增加构建后操作步骤选择Editable Email Notification,Project Recipient List那里写你要发给谁邮件,可以多个,用分号隔开。

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第28张图片

然后点击Advanced Settings-Triggers-Add Trigger,选择always,意思是无论什么情况任务执行完就发邮件,也可以选择其他模式,如任务执行异常了才发邮件。

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第29张图片

 

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

前端自动化部署linux centOs + Jenkins + nignx + 单页面应用_第30张图片

转载于:https://www.cnblogs.com/liuming666/p/11529209.html

你可能感兴趣的:(前端自动化部署linux centOs + Jenkins + nignx + 单页面应用)