前后端架构,前端H5或后台web动态切换(负载均衡)后端Api的baseUrl方案设计

本文探讨了在前后端分离的架构中,如何实现前端代码在不同后端API间动态切换,以适应私有化部署和负载均衡的需求。提出了两种方案:增加后端C作为公共接口和前端A增加配置文件接口。最终选择了前端A增加配置文件接口的方案,以降低研发成本并支持灵活的私有化部署。

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

需求背景

在前后端分离的业务架构中,我们可能会遇到这样的情况,

  • 在私有化部署下,前端一般会将api地址写死,然后请求到后端,为了不修改代码我们希望通过配置的方式来动态的决定请求到那个后端api
  • 同一个前端代码或部署实例,指向多个不同后端api

先讲讲前端部署方式

OSS云存储部署

  • 更快的访问速度
  • js、css、图片等资源对带宽要求高

一般情况下,前端的代码是通过框架开发的,并且框架本质是通过js库进行渲染的,因此这些js会显得额外的大,如果我们将前端代码直接部署到服务器上,那么就要求服务器的带宽成本要很高。为了节省带宽资源我们可以使用OSS。

CDN节点加速

  • 前端资源组成CDN网络服务
  • 当用户访问资源时,根据区域获取延迟最低的OSS资源

前端动态切换后端API

比如说我们现在前端A可以访问后端B后端C,那么我们应该如何切换后端呢?

定义切换的含义

上述描述中,切换可能是指:用户选择的切换,也可能是用户无感知的切换。

用户选择切换

这种一般用于用户手动选择服务商,且多个服务商共用一个前端服务器

用户无感知切换

这种也可以用于多个服务商公用前端服务器的场景,但是切换的条件可以通过域名、二级域名为条件来判断

方案一,增加后端C,公共接口

前端通过固有的后端C地址,来获取后端B、后端C的api列表

优点

  1. 种负载均衡策略非常灵活可以为后端C添加管理后台

缺点

  1. 研发成本高
  2. 后端C地址写死,不利于私有化部署

方案二,前端A增加配置文件接口

我们将静态的配置文件json,放在前端A的服务器中,在前端A中首先通过获取当前服务器的配置json,然后在决定访问那个后端Api

优点

  • 友好的私有化部署,前端A获取负载均衡列表对api地址透明
  • 研发成本低,配置简单

缺点

  • 灵活度没有后台方便
  • 配置难度高,因为需要直接修改json文件

落地实践方案二

在前端A服务器中新增配置文件

前端A在最开始初始化时,就通过Ajax取当前域名下的配置文件

配置文件json

不要在这里传敏感信息

{
    "url": "//xxx",
    "url2": "//xxx2",
    "slb": [
        {
            "matchHost": "",
            "url": "//bb",
            "url2": "//xxx2"
        }
    ]
}
  • json对象的根urlurl2属性表示默认后端接口主备api列表
  • slb数组表示负载均衡列表,即,当matchHost与当前前端host某种方式匹配时,使用对应的主备接口api
  • 当然配置文件可以配很多东西,这里仅提供思路,比如还可以配置http是否强制重定向https,非匹配域名无法访问等,这个配置文件可以理解为一个轻量级的客户端负载均衡策略
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值