嘿!Jenkins前端自动化部署

·  阅读 3464

为什么要写这篇文章呢,首先要从一只蝙蝠🦇说起了...
以前我们上线一个项目的方式是本地开发完成,将编译打包的编译产物使用FTP或者其他方式部署在服务器上,这种方式是既繁琐又低效的。所以呢本期将使用Jenkins搭建一套前端自动化部署流水线。

一、前端自动化部署流程介绍

  • 本地代码push到远程仓库
  • 服务器端Jenkins监听到后执行构建任务,拉取代码,执行编译打包,将编译产物部署到web项目工作目录
  • 服务端Nginx反向代理,是客户端可以访问

image.png

二、做点准备

  1. 首先搞一个服务器,我自己的是阿里云(新老用户,优惠多多),操作系统: CentOS 7.6 64位,其他系统可以作为参考。
  2. 使用ssh远程链接服务器,本文是Mac终端工具iTerm2,当然Terminal也可以的,总之能连上远程服务器就可以的
  3. 创建一个代码仓库,本文使用的码云Gitee,毕竟GitHub有些慢...

三、server端配置

安装java环境

sudo yum install java
复制代码

查看版本号

java -verson
复制代码

若有版本号输出,表示安装成功

安装git

sudo yum install git
复制代码

查看版本号

git -version
复制代码

若有版本号输出,表示安装成功

安装 Jenkins

本文采用的方式2

方式1

如果之前使用 Jenkins 导入过 key,忽略此步骤,如果第一次安装则输入如下命令

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
复制代码

安装

yum -y install jenkins
复制代码

这种方式很慢,可以尝试方式2

方式2

1.先将jenkins下载到本地 点击这里,本文是jenkins-2.204.2-1.1.noarch.rpm
2.使用Transmit推到服务器(其他软件/操作系统可以参考)
3.

sudo rpm -ih jenkins-2.204.2-1.1noarch.rpm
复制代码

如果执行报错,可以看下是否有这三个目录,没有则需要创建

image.png

启动Jenkins

service jenkins start
复制代码

如果启动成功,我们在浏览器输入http://服务器地址:8080就能访问到入门页面了,如果不能访问检查8080端口是否被占用

配置Jenkins权限

现在的 Jenkins如果执行shell脚本,还不具备相应权限。需要进行如下操作

sudo vim /etc/sysconfig/jenkins
编辑状态中
JENKINS_USER="root"
复制代码

之后,修改 Jenkins 相关文件夹用户权限

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins
service jenkins restart
复制代码

Jenkins安装插件提速

当我们进入Jenkins中安装插件时会发现慢的丧心病狂,所以从网上找到一个真心不错的方法
首先进入Jenkins更新配置位置,我的是/var/lib/jenkins

$ cd {你的Jenkins工作目录}/updates  #进入更新配置位置 
复制代码

使用sed

$ sed -i 's/http:\/\/updates.jenkins-ci.org\/download/https:\/\/mirrors.tuna.tsinghua.edu.cn\/jenkins/g' default.json && sed -i 's/http:\/\/www.google.com/https:\/\/www.baidu.com/g' default.json
复制代码

这是直接修改的配置文件,如果前边Jenkins用sudo启动的话,那么这里的两个sed前均需要加上sudo

重启Jenkins

四、gitee配置

  1. 创建自己的仓库,上传自己的代码(若没有先注册)
  2. 打开仓库设置添加公钥(服务器公钥)

服务器公钥生成方式
进入服务器

ssh-keygen -t rsa -C "***@163.com"
复制代码

根据提示完成三次回车即可生成 ssh key, 通过 cat ~/.ssh/id_rsa.pub 即可查看服务器的公钥。
添加公钥

image.png

五、配置Jenkins

初始化

  1. 浏览器输入http://服务器地址:8080就能访问到入门页面, 按照提示将密码复制粘贴,点击继续
    image.png

  1. 安装插件,可以选择推荐(由于上面配置了安装插件提速,这里应该会很快,如果还是很慢,或者安装失败,可以先跳过)

