当前位置: 首页>后端>正文

使用Nginx做前端AB测分流(通过Nginx配置相同地址分布指向不同静态资源)

使用Nginx做前端AB测分流(通过Nginx配置相同地址分布指向不同静态资源),第1张
AB测示例图

前言

之所以标题写这么长,是作者担心各位急需帮助的小伙伴搜不到,于是尽可能多写关键词。

背景

有时候我们会遇到新旧版同时在线对比数据、或者新版逐步代替旧版的上线发布方式,于是就有了AB测。
有时候,我们会选择,新版和旧版使用不同的地址,这样只需要在中间层或者某些其他入口配置不同地址就好了;
在大多数情况下,新版和旧版的域名地址是完全一样的,这就需要我们在同一域名地址下,加载不同的前端资源
当然,方式有很多,如果是Node渲染模板的方式,那对于前端来说再简单不过了,但如果是Nginx呢?因为大多数前端对Nginx不够熟悉;
所以,这篇短文,主要介绍下,如何使用Nginx进行AB测,只针对前端静态资源,非服务的负载均衡;

使用Nginx SplitClient 配置前端静态资源分流

什么是SplitClient

用于实现基于客户端特性的请求分流,它允许您将请求分发到不同的处理路径或后端服务器中,根据某个客户端特性(例如 IP 地址、User-Agent 等)以固定的比例。这可以用于进行 A/B 测试、灰度发布等场景。

也就是说,我们可以使用SplitClient来定义一个分组,如:

http {
    split_clients "${remote_addr}${time_local}" $variant {
        50%       one;
        50%       two;
    }

    server {
        listen 80;
        server_name your_domain.com;

        location / {
            if ($variant = "one") {
                proxy_pass http://backend_server1;
            }
            if ($variant = "two") {
                proxy_pass http://backend_server2;
            }
        }
    }
}

核心是,我们定义了一个用于分流的变量;然后就可以像普通编程那样的,利用这个变量代替原有的Nginx配置了;它可以是服务的代理(服务负载均衡),更可以是静态资源地址
那对于前端来说,我们就可以像这样配置同一个域名分流不同的资源了

http {
split_clients "${remote_addr}${time_local}" $variant {
    50%   "oldDir";
    50%   "newDir";
}

server {
    listen 80 default_server;
    server_name _;
    root XXX;

    location ^~ /path {
      alias /xxx/xxx/xxx/$variant/;
      try_files /$variant/index.html /$variant/index.html /$variant/index.html; 
      if ($request_uri ~* \.(css|js)$) {
        add_header Cache-Control "public,max-age=7*24*3600"; 
      }
    }
}
}

上面是一个简单的示例,当然你的指向静态资源的方式可能是不同的,但不管什么配置,在这里,你都可以用分流变量来替换了;

踩坑

对于一个Nginx新手来说,想要配置一个明明白白的Nginx,说实话,挺难的,我在配置的时候踩了如下几个坑

注意配置文件的格式

大家在网上搜到的Nginx配置,大概都是类似这样的

http {
  server {
  }
}

但有时候,总的Nginx是和我们子项目的Nginx合并的。所以,http {}这一层,就不用再在子工程中写了。如果写了,反而报错,这里需要注意;

split_clients 哈希计算复杂性的选择

对于 split_clients 后面的配置 "${remote_addr}${time_local}"其实大有说法,他的作用是决定使用什么样的分流策略,比如我上面写的,就是根据用户IP${remote_addr}和时间${time_local}生成的随机数来决定的,当然你可以根据你想要的策略来选择,但如果你只写了 ${remote_addr},那你会很难受,因为你总看不错分流变化,因为你的本地IP不变,这里一定要主要,分流策略的选择;
下面列举几个常用的分流策略

  • 根据User-Agent进行分流 split_clients "${http_user_agent}" $variant {}
  • 根据Cookie进行分流 split_clients "${http_cookie_mycookie}" $variant {}
  • 根据时间进行分流 split_clients "${time_local}" $variant {}
  • 根据随机数进行分流 split_clients "${remote_addr}${time_local}" $variant {}

还有其他分流策略,就看自己的需求复杂度了。

写在后面

很久没更新博客了,因为最近很长一段时间,都没有遇到太新鲜的前端问题,今天遇到这个问题,确实也是研究了很久,文章核心很简单,就是在于分组变量的使用。文章的目的也很简单,就是可以快速帮助有问题的你。尤其当你是前端,对Nginx并不熟悉的时候。就不用东搜西搜了。


https://www.xamrdz.com/backend/3vv1924073.html

相关文章: