jenkins+gitee实现前端项目自动化部署

前言

前端项目每次提交完代码都要手动拉取最新代码、打包、部署,这一套流程下来可能要浪费不少时间,特别是在项目处于快速迭代期的时候,那么如果前端可以实现自动化部署,开发人员每次push代码后由jenkins自动部署到测试环境,那将会在一定程度上简化开发人员的工作,让他们可以把更多精力放在处理其他问题上。

自动化部署流程图

一、先说说自动化部署需要具备的环境

1、安装Java环境(必须)

这里的话最好是安装JDK1.8以上的版本,因为Jenkins对于Java的版本有一定的要求。如果没有的话,则自行百度安装。
验证本地环境是否已有java环境

java -version
2. 安装Jenkins(必须)

Jenkins是自动化部署的核心应用,当然如果对BuildMaster这些持续集成的工具比较熟悉的话,也可以用其他工具来做集成。
Jenkins的安装步骤可以参考我的这篇文章:Linux环境下安装Jenkins

3. 安装Git/Svn(必须)

这里的话,由于我的项目是使用git进行版本管理的,所以下载的是git。
检查本地是否已经有git

git --version

如果没有git的话,可以通过下面的命令安装或者自行百度:

yum install git
4. Node环境安装(前端必须)

由于我们的项目是前端项目,所以要想在服务器中执行打包、编译等操作的话,服务器就必须要有node的环境(如果是后端的话应该就需要maven等环境)。Node环境如何安装自行百度

二、配置Jenkins权限

安装完Jenkins后,还需要再配置一下Jenkins的权限:

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

三、配置Gitee公钥

由于我们的Jenkins后期需要向远程仓库拉取代码,所以我们需要对远程仓库配置一下服务器的公钥

(1)服务器生成公钥:

在服务器的sh窗口中输入下面的命令后,根据提示按3次回车即可
注意:邮箱的话就用自己的邮箱

ssh-keygen -t rsa -C "***@xxx.com"
(2)查看生成的公钥:
cat ~/.ssh/id_rsa.pub
(3)在码云的远程仓库上面添加服务器公钥
添加服务器公钥

公钥添加好后,我们就可以在公钥管理中看到了

四、Jenkins创建自动化部署的任务

(一)创建任务

进入Jenkins后点击主页左侧菜单的新建任务,在弹框中输入自定义任务名称,选中构建自由风格的软件项目后,创建任务。


image.png

image.png
(二)配置git和远程仓库的关联

这一步主要是实现当我们push代码后,由gitee发送一个post请求给Jenkins,Jenkins自动拉取最新代码的步骤。
进入任务实例中,点击配置,进入任务配置页面

进入任务的配置页面

(1)Jenkins配置远程仓库地址

在源码管理中选择Git,配置远程仓库地址和凭证(也就是码云的账号密码)


Jenkins
(2)添加触发器

触发器是指Jenkins在什么条件下会触发部署的操作,由于我们这里并不是常规的根据时间表来部署,而是根据接收到远程仓库的post请求再部署,所以需要借助到Generic Webhook Trigger Plugin插件。
插件可以在系统管理 -> 插件管理中进行配置

image.png

image.png

插件安装成功后,我们返回到原先的任务配置界面,在构建触发器中选中Generic Webhook Trigger后,配置token,这里的token可以自定义,主要是下面我们需要在码云上使用到这里配置的token。

选择触发器

(3)配置远程仓库的钩子

进入到我们的远程仓库中,选择左侧的WebHooks后,配置URL,URL的格式为:

http://JENKINS_URL/generic-webhook-trigger/invoke?token=owner_token

JENKINS_URL指的是你的IP地址和服务器的端口号
owner_token指的是之前在上一步配置的token

image.png

配置完成后,点击更新/完成。然后测试一下请求是否成功,如果成功的话,可以在请求历史中看到对应的请求结果。


image.png

如果遇到请求状态是403的话,就需要检查一下返回的错误信息,看一下jenkins那边的配置有没有问题了。
可以试一下重启一下Jenkins,或者是检查一下关于Jenkins安全相关的配置,在跨站请求伪造保护模块中,选择启用代理兼容。需要注意的是,由于我的Jenkins版本比较高,所以不一定和你们的页面完全一样,如果这里解决不了你的问题的话,还是另外需要百度解决。

配置全局安全配置
启用代理兼容
(4)构建配置

接下来,我们来简单写点代码来进行测试


构建配置

我们可以在任务面板中选择立即构建我们的项目,然后在左侧下面的构建历史中看到我们正在运行的任务。


执行构建

我们可以点击构建历史中的选项来查看我们每一次的控制台输出,这是一个观察我们任务执行情况的很好的一个窗口。
查看任务执行情况

其实点击执行后,jenkins会自动拉取我们远程仓库的代码,拉取完成后,就会执行我们配置在构建中的具体代码。

(三)配置Jenkins运行Node的环境

在前面,虽然我们下载并安装了Node.js,但实际上我们还需要在Jenkins中把我们的Node的环境变量进行配置后,才可以执行对应的npm操作。

步骤1:我们先进入到系统管理 - 系统配置
进入系统配置
步骤2:在全局属性中配置环境变量

这里的话,可以直接在服务器中通过echo $PATH来快速获取

配置Node环境变量

其实也可以使用Jenkins中的NodeJS插件来解决上面那个问题,不过这里的话我感觉在这里配会更加简单,就没有用插件。

五、正式实现自动化部署

(一)在Nginx中配置前端项目的路径

由于我们的前端项目使用Nginx进行部署,所以我们还需要下载Nginx,下载过程自行百度即可。
我们进入到$Nginx_Home/conf/nginx.conf文件中,配置我们前端项目的端口号以及文件路径

server {
        listen       3001;
        server_name  localhost;

        location / {
            root   /usr/local/my_proj/test_devops/;
            index  index.html index.htm;
        }
}
(二)编写构建的正式脚本
npm install
npm run build
ls -al
cp -r -a ./build/* /usr/local/my_proj/test_devops/
image.png
(三)本地开发后,push代码,此时即可实现自动化部署

本地未提交代码前:


本地未提交代码前

git执行push代码,可以观察到jenkins开始自动执行部署任务了:

jenkins接收到远程仓库的post请求,开始部署任务

部署完成后,刷新页面即可看到最新结果:


image.png

说在最后

最后,我们再来对整体的步骤做一个小总结吧:

环境需要:
  1. jdk1.8
  2. jenkins
  3. node.js
  4. git
jenkins插件需要
  1. Git插件
  2. Generic Webhook Trigger插件
  3. SSH插件(如果需要部署到其他服务器的话则需要这个插件)
配置jenkins任务
  1. 配置源码管理(远程仓库的地址和账号密码)
  2. 远程仓库配置jenkins服务器的公钥
  3. 远程仓库和jenkins配置钩子和对应的token,完成关联
  4. 编写对应的部署脚本(就是npm install这些啦)
  5. 测试后完毕

实际上,正式项目的自动化部署一般是Jenkins单独一台服务器,然后测试环境,生产环境再分别有至少一台服务器,Jenkins在构建完项目中,还需要有另外一步,就是在构建后操作这个模块中通过ssh登录到测试或者生产的服务器上面,再执行对应的脚本。由于这里我只有一台服务器,所以就演示不了后面的操作,后面的操作其实也不难,大家稍微配置一下就行。

参考文章:
嘿!Jenkins前端自动化部署
Jenkins执行脚本npm命令报错 npm: command not found

你可能感兴趣的:(jenkins+gitee实现前端项目自动化部署)