Настройка CDN на своем сайте

Дата публикации: 2016-12-02

От автора: если вы давно работаете в сфере разработки, вы знаете, что главная проблема в интернете – это скорость. Все просто: скорость имеет значение, и чем быстрее, тем лучше. Простой способ повысить производительность – использовать CDN. Мы уже поднимали эту тему несколько раз на сайте CSS-Tricks. Простота в том, что вам не нужно переписывать базу данных и вручную редактировать контент, однако многие из нас не уделяют должного внимания производительности в этой области. Хостинг, серверы и cPanel, боже мой!

К нашему счастью, интегрировать CDN не так и сложно. В идеале, вы все настраиваете, и такие сервисы как Google PageSpeed трубят о высокой производительности вашего сайта, что в свою очередь приводит к повышению в поисковой выдаче, увеличению доходов, росту вашей популярности и… ну вы поняли.

В этой статье мы разберем процесс настройки CDN на пользовательском веб-приложении, после чего узнаем про пару фишек, которые помогут выжать максимум из CDN. Как я и сказал, настройка должна быть легкой, так что давайте начнем и сделаем веб быстрее!

Нужно добавить, что настройка CDN для тех, кто работает на CMS типа WordPress, где есть специальные плагины для развертки CDN, может быть даже проще, чем мы сейчас расскажем. Будем считать, что не у каждого есть такая роскошь, поэтому перейдем к более традиционному способу.

Вы потеряли меня на CDN

Не повредит, если мы рассмотрим основные понятия: что такое CDN, для чего они нужны. Начнем с этого.

CDN вытягивает статические файлы с сервера вашего сайта и кэширует их на своих серверах. Когда браузер обращается к вашему сайту, статический контент подгружается через CDN, а не с вашего сайта. Так получается намного быстрее, так как серверы CDN расположены по всему миру. Сам CDN работает по принципу прокси, определяя ближайший к пользователю сервер, что обеспечивает более быструю и удобную доставку контента. Аббревиатура расшифровывается как Content Delivery Network или сеть доставки контента.

Настройка CDN на своем сайте

Так как браузер определяет, когда загружать файлы через CDN, а не с сервера сайта? URL статических файлов переписывается, чтобы он вел на CDN.

К примеру, мы хотим настроить CDN на поддомен. На сайте CSS-Tricks адрес может быть таким cdn.css-tricks.com. Соответственно, все ссылки для файлов будут идти на поддомен.

Грубо говоря, адреса файлов на вашем сайте:

//www.css-tricks.com/image.jpg 
//www.css-tricks.com/style.css 
//www.css-tricks.com/script.js

//www.css-tricks.com/image.jpg

//www.css-tricks.com/style.css

//www.css-tricks.com/script.js

… станут такими:

//cdn.css-tricks.com/image.jpg 
//cdn.css-tricks.com/style.css 
//cdn.css-tricks.com/script.js

//cdn.css-tricks.com/image.jpg

//cdn.css-tricks.com/style.css

//cdn.css-tricks.com/script.js

Браузер посылает запросы на CDN, а не на сервер вашего сайта, что снимает львиную долю нагрузки с сервера и делает ваш сайт быстрее.

Погодите, два сервера на одном сайте?

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

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

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

Как установить CDN на пользовательское приложение

Сервисов много, но чаще других используются Amazon AWS и MaxCDN. Сегодня мы рассмотрим сервис MaxCDN.

Шаг 1: выберите CDN и зарегистрируйте ваш сайт

Если вы решили, что для вашего сайта понадобится CDN, вам понадобится зарегистрироваться. Способов много, очень много, но чтобы не взвешивать плюсы и минусы каждого (хорошая тема для следующей статьи), я приведу ряд сервисов:

Основная задача регистрации – создание области загрузки. Область загрузки в CDN можно представить как корзину, в которой будут находиться все поддерживаемые файлы. Данные будут автоматически вытягиваться из директории, которую вы укажите при первом запросе файла. Для пользователей файлы будут загружаться либо с поддомена CDN, либо с пользовательского домена, который ведет на CDN. Данные из корзины автоматически удаляются по достижении определенного вами промежутка времени.

Шаг 2: создайте URL на вашу CDN

URL CDN – тот адрес, по которому будут скачиваться все ваши файлы после настройки. Есть хорошее правило – использовать простые имена в URL, чтобы можно было легко искать файлы и заменить адреса всех существующих файлов в базе данных.