image.png

  1. 安装完插件之后要创建用户,创建完成后点击保存并完成
    image.png
  2. 点击开始使用

image.png

创建第一个新任务

进入首页点击新建Item或者开始创建一个新任务,开始我们的第一步

image.png

输入任务名,比如self-project,选择构建一个自由风格的软件项目
image.png

进入任务实例中,点击配置,进入任务配置页面
image.png

Git hook

现在要搞一下git钩子功能,当我们本地向远程仓库push代码,远程仓库会向配置的Jenkins服务器接口地址发送一个POST请求,Jenkins收到之后会构建触发任务。

1.在配置页面点击源码管理,勾选Git,如下配置

image.png

2.添加触发器
使用Generic Webhook Trigger Plugin 插件(若没有则需要安装),勾选,添加Token(用于触发远程仓库web hooks 的标识)

image.png

  1. 仓库配置钩子

打开仓库管理,添加webHook,
URL规则为:http://:<端口>/generic-webhook-trgger/invoke?token=<token><br />token为Jenkins 任务配置中构建触发器中配置的token
最后选择添加

image.png

  1. 构建配置

这里是指git 拉取代码后,执行的构建任务,一般会有升级依赖包,测试,压缩资源等,本文只是一个demo,只涉及到将代码部署到web工作目录中
选择构建 => 增加构建步骤 => 执行shell
执行命令的操作是将目录下的文件,复制到/work/lsq web工作目录下

\cp -r -a ./* /work/lsq
复制代码

image.png

  1. 点击应用并保存

测试

当我们配置完成后,可以测试一下

  1. 在本地仓库向远程仓库push一下代码

  2. Jenkins对应的任务中,可以看到构建历史

    image.png

  3. 点击进去可以看到控制台输出

    image.png

  4. 进入服务器查看

服务器 work/lsq 目录下确实同步更新,表示成功了!
    

image.png

Nginx配置

当自动化部署成功后,希望我用户可以访问到我服务器的页面,这就需要用到Nginx
如果想要了解更多Nginx 可以参考这里
本次只涉及在服务器中Nginx的安装及简单使用

安装Nginx

sudo yum install nginx -y
复制代码

检验是否成功安装

nginx -v
复制代码

输出版本号表示安装成功

访问首页

通过安全组的配置,允许浏览器访问服务器地址的80端口(默认80端口),就可以看到首页

image.png

修改Nginx配置

此时已经可以访问到页面,现在需要看一下Nginx的配置,将页面配置成我们上面配置的自动化部署后的html文件。

  1. 首先查看Nginx配置

/etc/nginx/nginx.conf 为Nginx主配置文件

vim /etc/nginx/nginx.conf
复制代码

主要看server这里,root表示服务默认启动目录

image.png

  1. 修改启动目录

只需要将目录改成上面的工作目录'/work/lsq',保存即可 

image.png

  1. 重启Nginx
nginx
nginx -s reload
复制代码
  1. 访问服务器ip

再次防伪服务器ip确认是否生效,
经确认,页面确实展现为工作目录下的文件。

image.png

整体回归

到此,我们这个简单的前端自动化部署就完成了,现在可以整体回归一下。
整体逻辑为: 本地文件更新,向远程仓库push代码,线上自动生效
**

  1. 本地代码更新

将Hello Word 改为 你好 世界~

image.png

提交代码

git add .
git commit -m"change text"
git push origin master
复制代码
  1. Jenkins构建

查看Jenkins任务的构建是否成功

image.png

经查看成功构建执行

  1. 线上是否生效

再次访问线上,查看是否生效

image.png

线上已经生效

结尾

到此,这一套前端自动化部署流程就算完成了,当然这只是一些很简单的配置,Jenkins还有许多强大的特性和功能。

(不妨给小弟点个赞吧~)

分类:
前端
标签: