Как настроить WordPress для использования Content Delivery Network (CDN)

admin

Исследования показали, что если загрузка Вашей веб-страницы занимает больше 5 секунд, Вы теряете около 50% просмотров и продаж. Можно ускорить работу wordpress (система управления содержимым сайта) используя CDN (Content Delivery Network, сеть доставки контента), чтобы представлять контент пользователю быстрее и эффективнее. Вы можете распределить основные файлы и другой контент, такой как css, javascript, загруженные изображения, видео и многое другое посредством CDN, который управляет доставкой контента с ближайшего cdn сервера к конечному пользователю. В этом руководстве, мы объясним, как настроить WordPress, Apache/Lighttpd вебсервер, Bind dns сервер для использования CDN при доставке Ваших основных файлов, таких как css, js, загруженных пользователем изображений, и тем самым сократить нагрузку на Ваш вебсервер.

Что такое CDN?

Сеть доставки контента или сеть дистрибуции контента(content distribution network, CDN) – это система компьютеров, содержащих копии файлов, расположенных в разных местах сети для максимизации полосы пропускания при обеспечении клиентам доступа к информации через сеть. Клиент получает доступ к копии данных, расположенной ближе всего к клиенту, вместо предоставления клиентам доступа к центральному серверу, чтобы там не возникло “узкого места”. CDN повысит скорость и эффективность Вашего блога.

Какие преимущества дает использование CDN вместо центрального сервера?

  • Скорость – все основные медиафайлы распределяются через CDN. Например, files.hostcomp.ru настроен как CDN субдомен. Все, что хостится на files.hostcomp.ru – географически ближе к конечному пользователю. Если Вы используете dns запросы через files.hostcomp.ru, он вернет IP, самый географически близкий к Вам.


$ host files.hostcomp.ru
$ ping files.hostcomp.ru

Это увеличит скорость доставки и поможет избежать перегрузок на сервере.

  • Безопасность – CDN обеспечивает дополнительный уровень безопасности.
  • Работоспособоность – CDN обеспечивает 100% работоспособность, даже при больших нагрузках, отказах сети и оборудования.

Типы CDN

CDN может использовать различные методы для дистрибуции контента:

  1. Peer to peer CDN – такой тип используется для доставки последних серий мыльных опер (сериалов / ТВ шоу) и патчей/обновлений для программ за короткое время большому количеству пользователей.
  2. Origin Pull CDN – этот тип очень удобен для дистрибуции маленьких файлов, таких как javascript, css, изображений, текста, pdf, .doc, .xls и пр. Именно этот тип рекомендуется использовать с WordPress. Весь контент хранится на Вашем собственном сервере с названием «Origin Pull Host». Этот хост регистрируется в CDN. Когда первый пользователь создает запрос контента, он перенаправляется в CDN сеть из Вашего хоста и посредством CDN этот контент пересылается в ближайший к пользователю пункт. Контент кэшируется в CDN по маркеру TTL (время жизни пакета данных в протоколе IP). Такая конфигурация предполагает расположения хранилища на Вашем сервере, а не на сервере CDN. Пользователь, первым запросивший данный контент, получит весьма средние показатели скорости доставки через CDN, но последующие запросы будут обработаны и выполнены очень быстро. Этот тип CDN рекомендуется для файлов, объемом менее 10МБ.
  3. PoP Pull CDN – Вам необходимо загрузить данные на CDN хост сервер, где они буду храниться до запроса. Эта опция немного более дорогая, так как Вам нужно приобрести CDN хранилище и провайдера с предоставлением подходящей ширины канала. Такой тип рекомендуется для больших файлов, потокового видео и т.п. Вам нужно будет загрузить файлы на CDN сервер, используя FTP / SCP или API.

Поставщики сервисов дистрибуции контента (Content Delivery Service)

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

  • Amazon CloudFront
  • Akamai
  • CacheFly
  • EdgeCast Networks
  • Internap
  • Level 3 Communications
  • Limelight Networks

