NGINX动态位置创建动态og:image

Question

我开发了一个网站，展示商店的一些产品。站点 URL 看起来像这样：

http://testsite.com

该站点具有共享产品的功能（它已经在运行）生成可以在 facebook 或 WhatsApp 或任何地方共享的 link。分享商品的link为：

http://testsite.com/product/1234

其中 1234 是产品 ID。所有产品都有带有 ID 名称的图像。例如：1234.jpg。产品 ID 1234 的图像的 link 是：

http://testsite.com/static/imgs/1234.jpg

该站点使用简单的 NGINX 服务器托管，仅提供文件。

在我的 index.html 文件的开头，我有一个用于共享的默认 og:image：

<meta property="og:image" content="http://testsite.com/static/imgs/main.jpg">

我想让 NGINX 服务器用共享 ID 图像替换这个默认值 og:image。我已经知道如何在 NGINX 上做到这一点。在 NGINX 配置文件 (/etc/nginx/conf.d/default.conf) 中，我使用了 sub_filter 选项。我的 NGINX 配置文件是：

server {
    listen       80;
    server_name *.testsite.com;
    root   /var/www/testsite.com/dist;

    location / {
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    location ~ /product/(.*) {
        index  index.html index.htm;

        try_files $uri $uri/ /index.html;

        sub_filter 'http://testsite.com/static/imgs/main.jpg'
        'http://testsite.com/static/imgs/.jpg';
        sub_filter_once on;
    }
}

此配置适用于 位置 /，但对于 位置 ~ /product/(.*) 它不起作用.

当我在 位置 / 使用任何其他图像测试 sub_fiter 选项时，它会正确替换。

问题：

1) 如何从 URL (http://testsite.com/product/1234) 中获取产品 ID (1234)？ $1 不工作。

2) 我认为当在 location ~ /product/(.*) 进入时，它也会重定向到 location /.如何修复此配置文件以使其按预期工作？

Answer 1

我认为您的 alias 语句有问题。阅读 nginx 文档：

location /i/ { alias /data/w3/images/; }

on request of “/i/top.gif”, the file /data/w3/images/top.gif will be sent.

这意味着在您的情况下，每个 ~/product/(.*) 请求 /var/www/testsite.com/dist/index.html 将在不考虑产品 ID 的情况下发送。您可能希望在 / 上配置别名以避免这种情况。这也可能是您获得 "redirected" 到 / 的原因。

至于 1 美元，它应该像您现在拥有的那样工作。当您修复 alias 时，我认为它会起作用。如果没有，您可以尝试命名匹配：(?<product>[0-9]+) 而不是 (.*)，然后您可以使用 $product 变量来引用 id。

您的代码中还有另一个小故障 — 您在替换时添加了额外的引号。 sub_filter 的第二个参数在引号中两次。

工作示例

更新：好的，我使用以下 nginx 配置在本地主机上运行（在 "Hello World" 上测试）：

        location ~ /product/(\d+)$ {
                set $product ;
                try_files $uri $uri/ /index.html;
        }

        location / {
                if ( $product = '' ) {
                   set $search 'Non-Existent-String';
                }
                if ( $product != '' ) {
                   set $search 'World'; # the string you want to replace
                }

                index index.html index.htm;
                sub_filter '$search' 'Product #$product';
        }

这里的关键是，当您使用 try_files 时，它确实会达到 location /。所以我们需要在/中sub_filter。我们也不希望 sub_filter 常规 /index.html 请求。像 if ($product) sub_filter 这样的东西会很好，但 nginx 是不可能的。所以我只留下 sub_filter 但只为产品请求设置真实的搜索字符串。

NGINX动态位置创建动态og:image

NGINX dynamic location to create dynamic og:image

html

nginx

facebook-opengraph

nginx-location

工作示例