测试nginx网站代码

by Nitish Phanse

由Nitish Phanse

在40行以下代码中使用NGINX进行A / B测试 (A/B testing with NGINX in under 40 lines of code)

A/B Testing, has enabled designers and product managers to get a deep insight into user behavioral patterns.

A / B测试使设计师和产品经理可以深入了解用户的行为模式。

On the one hand, it has allowed product managers more flexibility while conceptualizing user journeys. But on the other, it’s become a developer’s nightmare, being told to make two versions of the same component.

一方面，它使产品经理在概念化用户旅程的同时具有更大的灵活性。 但另一方面，它被告知要制作同一组件的两个版本，这已成为开发人员的噩梦。

“The general concept behind A/B testing is to create an experiment with a control group and one or more experimental groups (called “cells” within Netflix) which receive alternative treatments. Each member belongs exclusively to one cell within a given experiment, with one of the cells always designated the “default cell”. This cell represents the control group, which receives the same experience as all Netflix members not in the test.”

“ A / B测试背后的一般概念是与对照组和一个或多个接受替代治疗的实验组(在Netflix中称为“细胞”)建立实验。 每个成员在给定实验中仅属于一个单元，其中一个单元始终指定为“默认单元”。 这个单元代表对照组，与未参加测试的所有Netflix成员一样，他们将获得相同的体验。”

- Netflix blog

-Netflix博客

当前的生态系统能提供什么？ (What does the present ecosystem offer?)

A lot of companies like Mixpanel, VWO, and Optimisely provide client SDKs (JavaScript code) which have to be added in the head tag of the page HTML. The tests can then be created via a dashboard.

很多公司(例如Mixpanel，VWO和Optimizely)都提供了客户端SDK(JavaScript代码)，这些必须添加到页面HTML的head标签中。 然后可以通过仪表板创建测试。

Although the above methods give you a lot of options when it comes to button colors, component height, and other CSS attributes, it doesn’t really allow you to create two separate flows altogether.

尽管上述方法在按钮颜色，组件高度和其他CSS属性方面为您提供了很多选择，但实际上并不允许您完全创建两个单独的流程。

Also, some external libraries can really hamper your page load times and can create a jittery/laggy experience for users.

此外，某些外部库确实会妨碍您的页面加载时间，并可能给用户带来不安/缓慢的体验。

介绍NGINX (Presenting NGINX)

Nginx is a light web server that offers a bunch of functionality like load balancing, reverse proxying, and HTML compression. It’s easy to setup and really offers a lot of control to developers.

Nginx是一个轻量级的Web服务器，提供了很多功能，例如负载平衡，反向代理和HTML压缩。 它易于设置，确实为开发人员提供了很多控制。

NGINX is a terrific tool for distributing traffic for split tests.

NGINX是用于分配流量以进行拆分测试的绝佳工具。

It’s stable, it’s blazingly fast, and configurations for typical use cases are prevalent online. More complex configuration can be accomplished after just a couple hours exploring the documentation. Small companies may not have resources to spend on paid software for A/B testing, but NGINX provides an option to carry out some form of A/B testing.

它稳定，速度极快，典型用例的配置在网上很普遍。 在浏览文档仅几个小时之后，即可完成更复杂的配置。 小型公司可能没有资源来购买用于A / B测试的付费软件，但是NGINX提供了进行某种形式的A / B测试的选项。

For example, say you want to see which of the forms below will have better conversion:

举例来说，假设您想查看下列哪种表格的转换效果更好：

Your hypothesis might be that fewer form fields imply less data being inputted by the user, thus leading to more conversions.

您的假设可能是更少的表单字段意味着用户输入的数据更少，从而导致更多的转换。

So we can define two buckets: Version A and Version B. The former is the control group, which is shown to 80% of the traffic. The latter is the test group, which forms the remaining 20% of the traffic.

因此，我们可以定义两个存储桶：版本A 和版本B。前者是对照组，显示为80％的流量。 后者是测试组，占剩余流量的20％。

Port 7770 will host one bucket of the code, whereas port 7777 will host the second bucket of the code.

端口7770将托管代码的一个存储桶，而端口7777将托管代码的第二个存储桶。

码 (Code)

Your nginx.conf file can be modified as shown below.

您的nginx.conf文件可以如下所示进行修改。

