美文网首页Javascript收集
(CI & CD)Jenkins+GitHub+Vue

(CI & CD)Jenkins+GitHub+Vue

作者: 木头就是我呀 | 来源:发表于2020-03-03 23:20 被阅读0次

    本篇主要介绍如何实现上传代码到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 docker
    2. 重启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
      完美!

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

    相关文章

      网友评论

        本文标题:(CI & CD)Jenkins+GitHub+Vue

        本文链接:https://www.haomeiwen.com/subject/kkeflhtx.html