长话短说,今天分享我为前后端分离项目搭建Gitlab CI/CD流程的一些额外经验。

Before

Gitlab-ci是Gitlab提供的CI/CD特性,结合Gitlab简单友好的配置界面,能愉悦的在Gitlab界面查看管道执行流程,并自然流畅的推动敏捷开发流程。

Gitlab-CI/CD的核心是搭建Gitlab Runner、编写.gitlab-ci.yaml文件。

详细示例请参考:Gitlab CI/CD+ASP.NETCore.

本次前后端两个项目使用同一个Gitlab Runner(shell模式),前端项目的gitlab-ci.yaml构建Job如图:

Round 1

单个Gitlab Runner可为多个项目提供构建服务

gitlab-Runner register命令只能接受一个注册token,当时为支持多个项目,花了不少冤枉心思倒腾Gitlab Runner.

你可以为注册的项目解锁Runner,这样Girlab Runner就可以为其他项目提供构建:

Round 2

使用Runner缓存加快前端构建过程

大家都知道npm_module被前端开发者诟病为毒瘤, 而Gitlab runner执行每次构建job之前都会清场,pull/fetch指定的代码再执行job, 这就导致每次build job会耗时很久(要拉取毒瘤)。

#!/bin/bash

cd   packages/event-analysis
yarn config set registry http://registry.npm.gridsum.com && yarn --prefer-offline --frozen-lockfile
npm run build

以上是build任务的脚本frontend.sh,总耗时3m33s,其中yarn命令拉取npm_modules耗时172.52s



gitlab runner支持缓存

在.gitlab-ci.yaml 文件中定义cache指令:

cache被用来在job之间缓存文件,更强大的是可以定义文件依赖缓存:

build:
stage: build
cache:
key:
files:
- packages/event-analysis/package.json
paths:
- node_modules
script:
- ./frontend.sh
tags:
- my-tag

缓存key是yarn命令要用到的package.json,缓存内容是npm_modules;

只要这个package.json文件未变更,后续任务就会使用缓存的npm_modules,而不用重建npm_modules依赖。

使用runner缓存优化后build任务总耗时1m18s,其中yarn命令耗时22.83s:

以上针对Gitlab-CI的使用经验点到为止,足够应对我当前项目,更多请关注:

Reference

  1. https://docs.gitlab.com/ee/ci/runners/#prevent-a-specific-runner-from-being-enabled-for-other-projects
  2. https://docs.gitlab.com/ee/ci/caching/

Devops的圈子很大,上面的Gitlab-ci也只是点到为止,应付我当前的前后端分离项目.. 欢迎大家来捶我。

分享我在前后端分离项目中Gitlab-CI的经验的更多相关文章

  1. Spring-Gateway与Spring-Security在前后端分离项目中的实践

    前言 网上貌似webflux这一套的SpringSecurity操作资料貌似很少. 自己研究了一波,记录下来做一点备忘,如果能帮到也在迷惑的人一点点,就更好了. 新项目是前后端分离的项目,前台vue, ...

  2. 《论vue在前后端分离项目中的实践之年终总结》

    我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue还没有成熟的(路由.验证.ui组件)插件,社区也是不温不火的,再说也没有合适的机遇让我去项 ...

  3. 在前后端分离项目中使用SpringBoot集成Shiro

    前言 这次在处理一个小项目时用到了前后端分离,服务端使用springboot2.x.权限验证使用了Shiro.前后端分离首先需要解决的是跨域问题,POST接口跨域时会预发送一个OPTIONS请求,浏览 ...

  4. 前后端分离项目中后台集成shiro需要注意的二三事

    1. 修改 Shiro 认证失败后默认重定向处理问题 a. 继承需要使用的 ShiroFilter,重载 onAccessDenied() 方法: @Override protected boolea ...

  5. 08 Django REST Framework 解决前后端分离项目中的跨域问题

    01-安装模块 pip install django-cors-headers 02-添加到INSTALL_APPS中 INSTALLED_APPS = ( ... 'corsheaders', .. ...

  6. Aspnet Mvc 前后端分离项目手记(二)关于token认证

    在前后端分离的项目中,首先我们要解决的问题就是身份认证 以往的时候,我们使用cookie+session,或者只用cookie来保持会话. 一,先来复习一下cookie和session 首先我们来复习 ...

  7. 《Spring Boot 入门及前后端分离项目实践》系列介绍

    课程计划 课程地址点这里 本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 个部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发 ...

  8. 七个开源的 Spring Boot 前后端分离项目,一定要收藏!

    前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年 ...

  9. 喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

随机推荐

  1. jquery VS Dom(小实例单选-多选-反选)

    一直以来大家对jquery评价莫过于六个字 “吃得少,干的多” ,应用实例让大家看看这款牛到爆的插件能帮我们做什么,话不多说,直接加码 <!DOCTYPE html> <html l ...

  2. oracle的操作-表空间

    查询以创建的表空间 select dbms_metadata.get_ddl('TABLESPACE','你的表空间名称') from dual; --查询空间创建的位置 select t1.name ...

  3. System.Web.mail ----虚拟发件人发送邮件

     转载别人的 使用SMTP发送邮件   说到邮件发送,先提一下SMTP. SMTP的全称是“Simple Mail Transfer Protocol”,即简单邮件传输协议.它是一组用于从源地址到目的 ...

  4. 针对移动端开发的响应式 Jekyll 主题

    simple 这是针对移动端开发的响应式 Jekyll 主题,效果看 demo,源码在 GitHub,觉得不错点个 star. 主题特性包括但不限于: 在线编辑.新建.发布文章 GitHub 官方语法 ...

  5. 最优化之Robust PCA

    最近加了一个QQ群,接触了点新的东西,包括稀疏近似,低秩近似和压缩感知等.Robust PCA中既包含了低秩,又包含了稀疏,于是以其为切入点,做了如下笔记.笔记中有的公式有比较详细的推导,希望对读者有 ...

  6. Spring Boot 开发集成 WebSocket,实现私有即时通信系统

    1/ 概述 利用Spring Boot作为基础框架,Spring Security作为安全框架,WebSocket作为通信框架,实现点对点聊天和群聊天. 2/ 所需依赖 Spring Boot 版本 ...

  7. vue滑动位移动画

    需要用到css3,vue过度 在网上找了很久很少的资料,自己摸索了一会看了官方文档,毕竟环境不同,需要的效果不同,耽误了很久 鼠标放上某一个就会从下方弹出层

  8. 重学 Java 设计模式:实战建造者模式

    作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 乱码七糟 [luàn qī bā zāo],我时常怀疑这个成语 ...

  9. vue 上拉刷新组件

    背景,项目中经常会出现需要上拉加载更多或者下拉刷新的需求,一直以来呢都是借用各种UI库来实现,但是不知道啥情况,最近在使用的时候,一直有问题,出不了效果,然人很恼火,于是只能自己动手来实现以下, 这次 ...

  10. Python数据分析:pandas玩转Excel (一)

    目录 1 pandas简介 2 导入 3 使用 4 读取.写入 1 pandas简介 1.Pandas是什么? Pandas是一个强大的分析结构化数据的工具集: 它的使用基础是Numpy(提供高性能的 ...