Редактирование изображений для сайтов с помощью приложения Thumbor
Thumbor
Thumbor удобно использовать для подготовки изображений для сайтов. Например, можно создать миниатюры в качестве превью видео. Thumbor поддерживает кеширование изображений, что позволяет снизить трудозатраты на поддержку сайта.
В примере ниже изображения размещаются на сайте и редактируются с помощью Thumbor: меняется размер и добавляется водяной знак. Чтобы снизить время загрузки изображений, для сайта настраивается CDN (сеть распространения контента) с помощью сервиса Yandex Cloud CDN.
Чтобы отредактировать изображения с помощью Thumbor и подключить CDN:
- Установите Thumbor.
- Подготовьте изображения для тестирования Thumbor.
- Настройте Cloud CDN.
- Проверьте результат.
Если созданные ресурсы вам больше не нужны, удалите их.
Перед началом работы
Подготовьте инфраструктуру
-
-
Сервисный аккаунт для ресурсов с ролями
k8s.clusters.agent
иvpc.publicAdmin
на каталог, в котором создается кластер Managed Service for Kubernetes. От имени этого аккаунта будут создаваться ресурсы для кластера Managed Service for Kubernetes. -
Сервисный аккаунт для узлов с ролью container-registry.images.puller на каталог с реестром Docker-образов. От его имени узлы будут скачивать из реестра Docker-образы.
Вы можете использовать один и тот же сервисный аккаунт для обеих операций.
-
Сервисный аккаунт
thumbor-sa
для работы с Thumbor.
-
-
Создайте группы безопасности для кластера Managed Service for Kubernetes и входящих в него групп узлов.
Важно
От настройки групп безопасности зависит работоспособность и доступность кластера, а также запущенных в нем сервисов и приложений.
-
Создайте кластер Managed Service for Kubernetes и группу узлов любой подходящей конфигурации. При создании укажите группы безопасности, подготовленные ранее.
-
Cоздайте бакет в Yandex Object Storage.
-
Предоставьте сервисному аккаунту
thumbor-sa
разрешениеREAD
на бакет.
-
Если у вас еще нет Terraform, установите его.
-
Получите данные для аутентификации. Вы можете добавить их в переменные окружения или указать далее в файле с настройками провайдера.
-
Настройте и инициализируйте провайдер. Чтобы не создавать конфигурационный файл с настройками провайдера вручную, скачайте его
. -
Поместите конфигурационный файл в отдельную рабочую директорию и укажите значения параметров. Если данные для аутентификации не были добавлены в переменные окружения, укажите их в конфигурационном файле.
-
Скачайте в ту же рабочую директорию файл конфигурации k8s-for-thumbor.tf
.В этом файле описаны:
-
Сеть.
-
Подсеть.
-
Сервисные аккаунты для различных сервисов:
- для работы кластера и группы узлов Managed Service for Kubernetes;
- для приложения Thumbor;
- для создания бакетов Object Storage.
-
Кластер Managed Service for Kubernetes.
-
Группа узлов.
-
Группы безопасности, которые содержат необходимые правила для кластера Managed Service for Kubernetes и входящих в него групп узлов.
Важно
От настройки групп безопасности зависит работоспособность и доступность кластера, а также запущенных в нем сервисов и приложений.
-
Статический ключ доступа для создания бакета.
-
Бакет.
-
-
Укажите в файле
k8s-for-thumbor.tf
:- идентификатор каталога;
- версию Kubernetes для кластера и групп узлов Managed Service for Kubernetes.
-
Проверьте корректность файла конфигурации Terraform с помощью команды:
terraform validate
Если в файле есть ошибки, Terraform на них укажет.
-
Создайте инфраструктуру:
-
Выполните команду для просмотра планируемых изменений:
terraform plan
Если конфигурации ресурсов описаны верно, в терминале отобразится список изменяемых ресурсов и их параметров. Это проверочный этап: ресурсы не будут изменены.
-
Если вас устраивают планируемые изменения, внесите их:
-
Выполните команду:
terraform apply
-
Подтвердите изменение ресурсов.
-
Дождитесь завершения операции.
-
В указанном каталоге будут созданы все требуемые ресурсы. Проверить появление ресурсов и их настройки можно в консоли управления
. -
Установите дополнительные зависимости
-
Если у вас еще нет интерфейса командной строки Yandex Cloud, установите и инициализируйте его.
По умолчанию используется каталог, указанный в профиле CLI. Вы можете указать другой каталог с помощью параметра
--folder-name
или--folder-id
. -
Установите kubectl
и настройте его на работу с созданным кластером.
Добавьте сертификат в Certificate Manager
Поддерживаются сертификаты из Yandex Certificate Manager. Вы можете выпустить новый сертификат Let's Encrypt® или загрузить собственный.
Сертификат должен находиться в том же каталоге, в котором расположен ваш CDN-ресурс.
Для сертификата Let's Encrypt® пройдите проверку прав на домен, который указан в сертификате.
Установите Thumbor
-
Создайте статический ключ доступа для сервисного аккаунта
thumbor-sa
и сохраните ключ в файлsa-key.json
:yc iam access-key create --service-account-name thumbor-sa \ --format json > sa-key.json
-
Установите приложение Thumbor с параметрами:
- Пространство имен —
thumbor
. - Название приложения —
thumbor
. - Имя бакета — бакет, в который вы загрузили изображения.
- Статический ключ для доступа к Object Storage — содержимое файла
sa-key.json
. - URL без подписи — разрешены.
- Пространство имен —
Подготовьте изображения для тестирования Thumbor
-
Скачайте изображения:
- poster_rodents_bunnysize.jpg
; - poster_bunny_bunnysize.jpg
; - cc.xlarge.png
(символ организации Creative Commons ).
- poster_rodents_bunnysize.jpg
-
Загрузите изображения в бакет:
ВручнуюTerraform- В консоли управления
выберите каталог, в который нужно загрузить объект. - Выберите сервис Object Storage.
- Нажмите на имя бакета.
- Нажмите кнопку Загрузить.
- В появившемся окне выберите необходимые файлы и нажмите кнопку Открыть.
- Нажмите кнопку Загрузить.
- Обновите страницу.
В консоли управления информация о количестве объектов в бакете и занятом месте обновляется с задержкой в несколько минут.
Загрузить объекты в бакет можно только после его создания, поэтому для загрузки изображений используется отдельный файл конфигурации.
-
В рабочую директорию с файлом
k8s-for-thumbor.tf
скачайте файл конфигурации images-for-thumbor.tf . В этом файле описаны объекты Object Storage — скачанные изображения, которые будут загружены в бакет. -
Укажите в файле
images-for-thumbor.tf
относительные или абсолютные пути до изображений. Например, если изображения хранятся в одной директории с файлами конфигурации, укажите:poster_rodents_bunnysize.jpg
poster_bunny_bunnysize.jpg
cc.xlarge.png
-
Выполните команду
terraform init
в директории с конфигурационными файлами. Эта команда инициализирует провайдер, указанный в конфигурационных файлах, и позволяет работать с ресурсами и источниками данных провайдера. -
Проверьте корректность файла конфигурации Terraform с помощью команды:
terraform validate
Если в файле есть ошибки, Terraform на них укажет.
-
Запустите загрузку изображений в бакет:
-
Выполните команду для просмотра планируемых изменений:
terraform plan
Если конфигурации ресурсов описаны верно, в терминале отобразится список изменяемых ресурсов и их параметров. Это проверочный этап: ресурсы не будут изменены.
-
Если вас устраивают планируемые изменения, внесите их:
-
Выполните команду:
terraform apply
-
Подтвердите изменение ресурсов.
-
Дождитесь завершения операции.
-
В указанном каталоге будут созданы все требуемые ресурсы. Проверить появление ресурсов и их настройки можно в консоли управления
. -
- В консоли управления
Настройте CDN
-
Активируйте CDN-провайдер для вашего каталога:
yc cdn provider activate --type=gcore --folder-id=<идентификатор_каталога>
-
Получите доменное имя CDN-провайдера:
yc cdn resource get-provider-cname
Пример результата:
cname: cl-msa87*****.edgecdn.ru folder_id: b1g86q4m5vej********
Доменное имя указано в параметре
cname
. -
Настройте CNAME для своего домена:
-
Перейдите в настройки DNS вашего домена на сайте компании, которая предоставляет вам услуги DNS-хостинга.
-
Подготовьте CNAME-запись таким образом, чтобы она указывала на скопированный ранее адрес в домене
.edgecdn.ru
. Например, если доменное имя сайта —cdn.example.com
, создайте CNAME-запись или замените уже существующую запись дляcdn
:cdn CNAME cl-msa87*****.edgecdn.ru.
-
-
Получите внешний IP-адрес Thumbor:
kubectl -n thumbor get svc thumbor \ -o jsonpath='{.status.loadBalancer.ingress[0].ip}'
-
Создайте группу источников в 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
. Этот идентификатор понадобится в следующем шаге. -
Создайте 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
Примечание
Если ресурс недоступен по указанному URL, то убедитесь, что группы безопасности для кластера Managed Service for Kubernetes и его групп узлов настроены корректно. Если отсутствует какое-либо из правил — добавьте его.
Удалите созданные ресурсы
Некоторые ресурсы платные. Чтобы за них не списывалась плата, удалите ресурсы, которые вы больше не будете использовать:
Удалите:
- CDN-ресурс.
- Группу источников CDN.
- Группу узлов.
- Кластер Managed Service for Kubernetes.
- Публичный статический IP-адрес, если вы зарезервировали его для кластера.
- Сервисные аккаунты.
- Бакеты и объекты в них.
-
В терминале перейдите в директорию с планом инфраструктуры.
-
Удалите конфигурационный файл
images-for-thumbor.tf
. Чтобы удалить бакет, сначала удалите объекты в нем. -
Проверьте корректность изменений с помощью команды:
terraform validate
Если в файлах конфигурации есть ошибки, Terraform на них укажет.
-
Подтвердите изменение ресурсов.
-
Выполните команду для просмотра планируемых изменений:
terraform plan
Если конфигурации ресурсов описаны верно, в терминале отобразится список изменяемых ресурсов и их параметров. Это проверочный этап: ресурсы не будут изменены.
-
Если вас устраивают планируемые изменения, внесите их:
-
Выполните команду:
terraform apply
-
Подтвердите изменение ресурсов.
-
Дождитесь завершения операции.
-
-
-
Удалите конфигурационный файл
k8s-for-thumbor.tf
. -
Проверьте корректность файлов конфигурации Terraform с помощью команды:
terraform validate
Если в файлах конфигурации есть ошибки, Terraform на них укажет.
-
Подтвердите изменение ресурсов.
-
Выполните команду для просмотра планируемых изменений:
terraform plan
Если конфигурации ресурсов описаны верно, в терминале отобразится список изменяемых ресурсов и их параметров. Это проверочный этап: ресурсы не будут изменены.
-
Если вас устраивают планируемые изменения, внесите их:
-
Выполните команду:
terraform apply
-
Подтвердите изменение ресурсов.
-
Дождитесь завершения операции.
-
Все ресурсы, которые были описаны в конфигурационном файле
k8s-for-thumbor.tf
, будут удалены. -