Динамическая доставка изображений с CloudFront

Найдите вкладку CloudFront в консоли управления и нажмите «Создать рассылку»:

Откроется мастер создания рассылки. Записи, которые вы здесь делаете, важны. Сначала выберите «Custom Origin». В поле «Исходное DNS-имя» введите имя своего домена, в котором находятся каталог imagestore и файл image.php. В соответствии с политикой протокола я рекомендую выбрать Match Viewer.

Вы можете просмотреть следующие два раздела (Детали распространения и Обзор). После этого вам нужно подождать около 15 минут, пока AWS создаст ваш дистрибутив.

Создав свой дистрибутив, вы получите DNS-имя для использования. Это будет выглядеть так: abcdefg1234.cloudfront.net

Теперь пришло время завершить решение. Вместо создания таких изображений:

Теперь вы будете ссылаться на ваши изображения следующим образом:

 <img src="//abcdefg1234.cloudfront.net/minD_80/imagestore/Penguins.jpg" alt="" />

Вот и все — вы сделали! Теперь всякий раз, когда запрашивается это изображение, запрос переходит к CloudFront. При первом запросе изображения CloudFront запросит его с вашего сервера. После этого он будет хранить его в своем кэше и мгновенно доставлять для новых запросов. Когда он истекает, он просто запросит его снова с вашего сервера.

Что дальше?

Еще многое можно сделать, чтобы эта система работала лучше для вашего приложения. Вот несколько идей:

Ручка 404с
Убедитесь, что ваш скрипт настроен на обработку случаев, когда запрашиваются изображения, которых нет на вашем сервере.

Обрабатывать другие форматы изображения
Настройте систему для работы с JPEG, PNG, GIF и любым другим форматом изображений, который вы используете.

Добавить больше фильтров
Полный пример ниже включает в себя множество полезных фильтров, которые я создал, включая примеры преобразования вашего изображения в оттенки серого и добавления эффектов пикселизации. С php GD у вас есть много доступных вариантов. Проверьте ImageMagick еще больше возможностей для управления вашими изображениями.

Водяные знаки, обрезка и многое другое!
Этот тип системы имеет так много возможностей. Легко настроить его, чтобы добавить водяной знак для каждого изображения или обрезать изображения с определенным соотношением размеров.

Интеграция с Amazon S3
Начать можно с сохранения оригиналов на вашем сервере, но на самом деле вы должны использовать Amazon S3 или другой сервис облачного хранения для хранения ваших оригиналов. Внесение этого изменения гарантирует, что вам никогда не придется беспокоиться о резервном копировании или масштабируемости.

Используйте CNAME
Не нравится обслуживание изображений с доменного имени cloudfront.net? Нет проблем, вы можете настроить CloudFront на использование своего собственного домена, такого как cdn.yourdomain.com.

Добавить безопасность
Этот тип системы позволяет людям «поиграть» с вашими изображениями. Если кто-то является злоумышленником, он может использовать эту систему, чтобы действительно заглушить ваш сервер (атака DoS) Вы можете предотвратить это разными способами. Мой любимый способ — использовать кодирование и шифрование для части формата URL-адреса изображения. Это добавляет немного работы, но не дает людям возможности поразить ваш сервер неограниченными запросами на изображения неограниченного размера. Есть много других способов предотвратить злоупотребления … главное — помнить, что вам нужно что-то поставить на место.

Веселитесь с этим!

Это решение изменило мой дизайн и разработку с использованием изображений в веб-приложениях. Мне больше не нужно беспокоиться о жестких сценариях для размеров и форматирования изображений. Я могу создавать все, что захочу, во внешнем интерфейсе, и мне никогда не придется беспокоиться о дисковом пространстве, производительности или создании подпрограмм для массового преобразования изображений. Надеюсь, вы найдете эту концепцию полезной.

Если у вас есть предложения по улучшению или улучшению системы, пожалуйста, оставьте свои комментарии ниже. И, конечно, если у вас есть вопросы — пожалуйста, задавайте!

Вопросы и ответы

Что если мне нужно получить доступ к исходной версии моего изображения?
Нет проблем! Просто используйте любой префикс. Мне нравится использовать «о» для оригинала. Так что мой оригинальный URL-адрес изображения будет выглядеть так:
http://dynamiccdn.example.com/o/imagestore/Penguins.jpg

Почему я не могу просто использовать переменные строки запроса после своего изображения, чтобы указать форматирование?
Это было бы круто … но Amazon CloudFront игнорирует эти переменные.

Этот пример работает только для файла JPG. Я люблю PNG больше. Что дает??
Чтобы сделать код максимально простым, этот пример обрабатывает только файлы jpg. Но вы можете настроить скрипт для обработки любого формата изображения, который вы можете использовать.

Почему вы ссылаетесь на ваши изображения, начинающиеся с «//» вместо «http: //»?
Хороший вопрос. Использование «//» заставляет URL ссылаться на тот же протокол (http или https), что и страница, которую пользователь просматривает в данный момент. Это действительно удобно и предотвращает появление в некоторых браузерах предупреждений о «небезопасном контенте».

Пример полного сценария

Вот полный рабочий скрипт image.php. Он включает в себя множество дополнительных удобных опций формата. Все это менее 100 строк кода!

 $path = $_GET['path'];
$formats = explode(',', $_GET['format']);
$image = imagecreatefromjpeg($path);
header('Content-Type: image/jpeg');
header('Cache-control: Public');
$headerTimeOffset = 60 * 60 * 24 * 30;
$headeExpire = "Expires: " . gmdate ("D, d M Y H:i:s", time() + $headerTimeOffset) . " GMT";
header ($headeExpire);

foreach ($formats as $format) {
    $image = formatImage($format, $image);
}

imagejpeg($image, Null, 100);
imagedestroy($image);

function resizeImage($originalImage,$toWidth,$toHeight) {
    $width = imagesx($originalImage);
    $height = imagesy($originalImage);
    $imageResized = imagecreatetruecolor($toWidth, $toHeight);
    imagecopyresampled($imageResized, $originalImage, 0, 0, 0, 0, $toWidth, $toHeight, $width, $height);
    return $imageResized;
}

function formatImage($format, $image) {
    $curW = imagesx($image);
    $curH = imagesy($image);
    $formatParts = explode('_', $format);
    switch ($formatParts[0]) {
        case 'filterGray':
            #### Make it Grayscale
            imagefilter($image, IMG_FILTER_GRAYSCALE);
            break;
        case 'filterBlur':
            #### Blur It Up
            imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);
            break;
        case 'maxD':
            #### Maximum Either Dimension - maxD_100
            if ($curW > $curH) {
$ratio = $curH / $curW;
$newW = (int) maxProtect($formatParts[1]);
$newH = (int) (maxProtect($formatParts[1]) * $ratio);
            } else {
$ratio = $curW / $curH;
$newW = (int) (maxProtect($formatParts[1]) * ratio);
$newH = (int) maxProtect($formatParts[1]);
            }
            $image = resizeImage($image, $newW, $newH);
            break;
        case 'minD':
            #### Minimum Smallest Dimension - maxD_100
            if ($curW  800) $value = 800;
    return $value;
}

Изображение через Марк Дитрих / Shutterstock