Редактирование изображений для сайтов с помощью приложения Thumbor

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

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

В примере ниже изображения размещаются на сайте и редактируются с помощью Thumbor: меняется размер и добавляется водяной знак. Чтобы снизить время загрузки изображений, для сайта настраивается CDN (сеть распространения контента) с помощью сервиса Yandex Cloud CDN.

Чтобы отредактировать изображения с помощью Thumbor и подключить CDN:

1. Установите Thumbor.
2. Подготовьте изображения для тестирования Thumbor.
3. Настройте Cloud CDN.
4. Проверьте результат.

Если созданные ресурсы вам больше не нужны, удалите их.

Перед началом работыПеред началом работы

Подготовьте инфраструктуруПодготовьте инфраструктуру

Установите дополнительные зависимостиУстановите дополнительные зависимости

1. Если у вас еще нет интерфейса командной строки Yandex Cloud, установите и инициализируйте его.

   По умолчанию используется каталог, указанный в профиле CLI. Вы можете указать другой каталог с помощью параметра --folder-name или --folder-id.

2. Установите kubectl и настройте его на работу с созданным кластером.

Добавьте сертификат в Certificate ManagerДобавьте сертификат в Certificate Manager

Поддерживаются сертификаты из Yandex Certificate Manager. Вы можете выпустить новый сертификат Let's Encrypt® или загрузить собственный.

Сертификат должен находиться в том же каталоге, в котором расположен ваш CDN-ресурс.

Для сертификата Let's Encrypt® пройдите проверку прав на домен, который указан в сертификате.

Установите ThumborУстановите Thumbor

1. Создайте статический ключ доступа для сервисного аккаунта thumbor-sa и сохраните ключ в файл sa-key.json:

   yc iam access-key create --service-account-name thumbor-sa \
      --format json > sa-key.json
   

2. Установите приложение Thumbor с параметрами:

   • Пространство имен — thumbor.
   • Название приложения — thumbor.
   • Имя бакета — бакет, в который вы загрузили изображения.
   • Статический ключ для доступа к Object Storage — содержимое файла sa-key.json.
   • URL без подписи — разрешены.

Подготовьте изображения для тестирования ThumborПодготовьте изображения для тестирования Thumbor

1. Скачайте изображения:

   • poster_rodents_bunnysize.jpg;
   • poster_bunny_bunnysize.jpg;
   • cc.xlarge.png (символ организации Creative Commons).

2. Загрузите изображения в бакет:

   Вручную

   Terraform

   1. В консоли управления выберите каталог, в который нужно загрузить объект.
   2. Выберите сервис Object Storage.
   3. Нажмите на имя бакета.
   4. Нажмите кнопку Загрузить.
   5. В появившемся окне выберите необходимые файлы и нажмите кнопку Открыть.
   6. Нажмите кнопку Загрузить.
   7. Обновите страницу.

   В консоли управления информация о количестве объектов в бакете и занятом месте обновляется с задержкой в несколько минут.

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

   1. В рабочую директорию с файлом k8s-for-thumbor.tf скачайте файл конфигурации images-for-thumbor.tf. В этом файле описаны объекты Object Storage — скачанные изображения, которые будут загружены в бакет.

   2. Укажите в файле images-for-thumbor.tf относительные или абсолютные пути до изображений. Например, если изображения хранятся в одной директории с файлами конфигурации, укажите:

      • poster_rodents_bunnysize.jpg
      • poster_bunny_bunnysize.jpg
      • cc.xlarge.png

   3. Выполните команду terraform init в директории с конфигурационными файлами. Эта команда инициализирует провайдер, указанный в конфигурационных файлах, и позволяет работать с ресурсами и источниками данных провайдера.

   4. Проверьте корректность файла конфигурации Terraform с помощью команды:

      terraform validate
      

      Если в файле есть ошибки, Terraform на них укажет.

   5. Запустите загрузку изображений в бакет:

      1. Выполните команду для просмотра планируемых изменений:

         terraform plan
         

         Если конфигурации ресурсов описаны верно, в терминале отобразится список изменяемых ресурсов и их параметров. Это проверочный этап: ресурсы не будут изменены.

      2. Если вас устраивают планируемые изменения, внесите их:

         1. Выполните команду:

            terraform apply
            

         2. Подтвердите изменение ресурсов.

         3. Дождитесь завершения операции.

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