Как и для других поддоменов, необходимо будет указать cname-запись в настройках DNS вашего хоста.

Настройка CDN на своем сайте

Шаг 3: направьте ваши файлы на CDN

Рассмотрим, как можно создать переменную для CDN адреса, и как ее можно использовать для программной вставки перед URL статических ресурсов. Для чего это нужно: (1) так сложнее допустить ошибки в разметке и (2) так легче работать с URL, которые нам нужно будет менять.

Для этого нам понадобится глобальная переменная для CDN, которую мы будем присоединять слева к URL статических ресурсов. Переменную будем создавать как в PHP, так и в JS, чтобы потом было легче работать. Также эта переменная поможет нам легко выключить CDN, если мы этого захотим. Нужно будет просто заменить значение на /, чтобы вернуть адрес на наш сервер.

Обратите внимание, что следующие примеры – это лишь примеры, не стоит использовать их. Реальные примеры использования могут отличаться.

<?php
define('cdnURL', '//cdn.css-tricks.com/');
?>
<html>
    <head>
        <title>Hello World!</>
        <script type='text/javascript'>
            /* Let’s define a javascript global for using the CDN inside scripts */
            var cdnURL = '<?php echo cdnURL ?>';
        </script>
        
        <link rel='stylesheet' href='<?php echo cdnURL ?>css/style.css' />	
    </head>
    <body>
        <img src='<?php echo cdnURL ?>img/logo.png' />
        <button>Submit</button>
        <script type='text/javascript' src='<?php echo cdnURL ?>js/main.js'></script>
    </body>
</html>

<?php

define('cdnURL', '//cdn.css-tricks.com/');

<html>

<head>

<title>Hello World!</>

/* Let’s define a javascript global for using the CDN inside scripts */

var cdnURL = '<?php echo cdnURL ?>';

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

Или на JS:

(function() {
    var preloadImage = document.createElement('img');
    preloadImage.src = cdnURL + 'img/logo.png';
})();

(function() {

var preloadImage = document.createElement('img');

preloadImage.src = cdnURL + 'img/logo.png';

})();

Вам, как разработчику, придется мыслить нестандартно. Ко всем статическим файлам необходимо подцепить слева переменную cdnURL.

То же самое касается CSS. К примеру, с помощью препроцессоров типа LESS можно создать глобальную CDN переменную и вставлять ее перед адресом ресурсов:

@cdnURL: '//cdn.css-tricks.com/';
button {
    background-image: url('@{cdnURL}img/button.png');
    &:hover {
        background-image: url('@{cdnURL}img/button_hover.png');
    }
}

@cdnURL: '//cdn.css-tricks.com/';

