Прикручиваем CDN к своему сайту — ничего сложного!

Возможно вы хотели настроить свой сайт так, чтобы он отдавал содержимое статических файлов используя CDN (Content Delivery Network). Думаю объяснять преимущества CDN не стоит, информации об этом очень много. В данной статье я хочу описать простое решение, позволяющее начать использование CDN без необходимости модификации исходных тектов сайта. Именно перспектива переписывания исходных текстов может остановить владельца сайта от использования CDN и пойти по менее эффективному на мой взгляд пути наращивания мощности хостинга. Итак, начнем.

Исходные данные — сайт, работающий на не очень быстром хостинге. Посещаемость растет и такие решения как кеширование файлов уже не приносят желательного результата. Перейти на более дорогой тарифный план можно, но есть решение эффективнее и дешевле. А именно — использование CDN. После изучения вопроса становится понятно, что нужно каким то образом перенести все статические файлы в CDN и поменять ссылки на всех страницах чтобы файлы загружались с CDN а не из оригинального их расположения. Перспектива править код сайта не радует…

Однако можно обойтись и без переписывания кода используя Rewrite Rules. С помощью rewrite можно легко подменить ссылки на всех наших страницах без особых усилий с нашей стороны.

Так как мой сайт работает под IIS я использую правила rewrite в файле web.config. Подобное правило можно добавить и для rewrite_mod для сайтов работающих под Apache. Желающие могут по аналогии переписать эти правила. (Комментарии приветствуются!)

Рассмотрим два CDN провайдера: можно использовать либо бесплатный Coral CDN либо Amazon CloudFront отличий в настройке rewrite практически не будет.

Начнем с Amazon Cloud Front — сервис CDN от Amazon. Да, не бесплатно … но денег стоит совсем небольших, учитывая создаваемый эффект и экономию на хостинге.

Будем считать что у вас уже есть учетная запись Amazon и опустим шаги, необходимые для регистрации этой учетной записи. Для начала идем в консоль управления Amazon, настройки CloudFront

CDN-Step-1

Создаем там новый distribution, выбираем тип «Download»

CDN-Step-2

Настраиваем раздел Origin Settings

CDN-Step-3

Origin Domain Name — указываем домен нашего сайта

Origin ID — любой уникальный идентификатор

Все остальные настройки оставляем как есть, значения по умолчанию вполне устроят многих. Если есть желание можно поменять настройки кеширования. Я оставил все так как было.

Нажимаем кнопку create distribution и видим что запись для нашего сайта создана

CDN-Step-4

Смотрим настройки distribution для чего кликаем на иконке «i»

CDN-Step-5

Нас сейчас интересует domain name который был создан для нашего сайта («d3v6yo86r1ua0u.cloudfront.net»)

Для случая Coral CDN ничего настраивать не нужно, просто добавляем «.nyud.net» к нашему домену, в моем случае получится «blog.dvteam.ru.nyud.net». В данном случае не нужно создавать учетную запись, все работает без регистрации на сайте CDN провайдера. Вообще, я не очень люблю бесплатные решения из за того, что работать они могут нестабильно и никто ничего не гарантирует. В случае CDN скрорость загрузки файлов мягко говоря не радует. Однако эффект снижения нагрузки на сервер конечно же сохраняется.

Прописываем правило (output rule) для rewrite в web.config которое будет заменять все ссылки на статические файлы на наших страницах на ссылки CDN. Просто дописываем «правильный» домен ко всем ссылкам, имя домена мы теперь знаем (см. выше). Раздел, в который нужно добавить правила: System.WebServer

<rewrite>
    <outboundRules>
        <clear />
        <rule name="CDN" preCondition="ResponseIsHtml" patternSyntax="Wildcard" 
            stopProcessing="true">
            <match filterByTags="Img, Input, Link" pattern="http://blog.dvteam.ru/*" />
            <conditions logicalGrouping="MatchAll" trackAllCaptures="true" />
            <action type="Rewrite" value="http://d3v6yo86r1ua0u.cloudfront.net{R:1}" />
        </rule>
        <preConditions>
            <preCondition name="ResponseIsHtml">
                <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
            </preCondition>
        </preConditions>
    </outboundRules>
</rewrite>

Не всегда все сразу начинает работать — к сожалению rewrite rule которое мы добавили несовместимо с модулем сжатия страниц. Отключаем динамическое сжатие вот таким образом:

<urlCompression doDynamicCompression="false" doStaticCompression="true" dynamicCompressionBeforeCache="true" />

Итог: ссылки на страницах заменены на ссылки в CDN. При первом запросе файла с CDN он автоматически скачивается с оригинального местоположения. Последующие обращения к файлу работают с копией файла из CDN. Время жизни файла в CDN по умолчанию совпадает с тем, которое отдает наш сайт, но это поведение можно переопределить и заставить CDN держать файл в кеше дольше или наоборот очищать кеш раньше.

В общем то и все, проверяем как все работает (в случае с Amazon работает весьма неплохо!) и экономим немного денег на оплате хостинга 🙂

 

Прикручиваем CDN к своему сайту — ничего сложного!: 1 комментарий

  1. bespontoff

    спасибо, даже в 2017 полезная инфа, особенно что касается амазона, такое ощущение что про него вообще даже в рунете нет мануала для начинающих, где не читаю — везде инфа для каких-то гуру.Спасибо короч.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *