技术分享 | 混合云模式下SaaS端前端最佳实践

872402310a88b21897b1c93917c73af5.png

ce2c97d7d8d3e789c3b958146e6faa70.png

导读:集成开放平台采用的是混合云部署架构,包含两个大的组件,管理控制台和引擎。管理控制台是SaaS的,部署在公有云,按租户隔离。引擎部署在客户私有云。一套SaaS版的管理控制台如何适配不同客户的引擎,本文将介绍我们的最佳实践。

一、背景

集成开放平台采用的是混合云部署架构,包含两个大的组件,管理控制台和引擎。管理控制台是SaaS的,部署在公有云,按租户隔离。引擎部署在客户私有云。由于业务、管理的差异,不同的客户其本地引擎的版本也存在差异,甚至版本跨度会比较大。随着客户的增多,不同客户的版本差异越来越大,云端一套管理控制台如何兼容不同客户的后端版本,挑战也越来越大。下面通过一个例子来阐述这些问题。

二、问题

c0f0fd2ddb19b392655308ad4b8561d7.png

客户A的租户环境是我们19年部署的一套环境,客户B是我们另外一家客户。A客户的诉求是只需要保持稳定就可以了,不需要对他们的环境做任何的升级,B客户的诉求是我们的产品必须要不断升级去满足他们的需求。那么基于这种现状,我们给客户A在他们的服务器部署一套后端引擎,在客户B的服务器上也给他们部署了一套后端引擎。基于客户A的诉求客户A的引擎版本可能一直稳定在2.0版本,但是基于客户B的诉求,我们需要给客户B进行产品升级,那么经过一段时间的迭代客户B的后端引擎版本可能已经升级到了3.4.x.x了。但是这些客户却公用一套web端部署在公有云上。一套web端页面对应多个后端引擎造成的问题就是客户A进入web端页面之后有各种报错,因为web页面中很多的新的接口在客户A的引擎中不存在。为了解决这一个问题我们有2种方案。

三、解决方案

方案一:组件纬度加版本控制

fd1883d3a2cf717bdc374f0db3ab097f.png

通过在前端页面的逻辑中判断当前引擎的版本号,来决定是否要请求某一个接口、显示某一个模块,用新的数据结构还是老的数据结构:

 优点:1、可以公用部分组件以及部分页面逻辑;

            2、是最快速最直接的响应需求的方式;

 缺点:1、因为写了很多兼容逻辑会导致项目体积过大,影响打包速度;

            2、引用的三方库的升级对历史版本可能会有影响;

            3、公用组件的升级需要考虑对历史版本的数据结构的兼容,增加组件的复杂度,后期可能会更加难以维护

方案二:对不同版本的前端资源进行物理隔离

500064772add388ed6e568baee83fc45.png

我们把云端控制台分为三部分console、ipass-console、mipconsole:

  1. console是我们云端控制台网关主要是做身份验证、租户管理等功能,租户管理模块维护了各租户的引擎地址,主要把各租户的管理控制台(mipconsole)来的请求转发到该租户所对应的服务端引擎。

  2. ipass-console主要包含登录、租户管理等模块。从ipass-console租户管理模块的页面可以进入不同租户的管理控制台。

  3. mipconsole是各租户管理控制台页面。包含接口中心、事件中心、服务编排、数据集成、仪表盘等功能。

ipass-console发送请求到console控制台网关,网关会直接操作console控制台的数据库,由于各租户的服务端引擎是私有化部署部署在客户自己的服务器上,所以不同租户的引擎地址不一样,mipconsole发送请求到console控制台网关,网关会把该请求转发到租户的服务端引擎,引擎接收到请求会操作引擎端数据库。由于ipass-console不需要跟后端引擎做关联的所以不需要做版本区分。但是mipconsole是各租户的管理控制台的功能。那么mipconsole是如何做到对各个租户的管理控制台的web端资源做到物理隔离的呢?答案是通过git的分支来做到对不同租户的web端资源来进行物理隔离。

下面我们结合上面我们的问题来进行阐述:

1、web端各版本资源的物理隔离:

2535c82fa376c221dd806dd1e78de5c2.png

