Разработчикам

BitrixVM, nginx, подмена jpg/png на webp

RSS

BitrixVM, nginx, подмена jpg/png на webp, Nginx не замечает правила переадресации в конфиге

Пользователь 346607

Заглянувший

Сообщений: 11 Баллов: 2 Регистрация: 08.06.2015

23.11.2018 15:10:36

Всем здравствуйте!
Уже второй день мучаюсь с этой поставленной задачей.

Стоить задача с подменой графики по аналогии с этим мануалом

Что имеется:
- Есть сервер на котором крутится сайт (CentOS, BitrixVM, nginx+httpd)
- Самописный скрипт который обходит папку upload и конвертирует имеющиеся картинки в формат webp и кладёт рядом (image.jpg и image.jpg.webp лежат рядом)

В сети полно инструкций для конфига nginx что бы отдавать формат webp по старому .jpg адресу, если его поддерживает браузер. Ни одна из них не срабатывает. Перепробовал варианты и с map и без.
В файл ssl.s1.conf и s1.conf в блок server {} добавляю такой конфиг:

Код
set $webp_suffix ""; if ($http_accept ~* "webp") { set $webp_suffix ".webp"; } location ~ \.(gif\|jpg\|png)$ { add_header Vary "Accept-Encoding"; try_files $uri$webp_suffix $uri $uri/ =404; }

Думал что проблема в правилах, они неправильные и нерабочие. Но поднял тестовый сервер (centos,nginx), залил пару картинок для теста, добавил в конфиг это же правило и всё заработало. BitrixVM как будто не видит эти правила вовсе.

Ай нид хелп. Подскажите пожалуйста в какую сторону копать...

Пользователь 1329903

Эксперт

Сообщений: 302 Баллов: 46 Регистрация: 15.08.2017

23.11.2018 23:20:12

В файле /etc/nginx/bx/conf/bitrix_general.conf есть location

Код
location ~* \.(css\|js\|gif\|png\|jpg\|jpeg\|ico\|ogg\|ttf\|woff\|woff2\|eot\|otf)$ { error_page 404 /404.html; expires 30d; access_log off; log_not_found off; }

Порядок в котором nginx выбирает location указан в документации

Пользователь 346607 Заглянувший Сообщений: 11 Баллов: 2 Регистрация: 08.06.2015	#3 26.11.2018 12:58:11 red_eye, большое спасибо! Тему можно закрывать, проблема решена

Пользователь 3410

Эксперт

Сообщений: 265 Баллов: 54 Регистрация: 03.02.2006

07.12.2018 12:27:50

Цитата
akazakov написал: red_eye , большое спасибо! Тему можно закрывать, проблема решена

Если будет время, распишите свое решение webp для BitrixVM.

Пользователь 346607

Заглянувший

Сообщений: 11 Баллов: 2 Регистрация: 08.06.2015

07.12.2018 13:18:03

Цитата
Сергей Тетерлев написал: Если будет время, распишите свое решение webp для BitrixVM.

Добрый день.
Касаемо настроек nginx - завелось вот такое решение:

В самое начало файла /etc/nginx/bx/conf/bitrix_general.conf, сразу после комментариев добавить следующее:

Код

set $webp_suffix "";
if ($http_accept ~* "webp") {
        set $webp_suffix ".webp";
}

location ~* \.(jpeg|jpg|png)$ {
        add_header Vary "Accept-Encoding";
        try_files $uri$webp_suffix $uri $uri/ =404;
        #expires 30d;
}

Потом перезапустить nginx

Код
$ systemctl restart nginx

Для самой конвертации картинок, я написал по быстрому на коленке консольный скрипт на php, который запускается по крону, обходит рекурсивно заданную директорию и через shell_exec() запускает cwebp для конвертации.
За рецептом в ЛС

Пользователь 360901 Заглянувший Сообщений: 13 Регистрация: 17.07.2015	#6 01.01.2019 12:29:58 а модуль https://developers.google.com/speed/pagespeed/module/ почему не стали использовать?

Пользователь 269064

Заглянувший

Сообщений: 4 Регистрация: 06.07.2014

10.01.2019 18:38:34

Цитата

akazakov написал:

Цитата
Сергей Тетерлев написал: Если будет время, распишите свое решение webp для BitrixVM.

Добрый день.
Касаемо настроек nginx - завелось вот такое решение:

В самое начало файла /etc/nginx/bx/conf/bitrix_general.conf , сразу после комментариев добавить следующее:

Код

 set  $webp_suffix   "" ;
 if  ( $http_accept  ~*  "webp" ) {
        set  $webp_suffix   ".webp" ;
}

