多个gradio服务实现负载均衡

背景

刚开始在一块GPU卡上部署了一个大模型服务，零星几个人在浏览器上访问倒也不需要考虑并发请求负载过高的问题，用gradio的queue排队机制也能应付过去。但最近体验的人多了，体验感就跟不上了。于是，增加了一块GPU，单个服务用两块GPU，测试后发现仅仅是显存分在两块卡上了，速度并未提升。那怎么办呢，就两块卡部署两个服务吧，各用一块GPU，起码缩短下排队时间吧。那么接下来要解决的问题就是，如何在用户访问一个地址的时候将请求分发到其中一个服务上？

 解决思路

首先，部署两个gradio服务，分别用其中一块GPU；

接着，创建一个nginx服务，监听请求，并将请求分发到其中一个gradio服务地址上；要将被分发到的服务地址写入到相应头中；

最后，用户访问入口，在已有的一个前端页面上建个图标，点击图标触发nginx服务地址请求，用fetch API获取到响应头中被分发到的服务的地址，跳转过去即可。

解决步骤

要实现直接跳转到被分发到的服务的 IP 地址，你可以修改 Nginx 配置，使其将被分发到的服务的 IP 地址包含在 HTTP 响应头中。然后，在客户端收到响应后，可以从响应头中提取被分发到的服务的 IP 地址，并将用户重定向到该地址。

下面是修改后的 Nginx 配置文件：

upstream gradio_servers {
    server 10.67.56.66:8890;
    server 10.67.56.66:8891;
}

server {
    listen 8889;

    location / {
        proxy_pass http://gradio_servers;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        add_header X-Target-Server $upstream_addr;  # 添加一个包含被分发到的服务的 IP 地址的响应头
        add_header 'Access-Control-Expose-Headers' 'X-Target-Server';
    }
}

注意：add_header 'Access-Control-Expose-Headers' 'X-Target-Server'; 这句一定要加上，否则浏览器可能会阻止获取响应头部信息。

前端改动：在用户点击 el-avatar 时发送请求到 Nginx，并根据响应头中的被分发到的服务的 IP 地址执行重定向，代码如下：

<template>
  <el-avatar shape="circle" :size="120" :src="aigcUrl" @click="redirectToTarget"></el-avatar>
</template>

<script>
export default {
  data() {
    return {
      nginxUrl: 'http://your-nginx-address:8889', // 设置 Nginx 的地址
    };
  },
  methods: {
    redirectToTarget() {
      fetch(this.nginxUrl)
        .then(response => {
          // 提取响应头中的被分发到的服务的 IP 地址
          const targetServer = response.headers.get('X-Target-Server');
          if (targetServer) {
            // 执行重定向到被分发到的服务的 IP 地址
            window.location.href = 'http://' + targetServer;
          } else {
            // 如果没有提取到被分发到的服务的 IP 地址，则输出错误信息
            console.error('未找到目标服务器地址');
          }
        })
        .catch(error => {
          console.error('请求错误：', error);
        });
    },
  },
};
</script>

到此问题解决，测试ok！