CDN для WordPress на основе s3 хранилищаPosted by On

В данной статье мы рассмотрим настройку CDN для WordPress, для базирования статики воспользуемся сервисом Yandex Object Storage.
Такой подход к хранению статичных файлов позволит нам «ускорить» загрузку страниц сайта с множеством изображений (!) и сэкономить трафик для основной машины.

Заранее подчеркну, такой кейс отлично проявит себя для интернет-магазинов и других сайтов с большим количеством контента (изображений). При тестировании небольшого блога — все же с NVM дисков и локальной машины картинки подгружаются быстрее.

Хранилище на основе Simple Storage Service (S3) имеет множество интеграций с WordPress, настройка такого CDN займет у Вас не более 10 минут.

Вы можете выбрать любой S3-совместимый сервис, для данной статьи был выбран Яндекс.Облако (У вас должен быть создан на платформе).

Создаем бакет S3 для хранения статики в Яндекс.Облако

Перейдем к созданию бакета: Создать ресурс — Бакет.

Указываем понятное имя, например site-cdn.

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

Доступ к бакету — Ограниченный. Если бакет будет публичным, у любого пользователя будет возможность получить листинг всех файлов в бакете. Что не есть хорошо 🙂

Класс хранилища выбираем «Стандартное». Хранилище с наименованием «Холодное» более дешевое, но медленное.

Нажимаем «Создать бакет».

Создание политики CORS

Перейдите в бакет, в левом меню выберите пункт «CORS»

Настройке правила CORS следующим образом:

  • Allowed Origins: через запятую указываем ресурсы с которых разрешено получать доступ к изображениям.
  • Allowed Methods: GET и HEAD достаточно для получения медиафайлов.
  • MaxAgeSeconds: Указываем значение для кэширования статики браузером.

Создание ключа доступа в Яндекс.Облако

Нам необходимо предоставить доступ к нашему бакету со стороны плагина Media Cloud.

  1. Перейдите на главную страницу вашего каталога
  2. Перейдите в «Сервисные аккаунты» в левом меню
  3. Нажмите «Создать сервисный аккаунт»
  4. Укажите имя для сервисного аккаунта, например site-mediacloud
  5. В качестве роли укажите «editor»
  6. Перейдите в сервисный аккаунт, кликнув на него
  7. Нажмите «Создать новый ключ» — «Создать ключ доступа»
  8. Укажите любое описание и нажмите «Создать»
  9. Скопируйте идентификатор и секретный ключ в надежное место.

Отлично, ключ создан. Можно переходить к интеграции с нашим сайтом wordpress.

Плагин Media Cloud для загрузки файлов в S3

Для интеграции с WordPress нам потребуется плагин — Media Cloud. Устанавливаем его.

Перейдем в настройки плагина Media Cloud — Storage Settings:

Настраиваем плагин следующим образом:

  • Storage Provider: Other S3 Compatible Service (Бакеты от Яндекса полностью совестимы с S3, но не являются Amazon s3)
  • Access Key: Идентификатор который вы сохранили ранее
  • Secret: Секретный ключ который вы сохранили ранее
  • Bucket: Название вашего бакета созданного в яндексе, например site-cdn
  • Custom Endpoint URL: storage.yandexcloud.net

Листаем до CDN Settings. Данная секция отвечает за изменение ссылок на медифайлы на сайте.

Указываем https://storage.yandexcloud.net/название_бакета/ в качестве CDN Base URL.

Опционально: есть полезные функции при работе с файлами:

  • Delete Uploaded Files: при включении, удаляет файлы с сервера WordPress. Они будут только на CDN.
  • Delete From Storage: при включении, удаленные файлы в библиотеке WordPress, будут удалены и с удаленного сервера s3. Рекомендую поставить.

Сохраняем.

В качестве дополнительной меры вы можете перейти в Troubleshooter и запустить тестирование конфигурации. Если что-то пошло не так, еще раз перечитайте пункты 🙂

Включаем загрузку в Media Cloud

Переходим в Media Cloud — Enable/Disable Tools и включаем Storage. Сохраняем.

В меню Media Cloud появится новый пункт — «Storage Importer», перейдите в него и произведите синхронизацию файлов на s3.

Вы можете проверить итоговый результат на сайте, если изображения загружаются с узла storage.yandex.net — значит все работает.

К сожалению на момент публикации статьи подключить свой домен можно только с использованием CNAME и http. Подключение сертификата не предусмотрено 🙁

LinuxХостинги

cdnobject storages3wordpressyandexмедиа

avatar
  Подписаться  
Уведомление о