location ~* \.(jpeg|jpg|png)$ {
        add_header Vary  "Accept-Encoding" ;
        try_files  $uri  $webp_suffix   $uri   $uri / = 404 ;
         #expires 30d; 
}

Потом перезапустить nginx

Код
$ systemctl restart nginx

Второй день уже бьюсь без толку! Настройки в апач тоже вносили?

Пользователь 346607

Заглянувший

Сообщений: 11 Баллов: 2 Регистрация: 08.06.2015

28.01.2019 16:12:00

Цитата
Илья Шабаршин написал: а модуль https://developers.google.com/speed/pagespeed/module/ почему не стали использовать?

Слишком много плясок с пересборкой nginx с модулем ngx_pagespeed
И еще не известно будет ли потом обновляться nginx в составе с BitrixVM, надо тестить...
Если есть готовый мануал прямо под bitrixvm - рад буду ознакомиться

Алексей Шафранский

Администратор

Сообщений: 1139 Баллов: 220 Регистрация: 28.07.2008

28.01.2019 16:22:41

Цитата
akazakov написал: Слишком много плясок с пересборкой nginx с модулем ngx_pagespeedИ еще не известно будет ли потом обновляться nginx в составе с BitrixVM, надо тестить...

nginx будет обновляться с обновлением машины. И его пересборка с любым модулем будет затерта, если конфиги добавите - то и не перезапуститься(

Пользователь 57829

Гуру

Сообщений: 3754 Баллов: 320 Регистрация: 17.02.2010

#10

28.01.2019 16:49:17

Алексей Шафранский,а у меня вопрос, почему то bx-nginx не подхватил динамический модуль, пришлось пересобирать вместе с модулем ngx_pagespeed ваш пакет. Может стоит в эту сторону подумать, чтобы научить bx-nginx подхватывать динамические модули?

Карточка партнера Наш сайт

Пользователь 346607

Заглянувший

Сообщений: 11 Баллов: 2 Регистрация: 08.06.2015

#11

28.01.2019 17:15:19

Цитата

Алексей Шафранский написал:

Цитата
akazakov написал: Слишком много плясок с пересборкой nginx с модулем ngx_pagespeedИ еще не известно будет ли потом обновляться nginx в составе с BitrixVM, надо тестить...

Может обсудите там на очередной планерке включение ngx_pagespeed в состав стандартной BitrixVM?
По умолчанию можно сделать отключенной, и включать через menu.sh
Или хотя бы добавить в скрипт установщика возможность сборки с этим модулем через флаг типа --enable-pagespeed?

Фишка очень нужная и актуальная в современном вебе

P.S. Исправьте пожалуйста опечатку в названии темы. Только сейчас заметил

Пользователь 57829 Гуру Сообщений: 3754 Баллов: 320 Регистрация: 17.02.2010	#12 28.01.2019 17:45:51 akazakov, я собрал https://dev.1c-bitrix.ru/community/forums/messages/forum32/topic112215/message572529/#message572529 Особого профита не увидел. Карточка партнера Наш сайт

Алексей Шафранский

Администратор

Сообщений: 1139 Баллов: 220 Регистрация: 28.07.2008

#13

29.01.2019 18:15:14

Цитата
akazakov написал: Может обсудите там на очередной планерке включение ngx_pagespeed в состав стандартной BitrixVM?По умолчанию можно сделать отключенной, и включать через menu.sh

Тикет у нас есть. В нем один запрос на эту фичу, и вот ваш, второй) Поднял вопрос, спросил разработку.

Цитата
akazakov написал: Или хотя бы добавить в скрипт установщика возможность сборки с этим модулем через флаг типа --enable-pagespeed?

Слишком сложно) Если и делать, то сразу собирать nginx вместе с ним. Включать или нет - через меню каждый решит сам. Кроме включения там еще настроить надо, и тут уже сложней. И насколько знаю, не все модули с ним работают корректно: ошибки вида ломаются формы, попапы не отвечают и т.д.

Пользователь 346607

Заглянувший

Сообщений: 11 Баллов: 2 Регистрация: 08.06.2015

#14

01.02.2019 15:55:29

Ах да, забыл рассказать про одну деталь, и возможные грабли на которые вы можете наступить...

После настройки nginx на отдачу webp, обязательно ОТКЛЮЧИТЕ Bitrix CND для картинок!!!

CND битрикса отправляет запросы на ваш сайт с неверными заголовками, и забирает webp графику.
Но когда отдаёт её, не проверяет заголовки.
По этому поводу я писал в ТП, но там меня отфутболили. Может кто нибудь создать запрос в https://idea.1c-bitrix.ru и скинуть ссылку сюда? А то мне лень)
А все остальные уже проголосуют за идею и попробуем протолкнуть реализацию этого функционала.