Наша пробный пример

  • URL блога: https://www.hostcomp.ru/ — хост на собственном сервере под Apache, Lighttpd, IIS или Nginx.
  • Origin Pull URL: http://www-origin.hostcomp.ru/ — хост на собственном сервере. Для использования, Вам нужно будет настроить свой веб-сервер, wordpress и dns сервер. Название «Origin Pull Host» – это название метода CDN, согласно которому контент поставляется с Вашего сервера.
  • CDN URL: http://files.hostcomp.ru/ — Такой cdn url поддерживает любой из вышеупомянутых CDN провайдеров. Этот url всегда перенаправляет контент на edge сервер через DNS. files.hostcomp.ru должен быть установлен в качестве записи CNAME, которая будет направлять запрос к доменным именам CDN-сервера.
  • CDN DNS CNAME: files.hostcomp.ru.example.com — example.com это любой из вышеуказанных CDN провайдеров. Он должен быть установлен в качестве CNAME для files.hostcomp.ru

Шаг № 1: Покупка услуги CDN

Цена CDN варьируется в зависимости от провайдера. Для получения дополнительной информации, посетите сайты провайдеров CDN. Затем нужно использовать услугу провайдера «control panel» для настройки «Origin Pull Host» в каждом домене. Другими словами, настроить files.hostcomp.ru в режиме origin pull. Панель управления также позволит установить CDN dns CNAME. Этот же CNAME нужно будет использовать на шаге № 2. Как только конфигурация активирована и разрешен выбранный CNAME, запросы будут кэшироваться с www-origin.hostcomp.ru на files.hostcomp.ru.

Шаг № 2: Обновите свой DNS сервер

Допустим, что Вы используете BIND dns сервер. Отредактируйте файл зоны, добавив следующие элементы:

; CDN CNAME mapping for files.hostcomp.ru
files                3660       IN CNAME files.hostcomp.ru.example.com.
; Your www-origin url (note hostcomp.ru is also hosted on same server IP 123.1.2.3)
www-origin      3600       IN A 123.1.2.3

Перезагрузитесь:

# rndc reload

Чтобы настройка была проще, используйте один и тот же веб-сервер для домена origin pull и основного домена, то есть хостите www-origin.hostcomp.ru и hostcomp.ru на одном сервере. Это позволит Вам загружать и связвыать файлы непосредственно к серверу CDN.

Примите во внимание, что Вы можете установить CNAME и оригинальные имена хостов, используя также панель управления ISP DNS.

Шаг № 3: Настройте Origin Pull веб-сервер

Вам нужно настроить www-origin.hostcomp.ru следующим образом:

  • Origin pull DocumentRoot: /home/httpd/www-origin.hostcomp.ru – все ваши .css, .js и загруженные файлы будут храниться здесь.
  • Server Blog DocumentRoot: /home/httpd/hostcomp.ru – Все Ваши файлы wordpress будут храниться по этому адресу.
  • MaxAge: задайте максимальную продолжительность жизни статических файлов для сети cdn.
  • Etags: An ETag (тэг объекта) — часть HTTP, протокола World Wide Web. Это ответный заголовок, который может быть возвращен любым HTTP/1.1 совместимым веб сервером и используется для выявления изменений контента по данному URL. Когда новый ответ HTTP содержит тот же ETag, что и старый ответ HTTP, клиент может сделать заключение, что контент не изменился, и не продолжать загрузку.

Приведем пробный пример элемента Lighttpd lighttpd.conf:

# Configure ETags
etag.use-inode = "enable"
etag.use-mtime = "enable"
etag.use-size = "enable"
static-file.etags = "enable" 

###### CDN FILES via WordPress Upload ##############
$HTTP["host"]  == "www-origin.hostcomp.ru"{
        server.document-root = "/home/httpd/www-origin.hostcomp.ru"
        accesslog.filename         = "/var/log/lighttpd/cdn.access.log"
	#  Set max age
        $HTTP["url"] =~ "^/" {
            expire.url = ( "" => "access 60 days" )
        }
}

Вот примерный файл Apache httpd.conf:

