Веб-сервер в Hetzner + статика в России = ускорение скорости загрузки страницы

Самый частый вопрос при выборе в качестве хостера Hetzner: «Не будет ли сайт тормозить»? Несмотря на то, что ping к Hetzner из России достаточно мал, статика (особенно тяжелая или если ее много) с серверов, размещенных в России, отдается быстрее.

Есть несколько вариантов для достижения скорости оставаясь в Hetzner:

1. Использование российских CDN-сервисов.
2. Проксирование/кэширования статики через сервер/vps, размещенный в России.

Я расскажу, как технически реализовать проксирование/кэширование статики с помощью nginx через сервер, размещенный в России.

Для решения задачи потребуется вынести всю статику на отдельный поддомен, а если статики много — на несколько доменов. К примеру, assets01.example.com, assets02.example.com, …, assets04.example.com (использование больше 4-х доменов может привести к снижению производительности, т.к. DNS-resolve тоже занимает какое-то время). Таким образом, браузер минуя ограничения одновременных коннектов, быстрее загрузит страницу. Важно, чтобы ссылки к статике на странице всегда оставались одинаковыми, т.к. в случае постоянного перемешивания доменов assets01-asstets04 браузер будет ее загружать заново.

В следующем примере статика будет прозрачно проксироваться с сервера в Hetzner и кэшироваться на российском сервере, таким образом повторная загрузка будет происходить только при изменениях на сервере в Hetzner. Отмечу, что в случае, если требуется изменить, к примеру, css, потребуется или изменить имя файла, или цифру в запросе. К примеру, можно использовать адреса assetsXX.example.com/css/styles.css?2342324, а при изменении файла styles.css менять serial на любой другой. Это полезно в том числе при использовании параметра nginx «expires max» — браузер не будет даже проверять обновления, что так же увеличивает скорость открытия страницы.

Конфиг nginx на российском сервере будет выглядеть следующим образом (на сервере в Hetzner так же потребуется прописать алиасы):

# устаревший кэш будет удаляться через 30 дней, максимальный размер кэша 100 Гб proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=static:32m inactive=30d max_size=100g;  server {     listen 80;     server_name assets01.example.com assets02.example.com assets03.example.com assets04.example.com;      # access_log я без необходимости не включаю, т.к. запись в лог на нагруженных сервисах дает лишнюю нагрузку на дисковую подсистему     access_log off;     error_log /var/log/nginx/example.com-err.log;      # этот локейшн полезен для случаев, когда посетитель или поисковик пытается зайти по адресу http://assetsXX.example.com/ - редиректим его на основной сайт     location / {         rewrite ^ http://example.com$uri permanent;     }      # перечисляем расширения, которые будем кэшировать     location ~* \.(jpg|jpeg|gif|png|ico|css|midi|wav|bmp|js|swf|flv|avi|djvu|mp3)$ {         # указываем IP сервера в Hetzner         proxy_pass http://111.111.111.111:80;         proxy_redirect off;         proxy_set_header Host $host;         proxy_set_header X-Real-IP $remote_addr;         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;         proxy_buffer_size 16k;         proxy_buffers 32 16k;          # указываем заголовок expires для ссылок, в которых присутствует serial (к примеру, http://assetsXX.example.com/css/styles.css?2342324)         if ($request_uri ~* "\?[0-9]+$") {             expires max;             break;         }          proxy_cache static;         # делаем кэш валидным в течение 30 дней         proxy_cache_valid 30d;         proxy_ignore_headers "Cache-Control" "Expires";         # строим кэш на основе запроса и его параметров, без учета названия хоста, чтобы кэш для assetsXX не загружался несколько раз (таким образом /css/styles.css?123 и /css/styles.css?321 будут разными объектами)         proxy_cache_key "$uri$is_args$args";     } }