Подключение CDN к ModX Evolution в облаке Beget

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

(Опционально) Добавление собственного поддомена

При создании CDN-ресурса есть возможность указать собственный поддомен, для этого необходимо создать его в панели управления. Перейдите в раздел “Домены и поддомены”, после чего введите его в поле “Добавление доменов и поддоменов”. Например, для создания поддомена cdn на основном домене betutorial.ru это будет выглядеть так:

После чего нажмите “Добавить домены”.

Создание CDN-ресурса в панели управления

Итак, для ускорения сайта необходимо создать CDN. Для этого перейдите в раздел “Облако” и нажмите “Создать”, в появившемся меню выберите CDN:

Откроется страница создания:

Здесь потребуется указать источник контента – место хранения исходного контента будет зависеть от настроек вашего сайта. Если вы настраивали хранение статического контента в S3-хранилище Beget, выберите соответствующий бакет, в противном случае выберите “Домен” в выпадающем меню и укажите доменное имя сайта, для которого подключается CDN.

Если вы добавляли собственный домен ранее, выберите его в выпадающем меню “Домен для раздачи контента”:

Помимо собственного поддомена, к ресурсу будет привязан бесплатный технический поддомен.

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

После чего нажмите “Создать CDN” и дождитесь выпуска сертификата SSL для доменов.

Подключение к сайту

Чтобы не менять пути вручную во всех шаблонах, создадим плагин, который будет автоматически заменять ссылки /assets/ на CDN-домен.

1. В админ-панели MODX Evolution откройте Элементы → Плагины → Новый плагин.
   
2. Укажите:
   
   • Имя: CDNReplace
     
   • Событие: OnWebPagePrerender
     
3. Вставьте следующий код:

// Адрес CDN
$cdnUrl = 'https://cdn.betutorial.ru/assets/';

// Локальный путь, который нужно заменить
$assetsUrl = '/assets/';

// Меняем ссылки в сгенерированном HTML
if (!empty($modx->documentOutput)) {
    $modx->documentOutput = str_replace($assetsUrl, $cdnUrl, $modx->documentOutput);
}

4. Сбросьте кэш.

Для проверки откройте сайт в браузере с использованием инструментов разработчика – во вкладке “Сеть” (Network) запросы к статическому контенту будут выполняться к указанному адресу CDN:

Заключение

В данной статье мы кратко рассказали о подключении CDN к CMS ModX Evolution.

Если возникнут вопросы, напишите нам, пожалуйста, тикет из панели управления аккаунта (раздел “Помощь и поддержка”), а если вы захотите обсудить настройки CDN с коллегами по цеху и сотрудниками Beget – ждем вас в нашем сообществе в Telegram.