博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
(CI & CD)Jenkins+GitHub+Vue
阅读量:4083 次
发布时间:2019-05-25

本文共 2347 字,大约阅读时间需要 7 分钟。

本篇主要介绍如何实现上传代码到github之后,自动编译部署代码的效果,采用的工具为jenkins(持续集成&持续部署工具)+github(代码托管平台)+vue(测试项目)

jenkins

1. 什么是jenkins

jenkins是当前比较流行的一款持续集成&持续部署(CI & CD)的工具,可以实现代码上传仓库(代码更新)后自动部署到需要部署的位置(服务器等)。

2.为什么本次使用rpm方式安装jenkins?

jenkins大致有三种安装方式:

  1. 使用war包进行安装
  2. linux使用rpm方式安装
  3. docker方式安装jenkins

使用rpm安装的原因有二:1.当前使用的正是linux系统 2.使用docker安装后,在容器内访问宿主机的docker命令太困难。

3. 安装java环境

    1. 首先执行以下命令查看可安装的jdk版本:yum -y list java*
    1. 选择一个版本安装 yum install -y java-1.8.0-openjdk-devel.x86_64
    1. 检查是否安装成功java -version 查看是否输出对应的版本号

4. 开始安装jenkins(经测试比较,该方法最快)

    1. 首先需要jenkins的rpm安装包
      可以去(非常慢),也可以使用下面的github仓库,我上传了一个2020年2月28日的修改版,应该是比较新的了,。

      image.png

    1. 上传该rpm包到服务器,这里以本机是mac系统电脑,服务器是linux为例:

 

scp 本地目录  远程登录服务器用户名@远程服务器ip地址:/下载文件的目录
    1. 上传成功后,进入该上传目标文件夹,执行以下命令:

 

$ rpm -ivh jenkins-XXXXX.noarch.rpm
    1. 按实际情况,判断是否需要jenkins的默认使用端口(8080),如果需要请执行(我改成了8888):

 

$ vi /etc/sysconfig/jenkins

找到JENKINS_PORT键,修改对应的值即可。

    1. 启动/关闭/重启jenkins(这是三种命令的合在一起写的,执行的时候判断需要哪个,就执行哪个)

 

$ service jenkins start/stop/restart

5.访问jenkins浏览器页面 http://118.25.194.49:8888

    1. 就会出现jenkins的正在装载页面

       

      image.png

    1. 输入解锁jenkins的密码,密码存放在页面的红色区域,在服务器直接cat 红色区域路径就能得到密码,复制进来,下一步即可。

      image.png

    1. 安装插件(可以选择第一个默认安装)

       

      image.png

    1. 配置用户名密码等相关参数页面,配置好就下一步。
    1. 进入首页

       

      image.png

    1. 新建任务

       

      image.png

  • 配置上该项目的github的https的git地址

     

    image.png

  • 配置‘源码管理’

     

    image.png

     

    点击‘添加-jenkins’

     

    image.png

    选择刚才生成的

    image.png

  • 配置触发器

     

    image.png

     

    勾选上!!!

  • !!!!!视频中忘了说的 - 这步不能忘,否则提交代码无法触发自动构建

此时,在jenkins中我们开启了github trigger,但是呢,github方还不知道在我们push完代码之后应该通知jenkins,以及通知哪个jenkins,接下来我们去github中,找到当前项目,点击setting,找到webhook选项,添加上http://your 地址/github-webhook/,例如http://118.25.200.49:8888/github-webhook/,保存即可。

  • 构建

     

    image.png

     

    image.png

  • 先‘应用’,再‘保存’
    1. 点击‘立即构建’

       

      image.png

       

      稍等这里会出来一个序号加小球,点击最新的小球进去

       

      image.png

      选择‘控制台输出’

      image.png

       

      可以看到输出信息

       

      image.png

    1. 停止原来运行的demo1的docker的nginx容器

       

      image.png

    1. 追加脚本,'应用'+‘保存’

       

      image.png

  • 注意!!! 这里视频上也漏了一步,就是start.sh中有启动docker的命令,但是用jenkins去执行的话,由于jenkins不在docker的组内,所以执行一些命令的时候没有权限,解决方案如下:

 

1. 将jenkins加入docker组$ sudo gpasswd -a jenkins docker2. 重启jenkins服务$ sudo service jenkins restart
    1. 点击立即构建,进入最新出来的小球中,查看日志

       

      image.png

       

      成功编译文件,并生成docker容器,接下来验证一下

       

      image.png

      验证通过
  • 10.实验提交代码触发jenkins自动集成+自动部署

    用本地编译器重新提交一版修改过的代码,仅仅push到github上,此时查看

     

    image.png

     

    这个就是刚刚push到远程的一次commit,通过hook通知了jenkins,jenkins拉取了最新的代码,并执行了start.sh,此时,只要去看一下页面,如果是我们刚改的,一切就很完美了。

     

    image.png

    完美!

完美其实并不完美,由于粗心,漏掉了上面补充的两点,给别人带来了困扰,以后,以后每发布的文章我一定认真检查,不会再出现以上的问题,立帖为证!

作者:木头1562720278
链接:https://www.jianshu.com/p/2fc8340de073
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

你可能感兴趣的文章
webpack4源码分析
查看>>
深度剖析:如何实现一个 Virtual DOM 算法
查看>>
Vue2.5从0开发猫眼
查看>>
VUE缓存:动态keep-alive
查看>>
webpack4介绍与总结
查看>>
Vue项目Webpack优化实践,构建效率提高50%
查看>>
从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
查看>>
前端本地文件操作与上传
查看>>
数据动态绑定的简单实现——基于ES5对象的getter/setter机制
查看>>
vue源码系列文章good
查看>>
前端跨域解决方案
查看>>
Web前端面试——HTTP部分
查看>>
HTTP必知必会——常见面试题总结
查看>>
你不知道的Virtual DOM
查看>>
VUE面试题总结
查看>>
写好JavaScript条件语句的5条守则
查看>>
原生JS中DOM节点相关API合集
查看>>
新手快速上手webpack4打包工具的使用
查看>>
发布 react 组件到 npm
查看>>
定制化你的ReactNative底部导航栏
查看>>