前端需要了解的泳道概念

微服务架构下,服务间的调用链路复杂,导致测试环境稳定性与多服务并行测试成为挑战。泳道Swimlane提供了解决方案,通过服务分组复制和逻辑隔离,实现并行测试、稳定骨干链路和错误隔离。服务注册、发现和导流是关键实现点,包括域名划分和header携带泳道信息来控制流量走向。这种方式允许不同需求的服务链在独立环境中运行,提高测试效率和质量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景

微服务框架下服务个数多、调用链路较长,其中一个服务出问题会影响到整条链路。但QA提测往往需要该条链路上的多个服务配套测试,甚至是同时测试一个服务的多个演进版本。

提供稳定环境 和 多服务/多版本同时测试 看似相悖的需求,通过泳道“Swimlane”能够得到解决。

测试过程中会遇到的问题

  1. 关于一个服务上的多个需求的同时测试,存在服务抢占分支测试的问题;

  2. 不同的业务组在测试时依赖的第三方服务有改动或正在进行新需求测试影响本业务测试。

微服务框架下服务个数多、调用链路较长,其中一个服务出问题会影响到整条链路。但QA提测往往需要该条链路上的多个服务配套测试,甚至是同时测试一个服务的多个演进版本。提供稳定环境 和 多服务/多版本同时测试 看似相悖的需求,通过泳道“Swimlane”能够得到解决。

什么是泳道

对服务链按需求进行分组复制,并实现逻辑、物理的隔离,使得不同需求的服务链运行在相隔的物理机器上,逻辑上如同游泳场中的泳道。

一个环境内会有一条骨干链路(该环境的默认链路)和多条泳道。如图所示,泳道隔离出了一条调用边界:处于[泳道-1]内的服务B要调用服务C,若在[泳道-1]内部署了C服务,则B只能调用泳道内的C服务,而不能调用骨干链路或其他泳道的C服务;若在[泳道-1]内没有部署C服务,则流量会调回骨干链路。

优势:

  1. 并行测试。(因此可以根据测试需要,部署不同分支的服务分组,多个泳道并行,多个服务/多个版本可同时提测)

  2. 提供稳定的骨干链路。(保证整个测试流程始终能正常运行)

  3. 错误隔离。(泳道内的服务发生异常 不会影响其他泳道)

泳道的特性

泳道相当于提供了多条“请求的跑道”,理解泳道主要在于理解“流量跑到哪去了”:

泳道内如果没有部署被调用服务,流量会fallback到骨干
– 比如上图[泳道-2]中的B服务节点 调用了 [骨干链路]中的C服务节点

泳道内若存在被调用节点,那么流量是一定不会fallback的 (包括不可用的和禁用的)
– 比如上图[泳道-2]中的A服务节点 只会调用 [泳道-2]中的B服务节点,即使[泳道-2]中的B不可用,也是不会fallback的

骨干环境是一定不会调用到泳道内的
– 比如上图中绝逼不会有 从[骨干链路]到[泳道-2]的调用

泳道之间是一定不会互相调用的
– 比如上图中绝逼不会有 [泳道-1]与[泳道-2]之间的调用

泳道的实现

泳道实现的重点在于服务的注册、发现和服务导流。

后端服务的注册和发现的流程如下:

  1. 服务B启动,上报ip、port、appkey、swimlane等信息

  2. 骨干链路上的服务A节点要调用B,先去取B的服务列表,并进行过滤:A不带有泳道标识,所以只会调用不带泳道标识的B服务节点

  3. 泳道1上的服务A节点要调用B,也会先去取B的服务列表,并进行过滤:A带有泳道=泳道1 标识,所以只会调用同样带有泳道=泳道1 标识的B服务节点

服务导流

  • 通过域名划分泳道:为各个泳道申请单独的域名,根据域名进行分流

  • 通过header携带泳道信息:请求的header字段增加“swimlane=xxxx”,标识请求要打到名为xxxx的泳道里,分流系统会根据该字段做分流。

前端静态资源,基于泳道名进行隔离,在资源编译和打包的时候,指定发布的泳道名,然后资源会上传到该泳道对应的静态服务器中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const swimName = process.env.SWIM_ENV;
if (swimName) {
    console.log('检测到泳道环境SWIM_ENV:' + swimName);
    console.log('默认使用test01执行发布');
}
const webpackConfig = merge(baseWebpackConfig, {
    devtool: config.build.productionSourceMap ? '#source-map' : false,
    output: {
        path: swimName ? config.build.assetsRoot + `/${swimName}` : config.build.assetsRoot,
        publicPath: swimName ? config.build.assetsPublicPath + `/${swimName}/` : config.build.assetsPublicPath,
        filename: 'js/[name].bundle.[chunkhash].js',
        chunkFilename: 'js/[name].[chunkhash:5].chunk.js',
        library: '[name]'
    },
});

点个『在看』支持下 

在Vue2中创建一个前端泳道图(也称为甘特图或项目管理视图),通常需要结合使用一些图表库,比如ECharts、AntV G2等,它们提供了丰富的图形绘制功能。以下是基本步骤: 1. **安装依赖**: 首先在你的Vue项目里安装所需的库,例如通过`npm`或`yarn`命令: ```bash npm install echarts antv g2 ``` 2. **引入组件**: 在`main.js`或其他适当位置导入并注册图表组件。 3. **数据准备**: 游泳池或任务的数据应该组织成适合图表结构的对象数组,每个对象通常包含开始时间、结束时间和任务名称等信息。 4. **组件模板**: 使用组件语法,创建一个用于显示图表的模板,例如ECharts的`echarts-for-vue`组件可以这样用: ```html <template> <div ref="chart" style="width: 100%; height: 500px;"></div> </template> ``` 或者AntV G2: ```html <g2-bar :data="tasks" :height="500"></g2-bar> ``` 5. **编写脚本**: 在组件的script部分,初始化图表并设置数据: ```javascript import { ECharts } from 'echarts-for-vue'; export default { components: { // 或者 AntV G2 的写法 MyG2Chart: { extends: G2Component, props: { data: { type: Array, required: true, }, }, mounted() { this.renderChart(); }, methods: { renderChart() { const chart = new ECharts(this.$refs.chart); // 初始化图表配置,设置x轴、y轴等,并渲染数据 chart.setOption({ // ECharts 的配置选项 }); }, }, }, }, }; ``` 6. **配置图表**: 根据实际需求,配置图表样式、刻度、图例等内容,以及如何将数据映射到图表上,如日期格式、颜色分配等。 7. **响应式更新**: 如果数据发生改变,可以通过监听数据变化并在`updated()`或`watch()`生命周期钩子里更新图表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值