Настройте CDNНастройте CDN

1. Активируйте CDN-провайдер для вашего каталога:

   yc cdn provider activate --type=gcore --folder-id=<идентификатор_каталога>
   

2. Получите доменное имя CDN-провайдера:

   yc cdn resource get-provider-cname
   

   Пример результата:

   cname: cl-msa87*****.edgecdn.ru
   folder_id: b1g86q4m5vej********
   

   Доменное имя указано в параметре cname.

3. Настройте CNAME для своего домена:

   1. Перейдите в настройки DNS вашего домена на сайте компании, которая предоставляет вам услуги DNS-хостинга.

   2. Подготовьте CNAME-запись таким образом, чтобы она указывала на скопированный ранее адрес в домене .edgecdn.ru. Например, если доменное имя сайта — cdn.example.com, создайте CNAME-запись или замените уже существующую запись для cdn:

      cdn CNAME cl-msa87*****.edgecdn.ru.
      

4. Получите внешний IP-адрес Thumbor:

   kubectl -n thumbor get svc thumbor \
      -o jsonpath='{.status.loadBalancer.ingress[0].ip}'
   

5. Создайте группу источников в Cloud CDN:

   yc cdn origin-group create \
      --name thumbor \
      --origin source=<IP-адрес_Thumbor>,enabled=true
   

   Пример результата:

   id: "123***"
   folder_id: b1g86q4m5vej********
   name: thumbor
   use_next: true
   origins:
     - id: "234****"
       origin_group_id: "345***"
       source: cdn.example.com
       enabled: true
   

   В результате возвращается идентификатор группы источников в параметре origin_group_id. Этот идентификатор понадобится в следующем шаге.

6. Создайте CDN-ресурс и подключите к нему группу источников:

   yc cdn resource create \
      --cname <доменное_имя_ресурса> \
      --origin-group-id=<идентификатор_группы_источников> \
      --origin-protocol=https \
      --ignore-query-string \
      --cert-manager-ssl-cert-id <идентификатор_сертификата> \
      --forward-host-header
   

   Пример доменного имени ресурса: cdn.example.com.

   Пример результата:

   id: bc855oumelrq********
   folder_id: b1g86q4m5vej********
   cname: cdn.example.com
   created_at: "2022-01-15T15:13:42.827643Z"
   updated_at: "2022-01-15T15:13:42.827671Z"
   active: true
   options:
     edge_cache_settings:
       enabled: true
       default_value: "345600"
     query_params_options:
       ignore_query_string:
         enabled: true
         value: true
     host_options:
       forward_host_header:
         enabled: true
         value: true
     stale:
       enabled: true
       value:
         - error
         - updating
   origin_group_id: "345***"
   origin_group_name: thumbor
   origin_protocol: HTTPS
   ssl_certificate:
     type: CM
     status: CREATING
   

   Подключение CDN-ресурса занимает от 15 до 30 минут.

Проверьте результатПроверьте результат

Откройте ваш сайт по URL:

• https://<доменное_имя_ресурса>/unsafe/300x400/filters:watermark(cc.xlarge.png,10,-10,80,20)/poster_bunny_bunnysize.jpg
• https://<доменное_имя_ресурса>/unsafe/600x800/filters:watermark(cc.xlarge.png,10,-10,80,20)/poster_bunny_bunnysize.jpg
• https://<доменное_имя_ресурса>/unsafe/400x300/filters:watermark(cc.xlarge.png,-10,10,80,15)/poster_rodents_bunnysize.jpg
• https://<доменное_имя_ресурса>/unsafe/800x600/filters:watermark(cc.xlarge.png,-10,10,80,15)/poster_rodents_bunnysize.jpg

Отобразятся подготовленные изображения с различным размером. На каждом изображении есть водяной знак Creative Commons.

Удалите созданные ресурсыУдалите созданные ресурсы

Некоторые ресурсы платные. Чтобы за них не списывалась плата, удалите ресурсы, которые вы больше не будете использовать: