前面介绍了一些CI/CD 持续集成的工具,如circle citravis cigitee go等,详情可以看下系列文章:传送门

但是上面一些工具有的是只支持Github,有的需要收费,有的免费的只支持公开项目不支持私有项目,而且Github在国内访问又比较慢,所以这次介绍下Gitee + Jenkins来实现可私有化且免费的持续集成方案。

1. Jenkins & Gitee持续集成流程

在这里插入图片描述

  • 在本地编辑器编辑代码,提交到gitee
  • push操作触发jenkins自动部署(jenkins安装在docker中)
  • jenkins开始构建、打包、最后部署到云服务器

2. Jenkins安装Gitee插件

Jenkins安装Gitee插件:
在这里插入图片描述
安装完记得重启Jenkins

3. 插件配置

  1. 前往 Jenkins -> 系统管理 -> 系统配置 -> Gitee配置 -> Gitee 链接
    在这里插入图片描述

  2. 链接名 中输入 Gitee 或者你想要的名字

  3. Gitee 域名 URL 中输入Gitee完整 URL地址: https://gitee.com (Gitee私有化客户输入部署的域名)

  4. 证书令牌 中如还未配置Gitee APIV5 私人令牌,点击添加 -> Jenkins

    • Domain 选择 全局凭据
    • 类型选择 Gitee API 令牌
    • 范围 选择你需要的范围;
    • Gitee APIV5 私人令牌 输入你的Gitee私人令牌,点击获取
    • ID, 描述 中输入你想要的 ID 和描述即可。

    在这里插入图片描述
    添加完成后,选择这个证书令牌:
    在这里插入图片描述
    点击【测试连接】,若出现成功不报错则表示配置成功。

4. 安装NodeJS

因为Vue项目是基于node 来打包构建的,所以要先安装nodejs插件:
在这里插入图片描述
在系统管理 > 系统配置 > 全局工具配置 NodeJS安装:
在这里插入图片描述

建议Node版本不要太高,选择LTS 最新的版本即可。

5. 新建构建任务

前往 Jenkins -> 新建任务 , 输入任务名称 Gitee Test,选择构建一个自由风格的软件项目保存即可创建构建项目。
在这里插入图片描述

5.1 General

任务全局配置中需要选择前一步中的Gitee链接。前往某个任务(如’Gitee Test’)的 Configure -> General,Gitee 链接 中选择前面所配置的Gitee链接,如图:
在这里插入图片描述

5.2 源码管理

  • 选择 Git选项,输入你的仓库地址
  • 凭据Credentials中请输入 git 仓库https 地址对应的 用户名密码凭据,或者 ssh 对应的 ssh key 凭据,注意 Gitee API Token 凭据不可用于源码管理的凭据,只用于gitee插件的 API 调用凭据(这里再添加一个用户名密码的凭据就行啦)。
  • 点击【高级】 Advanced 按钮, Name 字段中输入 originRefspec 字段输入 +refs/heads/*:refs/remotes/origin/* +refs/pull/*/MERGE:refs/pull/*/MERGE
    ,注意新版jenkins不再接受多条同时包含*通配符的refs描述,如只对push触发可写前半部分,如只对PR触发可只写后半段。(这里我就先写前半部分)
  • 指定分支:master
    在这里插入图片描述

5.3 触发器配置

这里我是配置push代码立即触发构建任务:
在这里插入图片描述
在这里插入图片描述

  1. 勾选Gitee webhook 触发构建,后面有个地址这个后面需要配置到Gitee,Gitee触发构建策略勾选推送代码,其他先默认就行,后面有个Gitee WebHook密码栏位需要配置到Gitee,点击生成就会生成一个密码;
  2. 打开Gitee这个项目的管理,左侧有个WebHooks ,点击【添加webHook】:
    在这里插入图片描述
    将上一步Jenkins生成的URL密码填进去,点击【添加】:
    在这里插入图片描述

5.4 构建环境

修改构建任务的构建环境,勾选Provide Node & npm bin/ folder to PATH,默认会选择刚才选择的nodeJS:
在这里插入图片描述

5.5 构建脚本

选择【执行shell】:
在这里插入图片描述
先随便写一个shell脚本试试水吧:
在这里插入图片描述
保存后,我们提交一次看看,很快就构建成功了:
在这里插入图片描述

6. Vue项目部署

vue项目通过node 构建后,需要将构建后的dist文件夹的内容部署到云服务器,因为jenkinsdocker容器创建的,容器内部不能直接移动文件,因为没有挂载,所以这里可以使用SSH登录的方式登录到远程主机再来使用docker命令来移动容器的文件到宿主机的nginx服务器。先来安装下Publish over SSH,进入插件管理:
在这里插入图片描述
安装完成后,在系统管理->系统配置 会多出一个Publish over SSH

先在宿主机生成SSH key(若已经有了SSH Key可以直接使用):

ssh-keygen -t rsa -C "xxxx@qq.com"

在这里插入图片描述

# 将公钥放到authorized_keys,否则SSH Server配置会不成功
cat id_rsa.pub >> authorized_keys

在系统管理 > 系统配置 中配置 Publish over SSH , 配置Jenkins SSH Key:
在这里插入图片描述
点击 Test Configuration按钮,左侧显示 Success 即表示SSH可以连接成功:
在这里插入图片描述

Jenkins 会通过 Git 下载项目,会下载到/var/jenkins_home/workspace/目录,Jenkins 镜像通过 ssh 登陆到宿主机时,可以直接访问到镜像中的该目录,所以能在宿主机执行该命令。

其他步骤同上,构建步骤修改脚本:
在这里插入图片描述
先添加一个Transfer Set 删除部署目录的文件:
在这里插入图片描述
再加一个 Transfer Set 传送文件到部署目录:
在这里插入图片描述
部署效果:
在这里插入图片描述

注意点:

1.若jenkins不是用docker容器安装的,可以直接用cp命令复制将jenkins打包的文件复制到nginx对应的目录,不用SSH 来传输文件。


2.node版本记得改成和本地相同的,曾经在安装vue-element-admin时遇到install失败的问题就是node版本太高了。


3.vue-element-admin 我去除了tui-editor,因为从git下载总是报错(可以通过加hosts来解决)

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