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

Самый частый вопрос при выборе зарубежного хостера (на примере 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";
    }
}

Автор: olemskoi

Источник