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

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并不熟悉的时候。就不用东搜西搜了。