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

Question

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

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

后台：此服务器代理访问许多不同的站点，其中一些是qa实例，一些是生产实例。我们想做的是：

• 在代理的所有qa网站周围添加蓝色边框。
• 当通过特定子域（我们的支持团队使用它们时，让他们知道他们在生产实例上工作时）访问所有生产站点时，在所有生产站点周围添加红色边框。
• 当客户通过标准网址访问生产网站时没有边框。

以下是我们配置的清理版本：

# 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

看起来你需要Lua这个，这个开始的最佳方式是在这个论坛：https://groups.google.com/forum/#!forum/openresty-en 阅读Lua及其可以做的事情，这几乎可以做任何事情。

Answer 2

我们能够通过以下方式获得此效果：

• 向我们的基本模板添加元素以支持在页面周围绘制边框（四个空的div元素包含ID top，bottom，left和{{1 }}。
• 在我们的应用程序中添加一个新的样式表 - right，它是空的，并从我们的基本模板链接到此。
• 添加两个样式表 - border.css和border-support.css，用于设置border-qa.css元素的样式以显示页面周围的边框（这两个样式表之间的区别在于它们将边框设置为不同的颜色）。
• 向Nginx服务器配置添加重写规则，当我们想要将边框应用于页面时，该配置会将div的请求重写为不同的样式表。

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

<强>边界support.css

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

border.css

<强> nginx.conf

我们可能会通过某种方式清理配置以删除一些重复，但这说明了这种方法。

#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; }