http {    # ...    # application version 1a    upstream version_a {        server server 127.0.0.1:7770; ## Can be an external ip too    }

# application version 1b    upstream version_b {        server server 127.0.0.1:7777; ## Can be an external ip too    }

split_clients "app${remote_addr}${http_user_agent}${date_gmt}"   $appversion {        80%     version_1a;        *       version_1b;    }

server {        # ...        listen 80;        location / {            proxy_set_header Host $host;            proxy_pass http://$appversion;        }    }}

Create two upstreams, one for each bucket.

创建两个上游，每个存储桶一个。

The split_client directive helps us divert traffic along with the specified weightage to a particular upstream.

split_client 指令可帮助我们将流量和指定的权重转移到特定的上游。

The app${remote_addr}${http_user_agent}${date_gmt}appversion creates a hash based on the above parameters and is used by nginx to log a request made to either bucket. Preferably these parameters are those which are pertaining solely to a user, like user_agent, remote addr.

app${remote_addr}${http_user_agent}${date_gmt}appversion 根据上述参数创建一个哈希，nginx使用该哈希记录对任一存储桶发出的请求。 优选地，这些参数是仅与用户有关的那些参数，例如user_agent ， remote addr 。

Ok — so this will work, but it doesn’t give the user a persistent experience.

好的-这样就可以了，但是并不能给用户持久的体验。

If I refresh my page, there is a chance I’ll switch between buckets, and this can be a horrid user experience.

如果刷新页面，则有可能在存储桶之间切换，这可能会带来可怕的用户体验。

Consider the above case: imagine trying to fill a six field form, and then suddenly, on refreshing, seeing a two field form. Confusing!

考虑上面的情况：假设尝试填写一个六字段表单，然后在刷新时突然看到一个两字段表单。 令人困惑！

不同的方法 (A different approach)

1. Proxy pass request to either bucket
   代理通过请求到任一存储桶
2. Set a cookie with an expiration time equal to duration of test.
   设置cookie的有效时间等于测试持续时间。
3. Check for cookie existence and proxy pass to correct bucket to ensure a uniform user experience.
   检查cookie的存在和代理传递以更正存储桶，以确保统一的用户体验。

We will use NGINX’s map directive and map the $cookie_name variable to different buckets that we have created.

我们将使用NGINX的map指令并映射$cookie_name 变量以创建不同的存储桶。

http {    # ...    # application version a    upstream version_a {        server server 127.0.0.1:7770; ## Can be an external ip too    }

# application version b    upstream version_b {        server server 127.0.0.1:7777; ## Can be an external ip too    }    split_clients "app${remote_addr}${http_user_agent}${date_gmt}"     $appversion {        80%     version_a;        *       version_b;    }

map $cookie_split_test_version $upstream_group {        default $appversion;        "version_a" "version_a";        "version_b" "version_b";    }

server {        # ...        listen 80;        location / {            add_header Set-Cookie "split_test_version=$upstream_group;Path=/;Max-Age=518400;";

proxy_set_header Host $host;

if ($upstream_group = "version_a") {                proxy_pass http://127.0.0.1:7777;                break;            }

if ($upstream_group = "version_b") {                proxy_pass http://127.0.0.1:7770;                break;            }

proxy_pass http://$appversion;        }    }}

As it’s a little hard to format the above code…

由于格式化上面的代码有点困难……

结论 (Conclusion)

1. NGINX provides a very simple API to create an A/B test environment.
   NGINX提供了一个非常简单的API来创建A / B测试环境。
2. Allows for multiple buckets to be created. The example above shows two buckets, but we can split traffic and create more buckets.
   允许创建多个存储桶。 上面的示例显示了两个存储桶，但我们可以拆分流量并创建更多存储桶。
3. As the same code is hosted on two ports, deployment can become tricky (presently I have two branches: a master and a test branch), whether done off a different branch or from the same one.
   由于将相同的代码托管在两个端口上，因此部署可能会变得很棘手(目前我有两个分支：一个主分支和一个测试分支)，无论是在其他分支上进行还是从同一分支进行。

4. Carrying more than one A/B test can become tricky. Yes, you can use the location directive and set different cookies based on the required tests, but having two tests (Test 1, Control: 80, Test 20 & Test 2 Control: 50, Test 50) is impossible. That said, you should not have more than one A/B test at a time per page. Otherwise you will end up having 2^n versions of your page, where n is the number of tests, and tracking conversions will be hell.

   进行多个A / B测试可能会很棘手。 是的，您可以使用location指令并根据所需的测试设置不同的cookie，但是不可能有两个测试( Test 1，Control：80，Test 20＆Test 2 Control：50，Test 50 )。 就是说，您每页一次不能进行多个A / B测试。 否则，您最终将拥有2 ^ n个页面版本，其中n是测试数量，并且跟踪转换将是地狱。

5. Tracking can now be done at a very granular level as the code bases are effectively separate.
   由于代码库是有效分离的，因此现在可以在非常精细的级别上进行跟踪。

Do let me know if I’ve made any mistake in the above. Happy to correct and learn. Hope you liked the article.

如果我在上面有任何错误，请告诉我。 乐于纠正和学习。 希望您喜欢这篇文章。

PS: Did anyone notice it is less than 40 lines of code?!

PS：有没有人注意到它少于40行代码？

翻译自: https://www.freecodecamp.org/news/a-b-testing-with-nginx-in-40-lines-of-code-d4f94397130a/

测试nginx网站代码