(CI & CD)Jenkins+GitHub+Vue

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

 

 

 

jenkins

• CI & CD 详解在此

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*
• 2. 选择一个版本安装 yum install -y java-1.8.0-openjdk-devel.x86_64
• 3. 检查是否安装成功java -version 查看是否输出对应的版本号

4. 开始安装jenkins（经测试比较，该方法最快）

• 1. 首先需要jenkins的rpm安装包
     可以去官网下载（非常慢），也可以使用下面的github仓库，我上传了一个2020年2月28日的修改版，应该是比较新的了，地址在这里。
     
      

     

      

      

     image.png
• 2. 上传该rpm包到服务器，这里以本机是mac系统电脑，服务器是linux为例：

scp 本地目录  远程登录服务器用户名@远程服务器ip地址:/下载文件的目录

• 3. 上传成功后，进入该上传目标文件夹，执行以下命令：

$ rpm -ivh jenkins-XXXXX.noarch.rpm

• 4. 按实际情况，判断是否需要jenkins的默认使用端口(8080)，如果需要请执行(我改成了8888)：

$ vi /etc/sysconfig/jenkins

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

• 5. 启动/关闭/重启jenkins（这是三种命令的合在一起写的，执行的时候判断需要哪个，就执行哪个）

$ service jenkins start/stop/restart

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

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

     
     
      

     

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

     

     image.png

• 3. 安装插件（可以选择第一个默认安装）

     
     
      

     

     image.png
• 4. 配置用户名密码等相关参数页面，配置好就下一步。

• 5. 进入首页

     
     
      

     

     image.png

• 6. 新建任务

     
     
      

     

     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
• 先‘应用’，再‘保存’

• 6. 点击‘立即构建’

     
     
      

     

     image.png
     
     

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

     
     
      

     

     image.png
     
     选择‘控制台输出’
     
      

     

     image.png
     
     

     可以看到输出信息

     
     
      

     

     image.png

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

     
     
      

     

     image.png

• 8. 追加脚本，‘应用‘+‘保存’

     
     
      

     

     image.png

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

1. 将jenkins加入docker组
$ sudo gpasswd -a jenkins docker
2. 重启jenkins服务
$ sudo service jenkins restart

• 9. 点击立即构建，进入最新出来的小球中，查看日志

     
     
      

     

     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.cnblogs.com/w-yanjun/p/13569393.html