button {

&:hover {

}

… или Sass, коли на то пошло:

$cdnURL: '//cdn.css-tricks.com/';
 
button {
    background-image: url('@{cdnURL}img/button.png');
    &:hover {
        background-image: url('@{cdnURL}img/button_hover.png');
    }
}

$cdnURL: '//cdn.css-tricks.com/';

button {

&:hover {

}

Самое замечательное в том, что можно спокойно отключить CDN, задав переменной cdnURL значение /, что вернет старые адреса. Преимущество тут также в том, что URL CDN можно поменять, просто изменив переменную cdnURL.

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

Поговорим о расширенных настройках

Не так и страшно настраивать CDN, так ведь? Мы разобрались с основными проблемами, теперь можно и повеселиться с продвинутыми настройками, с помощью которых можно оптимизировать загрузку файлов.

Время жизни (TTL)

Обычно на CDN есть время жизни файлов (TTL). Необычный способ сказать CDN, что файлы устарели (задается в секундах). Если файл устарел, сеть заново обращается на сервер за свежей копией.

Чем больше TTL, тем дольше версия файла будет доступна на CDN. Чем меньше TTL, тем чаще сеть будет удалять хранящуюся версию файла и заходить на ваш сервер для скачивания новой версии.

Настройка CDN на своем сайте

Сброс времени жизни файлов

TTL – палка о двух концах. Вы можете обновить файл на своем сервере, но пользователь не увидит этих изменений, пока не устареет TTL, и CDN не обратится к серверу за новой копией.

Эту проблему можно решить сбросом времени жизни файлов. Для этого достаточно изменить имя файла. Если имя файла изменилось, CDN не остается ничего другого, как распознать этот файл как абсолютно новый, а не обновить существующий.

Другими словами, такой адрес: cdn.css-tricks.com/image100.jpg … можно изменить на такой: cdn.css-tricks.com/image101.jpg

И прощай старая версия, привет новая!

Контроль версий файлов через TTL

Так, если на CDN лежит одна версия файла, а на нашем сервере появилась обновленная версия, которую сеть еще не вытянула, то технически у нас есть две версии одного файла. Это можно использовать для контроля версий. Если мы обновили файлы на сервере, это еще не значит, что мы их потеряли. Старые копии можно вернуть, если появится необходимость.

Намного сложнее было бы, если бы мы переименовывали все файлы каждый раз, когда вносим изменения, как мы это делали при сбросе времени жизни. С точки зрения обслуживания это перебор, даже если бы мы создали переменную наподобие cdnURL. Вместо этого мы немного сжульничаем. Наш сайт ведь и посвящен таким вот трюкам.

Сперва мы поместим наши статические файлы в свои папки, т.е. адрес: cdn.css-tricks.com/image.jpg …станет таким: cdn.css-tricks.com/img100/image.jpg.

Сбросить время жизни файла и заставить CDN скачать последнюю версию можно, изменив подпапку, вот так: cdn.css-tricks.com/img101/image.jpg.

Видите разницу? Имя файла не изменилось, но вот путь на сервере теперь новый. Еще раз, CDN не понимает и воспринимает файл как абсолютно новый. Только что мы реализовали искусственную форму контроля версий напрямую в папке!

Но можно сделать еще лучше.

Менять номер папки при каждом обновлении все еще довольно сложно. Лучше слегка изменить файл .htaccess, чтобы он делал тяжелую работу за нас.

Благодаря rewrite правилам мы перехитрим CDN. Мы будем хранить все файлы в одной папке, но сеть будет думать, что папка меняется.

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	RewriteRule ^ver-[0-9]+.[0-9]+.[0-9]+(.*)$ $1 [L,NC]
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteRule ^(.*)$ index.php?/$1 [QSA,L]
</IfModule>

RewriteEngine On

RewriteBase /

RewriteRule ^ver-[0-9]+.[0-9]+.[0-9]+(.*)$ $1 [L,NC]

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^(.*)$ index.php?/$1 [QSA,L]

</IfModule>

Ого! Теперь наш сервер будет подменять номер версии в URL при загрузке нашего примера image.jpg, загружая файл по тому же пути.

Сброс времени жизни всех файлов по требованию

Нам осталось интегрировать наш контроль версий в HTML разметку так, чтобы CDN обновлял все файлы по нашему требованию.

Для этого мы создадим переменную в файле конфигураций, в которой будет храниться номер версии. Далее мы будем импортировать переменную в структуру URL и менять номер версии каждый раз, когда нам понадобится обновить файлы.

В конфиге PHP код может быть такой:

VERSION
1.0.0

Configure::load('cdn');
define('VERSION', file_get_contents(APP.DS."Config".DS."VERSION"));
define('CDN', Configure::read('CDN.path').VERSION.'/'); /* конечный слэш не удалять */

VERSION

1.0.0

Configure::load('cdn');

define('VERSION', file_get_contents(APP.DS."Config".DS."VERSION"));

define('CDN', Configure::read('CDN.path').VERSION.'/'); /* конечный слэш не удалять */

В LESS конфиге код может быть такой:

@VERSION: '1.0.0';

@import 'cdn';
@import 'version';
@CDNURL: '@{CDN}@{VERSION}/';
 
button {
    background-image: url('@{CDNURL}img/button.png');
    &:hover {
        background-image: url('@{CDNURL}img/button_hover.png');
    }
}

@VERSION: '1.0.0';

@import 'cdn';

@import 'version';

@CDNURL: '@{CDN}@{VERSION}/';

button {

&:hover {

}

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

CDN, FTW!

Надеюсь, эта статья развеяла ваши страхи по настройке CDN. Безусловно, задача может оказаться непростой, плюс расширенные настройки, в которых можно потеряться. Однако все должны уметь производить первоначальную настройку, а преимущества от CDN весьма существенны с точки зрения производительности и пользовательского опыта.

Процесс будет еще проще, если вы управляете контентом через CMS типа WordPress, где очень много плагинов.

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

Автор: David Attard

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки: сайтостроение