html - 通过 Nginx 代理服务器在页面周围添加边框

Question

我们有一个作为代理服务器运行的 Nginx 实例，它将用户重定向到在非面向公众的服务器上运行的站点，并希望以某种方式配置代理以向某些(但不是全部)服务的每个页面添加彩色边框) 我们代理的网站。谁能想出一种技术可以让我们做到这一点？我们明确希望避免必须更改这些站点的应用程序代码来执行此操作，并且正在寻找仅驻留在代理服务器上的解决方案，因为我们希望根据该站点的 url 显示具有不同边框的相同站点实例访问自。

我想到的一个想法是，如果我们可以让一些代理服务器在向用户提供特定的 css 文件时修改它，但是我们不知道如何处理这样的事情，或者即使这是一个好方法.

背景:此服务器代理访问许多不同的站点，其中一些是质量检查实例，一些是生产实例。我们想做的是:

• 在所有被代理的质量检查站点周围添加蓝色边框。
• 当通过特定子域访问时，在所有生产站点周围添加红色边框(我们的支持团队使用该子域，以便在他们处理生产实例时让他们知道)。
• 当客户通过他们的标准 url 访问生产站点时没有边界。

这是我们配置的净化版本:

# Customer production access - no borders
server {
    listen 80;
    server_name prod.example.com;

    location / {
        proxy_pass http://192.168.1.1;
        proxy_redirect off;
        proxy_set_header Host $host;
    }
}

# Support production access - target server same as above - red border
server {
    listen 80;
    server_name support.prod.example.com;

    location / {
        proxy_pass http://192.168.1.1;
        proxy_redirect off;
        proxy_set_header Host $host;
    }
}

# QA access - blue border
server {
    listen 80;
    server_name qa.example.com;

    location / {
        proxy_pass http://192.168.1.200;
        proxy_redirect off;
        proxy_set_header Host $host;
    }
}

当网站带有边框时，我们希望它看起来像这样:

Answer 1

我们能够通过以下方式获得这种效果:

• 向我们的基本模板添加元素以支持在页面周围绘制边框(四个空的 div 元素，id 分别为 top、bottom、 左 和右。
• 向我们的应用程序添加新样式表 - border.css，它是空的，并从我们的基本模板链接到它。
• 添加两个样式表 - border-support.css 和 border-qa.css，它们为 div 元素设置样式以在周围显示边框页面(这两个样式表的区别在于它们将边框设置为不同的颜色)。
• 在 Nginx 服务器配置中添加重写规则，每当我们想在页面上应用边框时，它会将对 border.css 的请求重写为不同的样式表。

这并不能 100% 满足不修改应用程序代码的目标，但这确实意味着选择显示哪个边框完全由 Nginx 配置控制，这对我们来说是最重要的因素。

border-support.css

这与边框显示技术一起取自 css-tricks.com

#top, #bottom, #left, #right {
    background: #ff0000;
    position: fixed;
}
#left, #right {
    top: 0;
    bottom: 0;
    width: 5px;
}
#left { left: 0; }
#right { right: 0; }

#top, #bottom {
    left: 0;
    right: 0;
    height: 5px;
}
#top { top: 0; }
#bottom { bottom: 0; }

nginx.conf

我们可能有一些方法可以稍微清理配置以删除此处的一些重复，但这说明了方法。

# Customer production access - no borders
server {
    listen 80;
    server_name prod.example.com;

    location / {
        proxy_pass http://192.168.1.1;
        proxy_redirect off;
        proxy_set_header Host $host;
    }
}

# Support production access - target server same as above - red border
server {
    listen 80;
    server_name support.prod.example.com;

    location /static/css/border.css {
        rewrite /static/css/border.css http://$server_name/static/css/border-support.css break;
    }

    location / {
        proxy_pass http://192.168.1.1;
        proxy_redirect off;
        proxy_set_header Host $host;
    }
}

# QA access - blue border
server {
    listen 80;
    server_name qa.example.com;

    location /static/css/border.css {
        rewrite /static/css/border.css http://$server_name/static/css/border-qa.css break;
    }

    location / {
        proxy_pass http://192.168.1.200;
        proxy_redirect off;
        proxy_set_header Host $host;
    }
}