如何结合 2 个重写规则在 Nginx 中加载 webp 文件？

Question

我是运行一个Nginx的WordPress网站

并加载 Webp 文件，使用以下 Rewight 规则。

只有一个代码时，它可以正常工作。

    location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif)$ {
    if ($http_accept !~* "image/webp") {
      break;
    }
    add_header Vary Accept;
    expires 365d;
    try_files /wp-content/uploads-webpc/$path.$ext.webp $uri =404;
  }


    location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif)$ {
    if ($http_accept !~* "image/webp") {
      break;
    }
    add_header Vary Accept;
    expires 365d;
    try_files /wp-content/$path.$ext.webp $uri =404;
  }

但是我的 webp 文件分为两个路径。

/wp-content/$path.$ext.webp
/wp-content/uploads-webpc/$path.$ext.webp

如果我将这两个代码同时粘贴到 nginx 的 site.conf 中，它将无法工作。

我想知道如何将这两者合二为一。

谢谢。

Answer 1

我不确定你想用 if ($http_accept !~* "image/webp") { break; } 部分实现什么。如果您认为这是退出当前位置并搜索下一个位置的一种方式，那您就错了。 break 指令将停止处理来自 ngx_http_rewrite_module (but you haven't had any more of them, so it simply does nothing) and your configuration will serve the request with the WEBP file no matter if the client browser support it or not. The classic way to serve the WEBP file in case the Accept HTTP header contains the image/webp string is to use the following map 块的任何进一步指令：

map $http_accept $suffix {
    ~image/webp    .webp;
    default        '';
}
server {
    ...
    location ~ \.(jpe?g|png|gif)$ {
        add_header Vary Accept;
        try_files $uri$suffix $uri =404;
    }
    ...
}

根据您想首先检查的这两个文件中的哪一个，您应该使用

try_files /wp-content/$path.$ext$suffix /wp-content/uploads-webpc/$path.$ext$suffix $uri =404

或

try_files /wp-content/uploads-webpc/$path.$ext$suffix /wp-content/$path.$ext$suffix $uri =404

你的问题只有 location 个障碍。

如何结合 2 个重写规则在 Nginx 中加载 webp 文件？

How to combine 2 rewrite rule to load webp file in Nginx?

regex

wordpress

nginx