В рамках заметки разбираемся с httpd/2 push в Nginx, настраиваем простую конфигурацию и проверяем её работоспособность.
Начиная с версии Nginx 1.13.9, у нас появилась возможность делать push ресурсов клиенту от сервера. Мы можем использовать это для того, что бы заранее инициировать доставку ресурсов, которые могут понадобиться клиенту при обращении к какой-либо странице или скрипту, например.
По мере настройки, мы будем проверять результаты с помощью утилиты nghttp.
Настраиваем HTTP/2 Push.
1. Для начала, убедимся, что на сервере у нас работает Nginx версии 1.13.9 и выше. При меньшей версии, если это допустимо, можно подключить mainline репозиторий Nginx и обновиться до последней версии оттуда.
# nginx -v nginx version: nginx/1.13.9
2. Допустим, у нас имеется страница tryme.html, а на ней доступно два изображения vtotal.png и snoopy.png. Вот так будет выглядеть ответ от сервера при обращении к этой странице с помощью nghttp:
id responseEnd requestStart process code size request path 13 +104.87ms +199us 104.67ms 200 104 /tryme.html
3. Мы знаем что клиент при обращении к странице просмотрит два изображения, а значит, мы можем запушить их ему при вызове страницы. Добавим в конфиг следующее:
location = /tryme.html {
http2_push /vtotal.png;
http2_push /snoopy.png;
}
Сохраняем конфиг, перезапускаем Nginx и с помощью nghttp проверяем как будет выглядеть ответ от сервера сейчас:
id responseEnd requestStart process code size request path 13 +105.75ms +444us 105.31ms 200 104 /tryme.html 2 +472.95ms * +94.58ms 378.37ms 200 74K /vtotal.png 4 +661.04ms * +94.71ms 566.33ms 200 165K /snoopy.png
Как видим, при обращении к странице, сервер отдал сразу же и два изображения пушем.
Допустим, мы хотим пушить нужные ресурсы клиенту не каждый раз, а только при первом посещении сайта. Здесь можно пойти следующим путём — при входе на сайт, посетитель получает пуш нужных ресурсов и cookie, после чего, в рамках обозначенной сессии веб-сервер более пуша делать не будет. Что бы настроить подобное, нам потребуется при помощи add_header добавить два заголовка — саму cookie, и заголвок Link, с которым будет передана информация о пуше ресурсов:
В рамках секции server прописываем следующее:
http2_push_preload on;
location = /tryme.html {
add_header Set-Cookie "session=1";
add_header Link $resources;
}
Затем, уже после секции server, с помощью map обозначаем всё что нам нужно:
map $http_cookie $resources {
"~*session=1" "";
default "</vtotal.png>; as=image; rel=preload, </snoopy.png>; as=image; rel=preload, </style.min.css>; as=style; rel=preload";
}
Итоговый конфиг будет выглядеть примерно так (здесь не существенную часть я урезал):
server {
listen 9.8.7.6:443 http2;
server_name sysadmin.pm www.sysadmin.pm;
ssl on;
ssl_certificate "/sysadmin/sysadmin.pm_le1.crtca";
ssl_certificate_key "/sysadmin/sysadmin.pm.key";
root /var/www/sysadmin;
http2_push_preload on;
location = /tryme.html {
add_header Set-Cookie "session=1";
add_header Link $resources;
}
}
map $http_cookie $resources {
"~*session=1" "";
default "</vtotal.png>; as=image; rel=preload, </snoopy.png>; as=image; rel=preload, </style.min.css>; as=style; rel=preload";
}
Сохраняем, убеждаемся что всё в порядке с помощью nginx -t и перезапускаем веб сервер. Проверяем с помощью nghttp работу пуша:
id responseEnd requestStart process code size request path 13 +102.12ms +431us 101.69ms 200 151 /tryme.html 6 +416.02ms * +91.10ms 324.92ms 200 4K /style.min.css 2 +467.34ms * +90.92ms 376.41ms 200 74K /vtotal.png 4 +677.21ms * +91.05ms 586.16ms 200 165K /snoopy.png
Важный момент здесь — на сегодняшний день, не предусмотрено какого-либо механизма для запрета или разрешения push’а ресурсов, так что здесь всё остаётся на совести администратора. Не стоит злоупотреблять этой возможностью, push следует настраивать только когда он действительно нужен.
Стоит отметить, что далеко не все ресурсы можно корректно отправить пользователю. Например, push шрифтов в браузер Chrome в данный момент не сработает. Кроме того, есть ситуации, когда важна очерёдность пуша тех или иных файлов или скриптов. Пробнее об этом, с разбором и примерами можно ознакомиться вот в этом документе.