☰

Magento 2 与 Nginx 和 Varnish - 如何提供 webp 图像

tag-icon • tag-icon nginx varnish magento images
Magento 2 与 Nginx 和 Varnish - 如何提供 webp 图像

我正在使用以下内容，尝试使用 Nginx 和 Varnish 作为缓存来提供来自 Magento 的 webp 图像。

添加到 /etc/nginx/mime.types

 image/webp webp;

添加到主 nginx.conf

http {
map $http_accept $webp_suffix {
            default   "";
            "~*webp"  ".webp";
          }
}

已添加到 my-site.conf 以用于 Magento 2 服务器块

location /media/ {
        try_files $uri $uri/ /get.php?$args;

        location ~ ^/media/theme_customization/.*\.xml {
            deny all;
        }

        location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2|webp)$ {
            add_header Cache-Control "public";
            add_header X-Frame-Options "SAMEORIGIN";
            expires +1y;
            try_files $uri$webp_suffix $uri$webp_suffix/ /get.php?$args;
            
        }

但我仍然得到 jpg 图像而不是 webp。我做错了什么？

答案1

当map定义如下时：

map $http_accept $webp_suffix {
    default       "";
    "~image/webp" ".webp";
}

当是try_files：

try_files $uri$webp_suffix $uri$webp_suffix/ /get.php$args;

意思是当请求URI为 时/media/image.jpg，nginx 会检查image.jpg.webp用户的HTTP Acceptheader 中是否包含image/webp。

因此，您需要将.webp扩展​​名附加到所有图像文件名之后，而不是替换扩展名。

编辑：

为了使其在原始服务器之外的任何缓存服务器上发挥作用，缓存需要缓存 URL 的不同版本。

为了实现这一点，需要添加

add_header Vary Accept;

到 nginx 配置。这会告诉上游缓存，它应该根据用户的标头存储不同的 URL Accept。

因此，在您的情况下，Varnish 应该配置为遵循Accept标题。

Cloudflare 是另一个问题。它根本不支持Vary: Accept标头，因此这种提供 WebP 图像的方法无法与 Cloudflare 直接配合使用。

可以通过添加 Cloudflare 工作器来解决这个问题，它Accept从请求中提取标头，并在此基础上定义缓存键。

相关内容