我们如何通过git分支来做不同的租户之间web端资源的完全隔离呢?首先我们把客户A的租户的前端资源当作一个基线分支,基于这个基线分支切出一个开发分支,在这个开发分支上开发客户B的新需求,当第一批的需求开发完成并且测试验收通过之后,我们会基于这个开发分支打一个tag,并且把开发分支合回基线分支,在基线分支编译出一个正式静态资源包放在我们主工程ipass-console的web目录下。下次在有新的需求时在基于最新的基线分支切出开发分支,重复上述过程。

如果后期在迭代过程中发现之前某一个版本有bug,那么我们会基于那个版本的最新的tag切出一个hotfix分支修复该bug,修复完成并测试通过之后基于当前的hotfix分支生成一个新的tag,同时基于当前的分支编译生成一个新的静态资源包替换之前老的资源包。bug的修改不会新增静态资源包,只有无法兼容的新需求(需要写版本判断的这种)才会新增一个静态资源包。这就是mipconsole各个租户管理控制台的前端资源的物理隔离方案。

2、web端各版本资源的加载、解析:

747d11b01aa6387a42adbe933edfc635.png

console是我们云端控制台网关,因为不同的租户引擎地址不一样,所以前端无法直接访问引擎地址,所以前端会先发请求云端控制台网关 ,网关在把请求转发到相应租户的引擎服务去。在项目初始化的时候console会去遍历主工程(ipass-console)下的web目录下资源目录的文件夹名称生成一个前端静态资源目录与后端引擎版本号的一个映射文件,缓存在内存中。当console接收到前端的请求地址是以/cloud/ 开头的就会根据请求的参数租户corp_id和环境env_id去数据库里查询当前环境所对应的引擎版本号,然后通过引擎的版本号去映射文件里面匹配到前端的静态资源的文件夹名称,把匹配到的静态资源文件下的index.html返回给浏览器,浏览器下载了index.html后js会自动解析并导航到对应页面。这样进入某一个的租户的管理控制台之后浏览器只会加载某一个版本的前端静态资源。

以下是我们的项目工程目录:

1、 资源工程的各个版本的分支,如下图:

b9c545a2ed714e4c6d440e01bc2437b6.png

2、主工程、各个版本静态资源包以及各个静态资源包所对应的后端引擎版本号,如下图:

7a0239c6477fae9bfa5b48044f18da8d.pngde895c45edc89e3b7e78d108f91c98d3.png

V3.1.0.0 、V3.2.0.0代表的是前端资源的版本号,minVersion 代表后端引擎的最小版本号。如果当前后端引擎的版本号3.1.1.1 大于等于3.1.0.0小于3.1.22.0则对应加载3.1.0.0版本的前端资源。前端版本资源与后端版本资源是一对多的关系,以实际的正式发版时的后端版本号做为前端匹配的最小版本号。

3、各个版本资源包所对应的tag号,如下图:

0defc6478590bb7cff9f52c5b69e1b5e.png

四、总结

针对多租户的前端工程管理的方案困扰了我们很久,市面上也没有我们这种业务场景所以我们也没有可以参考的标准解决方案,我们一直在思考寻找最适合我们的解决方案,在这期间我们发现现在比较流行的微前端的思想或许可以解决我们的问题,但是当我们去预研这些流行的微前端框架single-spa、qiankun等发现都不太适合我们的业务场景,于是我们基于这些思想预研出了最适合我们自己业务场景的方案。在我们的工作中对于一些比较好技术和框架我们不能生搬硬套,而是要基于我们实际的业务场景来考虑是否适合我们,我们可以借鉴别人好的思想来形成我们自己的技术方案和技术体系。

------ END ------

作者简介

郭同学: 前端工程师,目前负责集成开放平台的研发工作。

也许您还想看:

技术分享|Java SDK动态数据源和上下文机制

技术分享|NodeJS分布式链路追踪实现

技术分享 | Java SDK 元数据驱动的事件通信架构

技术分享|Hangfire深度实践

技术分享 | APT结合JavaPoet生成模板化Java源代码文件

技术分享 | 玩转高效UI自动化测试