Скрытый текст
------------------------------------

Пользователь 80740

Постоянный посетитель

Сообщений: 98 Баллов: 17 Регистрация: 13.01.2011

#15

14.02.2019 16:58:51

Цитата
- Самописный скрипт который обходит папку upload и конвертирует имеющиеся картинки в формат webp и кладёт рядом (image.jpg и image.jpg.webp лежат рядом)

скриптом не поделитесь?
спасибо

Пользователь 1347653 Заглянувший Сообщений: 22 Баллов: 2 Регистрация: 15.09.2017	#16 14.02.2019 17:51:19 Мне так и не удалось на VM заставить подхватывать альтернативы в случае их наличия

Пользователь 2922621

Заглянувший

Сообщений: 1 Регистрация: 13.02.2019

#17

18.02.2019 18:41:18

Цитата
akazakov написал: set $webp_suffix ""; if ($http_accept ~* "webp") { set $webp_suffix ".webp"; } location ~* \.(jpeg\|jpg\|png)$ { add_header Vary "Accept-Encoding"; try_files $uri$webp_suffix $uri $uri/ =404; expires -1; }

Чтоб заработал CDN нужно поменять как выделил жирным. Проверил на CloudFlare - просто перестает кешировать картинки. Каждому браузеру отдает каждый раз не из кеша CDN, а с nginx сервера. Но в Cloudflare можно выставить для кеширования Respect Existing Headers. Тогда он будет учитывать заданные настройки кеширования для объектов. Как там в CDN (учитывает или перезаписывает) не в курсе. Кто может - проверьте. Пропишите, вычистите кеш на CDN. Зайдите на какую-то внутреннюю страницу сайта сначала с Chrome, потом на эту же с Safari. Хочу отметить, что картинки кешироваться на CDN не будут при это. Но этот костыль позволит оставить CDN как услугу в целом для всего остального контента.

Причем PageSpeed Insights считает что кеш прописан (тут речь о кеше в браузере). Видимо срабатывает директива ниже
я там изменил
location ~* \.(css|js|gif|png|jpg|jpeg|ico|ogg|ttf|woff|eot|otf)$
на
location ~* \.(css|js|webp|gif|png|jpg|jpeg|ico|ogg|ttf|woff|eot|otf)$

Пользователь 261039

Заглянувший

Сообщений: 4 Регистрация: 18.07.2014

#18

27.02.2019 19:26:47

