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