更多明源云·天际开放平台场景案例与开发小知识,可以关注明源云天际开发者社区公众号:

【建模】文档服务提供高保真打印模式

明源云·天际硬核技术认可:获华为鲲鹏技术认证书

天际·开发者社区“重装发布”!

fe6159e128cc5ae67cc9c444d8651ad9.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/291748.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

统计素数个数

10:判决素数个数总时间限制:1000ms 内存限制:65536kB描述 输入两个整数X和Y&#xff0c;输出两者之间的素数个数&#xff08;包括X和Y&#xff09;。输入 两个整数X和Y&#xff08;1 < X,Y < 105&#xff09;。输出 输出一个整数&#xff0c;表示X&#xff0c;…

记一则Hadoop DataNode OOM故障,以及解决方案

一、故障症状最近公司一个集群跑大任务时&#xff0c;datanode日志报DataXceiveServer: Exiting due to:java.lang.OutOfMemoryError: unable to create new native thread异常&#xff0c;然后计算节点上的DataNode直接挂掉。DataNode异常日志截图如下&#xff1a;2014-03-06 …

阿里云实时数据仓库

阿里云实时数据仓库——学习笔记 课程目标 学习搭建一个实时数据仓库&#xff0c;掌握数据采集、存储、计算、输出、展示等整个业务流程。整个实时数据仓库系统是在阿里云架构上搭建&#xff0c;掌握并学会运用各个服务组件&#xff0c;及各个组件之间如何联动。前置知识要求&…

[转]svn常用命令

谢谢原作者:http://blog.sina.com.cn/s/blog_963453200101eiuq.html 1、检出svn co http://路径(目录或文件的全路径) [本地目录全路径] --username 用户名 --password 密码svn co svn://路径(目录或文件的全路径) [本地目录全路径] --username 用户名 --password 密码…

手动挡五个档位示意图_汽车档位越多越好?听听专业回答

如今的汽车市场百花齐放&#xff0c;汽车厂商们也不断在研发过程中寻找不同的突破口&#xff0c;其中汽车变速器的档位变化就是众多汽车品牌当做噱头的重点&#xff0c;不知从什么时候开始&#xff0c;自动变速箱档位数量变多成为了深受汽车品牌喜爱的突破点&#xff0c;渐渐的…

常用排序-基数排序,计数排序

基数排序 将整数每个位数分别比较&#xff0c;先找出最长位&#xff0c;针对每个位&#xff08;个位&#xff0c;十位…&#xff09;利用桶的思想&#xff0c;将每个位的元素个数统计&#xff0c;倒序读入temp[10]列表中&#xff0c; 时间复杂度O(d(nK)),k是10进制&#xff0c;…

Android之用netcfg命令获取手机虚拟网卡tun0的信息

1、在终端输入下面命令 adb shell adb netcfg 2、展示结果 3、使用总结 我们得到手机 tun0 地址为10.1.102.11 然后在vpn后台&#xff0c;我们先找到是哪个tun&#xff0c;我们可以使用ip route命令ip route show table2 这个允许结果就是 地址 哪个tun比如我们得到是tun2 然…

C# 基于事件的异步模式

点击蓝字 关注我们开工大吉EventBasedAsyncPattern 方法使用了基于事件的异步模式。这个模式定义了一个带有 “Async” 后缀的方法。示例代码再次使用了WebClient 类。对于同步方法DownloadString&#xff0c;WebClient类提供了一个异步变体方法 DownloadStringAsync。当请求完…

Tomcat 下 Memcached 集群与 Terracotta 集群比较

总结&#xff1a;Terracotta 集群配置要比Memcached 集群简单&#xff0c;但Terracotta 集群启动的速度要比Memcached 集群慢&#xff0c;性能Terracotta 集群要比Memcached 集群好。但性能都好不过weblogic单机的性能&#xff01;&#xff01; Terracotta 集群效果图如下&…

POJ 2887 Big String

Big StringTime Limit: 1000MS Memory Limit: 131072KTotal Submissions: 7053 Accepted: 1684Description You are given a string and supposed to do some string manipulations.Input The first line of the input contains the initial string. You can assume that it …

MySQL For RedHat Linux(源码安装,附安装包)