Цитата
akazakov написал: set $webp_suffix ""; if ($http_accept ~* "webp") { set $webp_suffix ".webp"; } location ~* \.(jpeg\|jpg\|png)$ { add_header Vary "Accept-Encoding"; try_files $uri$webp_suffix $uri $uri/ =404; #expires 30d; }

CDN выключен, всё перепробовал, не получается подмена.

Вижу Response headers: "vary: Accept-Encoding", но картинка грузиться с расширением .png, а не .webp

Подскажите пожалуйста что делать?

Пользователь 346607

Заглянувший

Сообщений: 11 Баллов: 2 Регистрация: 08.06.2015

#19

27.02.2019 19:51:36

Цитата

Иван Леонов написал:

Цитата
akazakov написал: set $webp_suffix ""; if ($http_accept ~* "webp") { set $webp_suffix ".webp"; } location ~* \.(jpeg\|jpg\|png)$ { add_header Vary "Accept-Encoding"; try_files $uri$webp_suffix $uri $uri/ =404; #expires 30d; }

Так в том то и смысл, что расширение остаётся тоже, но сам контент подменяется.
Смотрите в DevTools во вкладке Network колонку Type. Должно показывать webp, если конечно у файлов есть рядом лежащие .webp копии

Пользователь 1215547

Посетитель

Сообщений: 31 Баллов: 5 Регистрация: 10.07.2017

#20

05.04.2019 21:42:59

Цитата

akazakov написал:

Цитата

Иван Леонов написал:

Цитата
akazakov написал: set $webp_suffix ""; if ($http_accept ~* "webp") { set $webp_suffix ".webp"; } location ~* \.(jpeg\|jpg\|png)$ { add_header Vary "Accept-Encoding"; try_files $uri$webp_suffix $uri $uri/ =404; #expires 30d; }

Здравствуйте! Такая же ситуация. Type везде jpeg... Если не сложно, прикрепите полное содержание файла /etc/nginx/bx/conf/bitrix_general.conf. Заранее спасибо!

Обновление

Получилось) Делюсь опытом. Вот что у меня сработало:

Скрипт .sh. Пригодится тем, у кого уже куча картинок в папке upload. Настройки сжатия можно выставить самостоятельно. Можно конечно и cron использовать.

Скрытый текст

Внес изменения в файл /etc/nginx/bx/site_avaliable/bx_ext_ssl_vashsite.ru.conf / выделил красным новые строчки

Полное содержание файла

Скрытый текст

# Ansible managed
#########################################################
# configuration for https-site:
# site_name: vashsite.ru
# site_root: /home/bitrix/ext_www/vashsite.ru
# site_composite: enable
# site_composite_id: 05
# site_composite_var: $is_site_composite_05
# site_composite_storage: files
# web_cluster: disable
##########################################################

server {
listen 443 http2;
server_name www.vashsite.ru;
return 301 $scheme://vashsite.ru$request_uri;

include bx/conf/site3.bx_ssl.conf;
}

server {
listen 443 http2;
server_name vashsite.ru;
location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|woff2|webp)$ {
if ( $http_accept ~* webp ) {
set $webp "A";
}

if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) {
set $file_without_ext $1;
}

if ( -f $file_without_ext.webp ) {
set $webp "${webp}E";
}

if ( $webp = AE ) {
add_header Vary Accept;
rewrite ^(.+)\.(png|jpe?g)$ $1.webp break;
}

#Кеш - на ваше усмотрение
expires 365d;
}

access_log /var/log/nginx/vashsite.ru_access.log main;
error_log /var/log/nginx/vashsite.ru_error.log warn;
# Enable SSL connection
include bx/conf/site3.bx_ssl.conf;

set $docroot "/home/bitrix/ext_www/vashsite.ru ";
root "/home/bitrix/ext_www/vashsite.ru ";
proxy_ignore_client_abort off;
index index.php;
server_name_in_redirect off;

set $proxyserver "http://127.0.0.1:8887";
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host:443;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Scheme $scheme;
proxy_set_header HTTPS YES;

if ($request_uri ~* "^(.*/)index\.php$") { return 301 https://$host$1; }
if ($request_uri ~* "^(.*/)index\.html$") { return 301 https://$host$1; }

set $imcontenttype "text/html; charset=utf-8";
add_header X-Frame-Options SAMEORIGIN;
# composite variables
set $composite_cache "bitrix/html_pages/${host}${composite_key}/index@${args}.html";
set $composite_file "${docroot}/${composite_cache}";
# config file
set $composite_enabled "${docroot}/bitrix/html_pages/.enabled";
# if test pass through general tests:
set $use_composite_cache "";
# global site test, the same for all sites on the server
if ($is_global_composite = 1) {set $use_composite_cache "A";}
# personal site tests, generated by site config
if ($is_site_composite_05 = 1) {set $use_composite_cache "${use_composite_cache}B";}

# Include parameters common to all websites
include bx/conf/bitrix_general.conf;

# main location with processing composite
location / {
if (-f $composite_enabled) { se t $use_composite_cache "${use_composite_cache}C"; }
# test cache file exists
if (-f $composite_file) { se t $use_composite_cache "${use_composite_cache}D"; }

if ($use_composite_cache = "ABCD") { rewrite .* /$composite_cache last; }
proxy_pass $proxyserver;
}

# Include munin and nagios web
include bx/server_monitor.conf;
}

Я так понимаю, что при очередном обновлении bitrix vm настройки не должны слететь. Или я не прав?)

Пользователь 79802

Заглянувший

Сообщений: 18 Баллов: 1 Регистрация: 28.12.2010

#21

18.04.2019 04:56:19

Илья Бурый, Здравствуйте.
Спасибо за советы. Но, изображения с сайта так же используются в мобильном приложении. Не все мобильные устройства поддерживают webp. Думаю решить проблему отдачей мобильному приложению только оригинальных jpg. Подскажите правило ngnix для редиректа файла с расширением jpg_m на файл jpg в обход подключения файла webp?

Заранее спасибо

Пользователь 226691

Заглянувший

Сообщений: 14 Баллов: 1 Регистрация: 21.11.2013

#22

21.06.2019 15:42:24

Все кто пытаются решить проблему "Используйте современные форматы изображений" в Битриксе, могу посоветовать разместить сайт на шаред хостинге, уже автоматически настроена проверка на наличия картинок в формате WebP.

Верстка и программирование сайтов на Битриксе. ИТ-аутсор для СНГ.

Пользователь 90197 Эксперт Сообщений: 745 Баллов: 64 Регистрация: 29.04.2011	#23 26.06.2019 15:34:45 Вопрос актуален! Мой модуль Битрикс: Мультиязычность - инфоблоки на разных языках https://proger.com.ua/~ao9ln