Вопросы Теги

Magento 2 с Nginx и Varnish - Как обслуживать изображения webp

Я использую следующее, пытаясь обслуживать изображения webp из Magento, используя Nginx и Varnish в качестве кеширования.

Добавлен в /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
задан 3 April 2021 в 12:56
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-заголовок пользователя Accept содержит image/webp.

Таким образом, вам нужно добавить расширение .webp ко всем именам файлов изображений, а не заменять расширение.

Редактировать:

Чтобы это работало на любом кэширующем сервере, помимо оригинального сервера, кэш должен кэшировать разные версии URL.

Для этого нужно добавить

add_header Vary Accept;

в конфигурацию nginx. Это говорит кэшу восходящего потока, что он должен хранить различные версии URL, основываясь на Accept заголовке пользователя.

Таким образом, в вашем случае Varnish должен быть настроен на подчинение заголовку Accept.

Cloudflare - это еще одна проблема. Он не поддерживает Vary: Accept заголовок вообще, так что этот подход к обслуживанию WebP изображений не работает с Cloudflare из коробки.

Это можно обойти, добавив Cloudflare worker, который извлекает заголовок Accept из запросов и определяет ключи кэша на его основе.

2
ответ дан 24 April 2021 в 00:39

Теги

Похожие вопросы