准备工作在http://pan.baidu.com/s/1GsS3s下载安装包 Mysql.zip把相应的包放在 /opt 目录下 解压mysql.tar.gz 检测系统是否安装MySQL1、执行 #rpm -qa | grep -i mysql如果出现&#xff1a;[rootlocalhost Mysql]# rpm -qa|grep -i mysql [rootlocalhost Mysql]# 则未安装MySQ…

IDEA简单配置教程

IDEA简单配置教程 ——做好前期配置工作&#xff0c;后期少走弯路。 创建模块(Module) 设置(Settings) 设置主题 窗体及菜单字体及大小 设置编辑区主题 通过插件(plugins)更换主题 设置鼠标滚轮修改字体大小 设置鼠标悬浮提示 设置自动导包功能 显示行号和方法间的分隔符 忽略…

Android之解决打补丁包后移动端为什么不升级,升级之后出现“应用未安装“,以及更新成功之后反复更新问题

1、打补丁包后移动端为什么不升级,而且PC端和移动端访问同一个url得到的xml文件内容不一致 不升级是因为补丁包文件搞错了,虽然改了文件内容, pc端访问同一个url得到的xml文件内容不一致,是以为服务端集群导致。 总结: 1)、给客户打补丁包之前一定要到客户后台把相关文件…

MariaDB Spider 数据库分库分表实践 分库分表

分库分表一般来说&#xff0c;数据库分库分表&#xff0c;有以下做法&#xff1a;按哈希分片&#xff1a;根据一条数据的标识计算哈希值&#xff0c;将其分配到特定的数据库引擎中&#xff1b;按范围分片&#xff1a;根据一条数据的标识&#xff08;一般是值&#xff09;&#…

【树莓派】配置介绍

网络是个好东西&#xff0c;好多同学分享的博文&#xff0c;极大的方便我们学习&#xff0c;谢谢~ 1、初始化配置树莓派 装上新系统&#xff0c;连接到树莓派后&#xff0c;一切都是新的&#xff0c;需要配置树莓派的一些选项。 使用putty连接到树莓派后&#xff0c;输入指令su…

C语言之函数指针和函数的首地址

1、爆简单的代码 因为容易忘记&#xff0c;还是再记录一次吧。 2、展示结果 至于函数指针用法&#xff0c;一眼便知对于add和&add你应该这样理解&#xff0c;add是函数的首地址&#xff0c;它的类型是void ()&#xff0c;&add表示一个指向函数add这个对象的地址&#x…

halcon ocr 生成样本变体_Halcon简单文字识别OCR的使用

重要&#xff1a;本文最后更新于2019-10-18 08:49:28&#xff0c;某些文章具有时效性&#xff0c;若有错误或已失效&#xff0c;请在下方留言或联系代码狗。突然想起网上有很多打码挣钱的活动&#xff0c;于是灵光一闪&#xff0c;用C#搞个自动识别验证码的程序出来岂不是自动挣…

Ajax入门(创建 XMLHttpRequest 对象)

XMLHttpRequest 是 AJAX 的基础。 所有现代浏览器均支持 XMLHttpRequest 对象&#xff08;IE5 和 IE6 使用 ActiveXObject&#xff09;。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下&#xff0c;对网页的某部分进行更新。 创建 XML…

MFC中卡拉OK字体的定时器实现,使用DC的DrawText函数实现

1 void CTextView::OnTimer(UINT_PTR nIDEvent)2 {3 m_nWidth 5; // 在构造函数中初始化为 0&#xff1b;4 5 CClientDC dc( this );6 TEXTMETRIC tm;7 dc.GetTextMetrics( &tm );8 CRect rect;9 rect.left 0; 10 rect.top 200; 11 re…

WPF 基础控件之Window样式

WPF开发者QQ群&#xff1a; 340500857由于微信群人数太多入群请添加小编微信号yanjinhuawechat 或 W_Feng_aiQ 邀请入群需备注WPF开发者 PS&#xff1a;有更好的方式欢迎推荐。01—代码如下一、创建 Window.cs继承System.Windows.Window代码如下。在WPF自定义类库时需要注意在创…