<VirtualHost www-origin.hostcomp.ru>
	ServerAdmin webmaster@hostcomp.ru
	DocumentRoot /home/httpd/www-origin.hostcomp.ru
	ServerName files.hostcomp.ru
	ServerAlias file.hostcomp.ru
	ErrorLog /var/logs/httpd/cdn-error_log
	CustomLog /var/logs/httpd/cdn-access_log common

	# Files in this directory will be cached for 1 week only.
	# After 1 week, CDN server will check if the contents has been modified or not.
	# If not modified, Apache will send 304 "Not Modified" header
	<Directory "/userimages">
		Header set Cache-Control "max-age=604800, must-revalidate"
	</Directory>

	# Disable ETag as we are on cluster Apache server
	<Directory "/pdfs">
		Header unset ETag
		FileETag None
	</Directory>

	# Do not cache
	<Directory "/patches">
		Header Set Cache-Control "max-age=0, no-store"
	</Directory>
</VirtualHost>

Шаг № 4: Настройте WordPress для загрузки файлов на CDN сервер

  1. Посетите панель настроек wordpress по url (например, https://www.hostcomp.ru/wp-admin/)
  2. Выберите Settings > Miscellaneous Settings
  3. Обновите пункты, указывающие пути (paths) и домены CDN, как указано ниже
Рис.01: Wordrpess Miscellaneous Settings - установка CDN URLS

Все загруженные файлы сохранены на собственном сервере в директории /home/httpd/www-origin.hostcomp.ru. Эта директория привязана к CDN посредством метода доставки origin pull. Для примера:

  • Пользователь запрашивает http://files.hostcomp.ru/uploads/2010/04/test.png
  • Файл будет доставлен с http://www-origin.hostcomp.ru/uploads/2010/04/test.png Вашим CDN сервером
  • Файл будет кэширован CDN сервером на период 60 дней (или на период установленного максимального срока жизни файлов)
  • Остальные пользователи будут получать эту картинку с сервера CDN.

Шаг № 5: Конфигурация WordPress под доставку CSS / JS с сервера CDN

Во-первых, скопируйте все свои файлы .css и .js в директорию /home/httpd/www-origin.nixcraft.:

mkdir -p /home/httpd/www-origin.hostcomp.ru/{css,js}
cp -av /home/httpd/hostcomp.ru/wp-content/themes/mythemename/*.css /home/httpd/www-origin.hostcomp.ru/css
cp -av /home/httpd/hostcomp.ru/wp-content/themes/mythemename/*.js /home/httpd/www-origin.hostcomp.ru/js

Потом измените тему (header.php и footer.php), указав расположение CDN в таблице стилей и/или .js файлах. Для этого откройте меню «Manage Themes» с панели настроек wordpress:

<link rel="stylesheet" href="http://files.hostcomp.ru/css/style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://files.hostcomp.ru/css/images.css" type="text/css" media="screen, projection" />

Результаты

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

Рис.02: Демонстрация скорости загрузки с вебсайта через Alexa

Рис.03: Демонстрация скорости работы вебсайта с помощью инструмента оценки отклика

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

Используйте curl для теста заголовков HTTP (проверьте объявления тэгов Etag, значение максимальной продолжительности жизни):

$ curl -I http://files.hostcomp.ru/css/styles.css

$ curl -I http://files.hostcomp.ru/uploades/2010/04/test.png

Результаты пробного запроса:

HTTP/1.1 200 OK
Content-Type: image/png
Accept-Ranges: bytes
ETag: "1482142335"
Last-Modified: Fri, 02 Apr 2010 09:11:53 GMT
Content-Length: 33143
Server: lighttpd
Cache-Control: max-age=2588785
Expires: Sun, 02 May 2010 09:13:50 GMT
Date: Fri, 02 Apr 2010 10:07:25 GMT
Connection: keep-alive

Примечание о дополнениях (плагинах) к WordPress CDN

Вы можете автоматизировать последние два шага при помощи плагинов worpdress. Так или иначе, Вам нужно настроить параметры максимальной продолжительности жизни DNS и веб-сервера, чтобы получить достаточную степень управляемости.

Просмотры: (2304)

Хостинг , ,

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

You may also like

Read Full Post
Интернет, Хостинг

Центр поддержки DNS знает, как сделать Ваш бизнес максимально комфортным

Read Full Post
Хостинг

Панель управления сайтом (cPanel)

Read Full Post
Хостинг

Часто используемые SSH и MySQL команды