Введение

Вы когда-нибудь замечали, что ваш сайт медленно загружается из-за всех изображений и ресурсов, которые ему нужно загрузить? Или, возможно, вы испытывали трудности с управлением этими файлами по мере роста вашего сайта. Дело в том, что хранение и обслуживание изображений непосредственно с вашего веб-сервера может показаться удобным на первый взгляд, но это может быстро превратиться в узкое место.

Вот тут и приходит на помощь AWS. С такими сервисами, как S3 для хранения и CloudFront как мощным CDN, вы можете легко управлять, оптимизировать и доставлять изображения и ресурсы вашим пользователям с молниеносной скоростью, независимо от того, где они находятся в мире.

В этом руководстве я расскажу вам, почему хранить изображения на сервере вашего веб-приложения — плохая идея, почему разделение сервисов меняет правила игры и как инструменты AWS могут значительно упростить вашу жизнь. Давайте погрузимся!

Почему хранение изображений на вашем веб-сервере — плохая идея

Увеличенная нагрузка на сервер

Когда ваш веб-сервер отвечает как за работу вашего приложения, так и за обслуживание изображений, он может быстро оказаться перегруженным. Каждый запрос на изображение добавляет дополнительную нагрузку, замедляя все. Если ваш сайт получает много трафика, сервер может не справляться, что приводит к задержкам или даже сбоям. Представьте, что вы пытаетесь нести все свои покупки и одновременно бежать — это просто неэффективно!

Ограниченная масштабируемость

По мере роста вашего сайта будет расти и количество изображений и пользователей. Один веб-сервер может обрабатывать только определенное количество запросов, прежде чем вы столкнетесь с ограничениями. Масштабирование часто означает дополнительные расходы на более мощные серверы или хлопоты с миграцией всего. С облачным хранилищем, таким как AWS S3, вам не нужно беспокоиться о нехватке места — оно растет вместе с вами, без лишних усилий.

Риск узких мест в производительности

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

Проблемы безопасности

Обслуживание изображений с вашего веб-сервера может подвергать вас ненужным рискам. Хакеры могут использовать уязвимости для доступа к конфиденциальной информации, или другие сайты могут украсть вашу полосу пропускания, горячо ссылаясь на ваши изображения. Без надлежащих мер предосторожности вы можете случайно раскрыть пути к файлам сервера, что похоже на то, как если бы вы оставили свою входную дверь широко открытой.

Почему стоит использовать CDN?

Если вы когда-либо испытывали раздражение из-за медленно загружающегося веб-сайта, вы поймете, почему CDN (Сеть доставки контента) — это настоящая находка. CDN — это как сеть мини-складов, разбросанных по всему миру, каждый из которых хранит копии изображений и ресурсов вашего сайта. Вместо того чтобы каждому пользователю ждать, пока контент доберется до него с вашего основного сервера, CDN доставляет его из ближайшего склада, что делает все быстрее и плавнее.

CDN ускоряет доставку контента, распределяя данные по глобальным краевым серверам.
CDN ускоряет доставку контента, распределяя данные по глобальным краевым серверам.

Вот почему использование CDN для доставки изображений и ресурсов — это очевидный выбор:

Более быстрое время загрузки для пользователей повсюду

Предположим, ваш основной сервер находится в Нью-Йорке, но кто-то в Токио посещает ваш сайт. Без CDN их запрос должен пройти половину мира, что занимает время. С CDN сервер рядом с Токио доставляет контент, сокращая время в пути и позволяя вашему сайту загружаться мгновенно. Более быстрое время загрузки означает более довольных пользователей, а довольные пользователи остаются дольше.

Сниженная задержка и улучшенный пользовательский опыт

Задержка — это то раздражающее время ожидания между нажатием пользователем чего-то и фактическим появлением контента. Чем дальше пользователь находится от вашего сервера, тем выше задержка. CDN решает эту проблему, приближая ваши изображения и ресурсы к пользователю, сокращая задержки и делая все мгновенным. Независимо от того, просматривает ли кто-то ваш сайт с дивана в Лондоне или из кафе в Сиднее, они будут наслаждаться одинаково плавным опытом.

Снятие нагрузки с вашего основного сервера

Представьте себе ваш веб-сервер как занятого шеф-повара в ресторане. Без CDN шеф-повару приходится заниматься всем: готовкой, обслуживанием и даже доставкой еды удаленным клиентам. С CDN шеф-повар (ваш сервер) может сосредоточиться на готовке (работе вашего приложения), в то время как CDN занимается доставкой (обслуживанием изображений и ресурсов). Это снимает огромную нагрузку с вашего основного сервера, предотвращая перегрузки и обеспечивая плавную работу вашего сайта даже во время всплесков трафика.

Что такое S3 и CloudFront?

S3 (Simple Storage Service)

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

CloudFront

CloudFront — это служба сети доставки контента (CDN) от Amazon, которая обеспечивает быструю и безопасную доставку контента. Она работает, кэшируя ваши изображения и ресурсы на краевых серверах, расположенных по всему миру, так что пользователи могут быстро получать к ним доступ с сервера, ближайшего к ним. В сочетании с S3 CloudFront оптимизирует процесс доставки, бесшовно извлекая хранимые ресурсы и обслуживая их с минимальной задержкой. Вместе S3 и CloudFront предоставляют мощное, эффективное и масштабируемое решение для управления и доставки контента веб-сайта.

Стоимость использования S3 и CloudFront

Одно из лучших преимуществ AWS заключается в том, что вы платите только за то, что используете. Вот краткий обзор:

  • Стоимость S3:
    • Стоимость хранения: Вы платите за каждый ГБ хранимых данных, с разными тарифами в зависимости от уровня хранения (например, Standard, Infrequent Access, Glacier).
    • Стоимость запросов: Взимаются сборы за PUT, GET и другие запросы, сделанные к вашему бакету.
    • Передача данных: Передача данных из S3 в интернет влечет дополнительные сборы.
  • Стоимость CloudFront:
    • Передача данных: Вы платите за объем данных, доставленных пользователям через краевые узлы.
    • Запросы: Взимаются сборы за HTTP/HTTPS запросы, сделанные к CloudFront.
    • Региональные цены: Стоимость может варьироваться в зависимости от местоположения ваших пользователей.

Вы можете ознакомиться с Ценами на Amazon S3 и Ценами на Amazon CloudFront для получения подробной информации.

Пример: Стоимость использования S3 и CloudFront

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

Детали сценария

  • Хранение: 100 ГБ изображений, хранящихся в S3 (Standard Tier).
  • Запросы: 50,000 GET запросов и 10,000 PUT запросов в S3 в месяц.
  • Передача данных: 100 ГБ данных, переданных в CloudFront.
  • Доставка данных CloudFront: 100 ГБ данных, доставленных конечным пользователям через CDN.

Стоимость S3

  1. Стоимость хранения:
  • 100 ГБ в S3 Standard Storage = $2.30 в месяц (примерно $0.023 за ГБ).
  1. Стоимость запросов:
  • 50,000 GET запросов = $0.04 (примерно $0.0004 за 1,000 запросов).
  • 10,000 PUT запросов = $0.05 (примерно $0.005 за 1,000 запросов).
  1. Стоимость передачи данных (в CloudFront):
  • 100 ГБ = $0 (передача данных из S3 в CloudFront бесплатна).

Общая стоимость S3: $2.39/месяц

Стоимость CloudFront

  1. Стоимость передачи данных (из CloudFront к пользователям):
  • 100 ГБ, доставленных конечным пользователям = $8.50 (примерно $0.085 за ГБ для первых 10 ТБ).
  1. Стоимость запросов:
  • 50,000 HTTP/HTTPS запросов = $0.10 (примерно $0.002 за 1,000 запросов).

Общая стоимость CloudFront: $8.60/месяц

Итоговая сумма

Общая месячная стоимость: $2.39 + $8.60 = $10.99

Настройка AWS S3 и CloudFront для хостинга изображений и ресурсов

Это руководство проведет вас через настройку AWS S3 и CloudFront для эффективного обслуживания изображений с помощью пользовательского поддомена.

Эта настройка гарантирует, что:

  • Запросы с ваших разрешенных доменов (например, yoursite.com) могут получать доступ к ресурсам.
  • Запросы без заголовка Referer (например, прямой доступ к URL-адресам S3) блокируются.
  • Запросы с несанкционированных сайтов (горячая ссылка) отклоняются.
  1. Создайте SSL-сертификат в AWS Certificate Manager (ACM)

Поскольку CloudFront требует действительный SSL-сертификат для использования HTTPS с пользовательским доменом, первым шагом является создание SSL-сертификата.

  • Перейдите в AWS Certificate Manager (ACM).
  • Нажмите Запросить сертификат.
  • Выберите Запросить публичный сертификат.
  • Введите ваш поддомен (images.yoursite.com), и при желании добавьте *.yoursite.com, если хотите получить сертификат с подстановочным знаком.
  • Выберите DNS-валидацию (рекомендуется).
  • После отправки AWS предоставит CNAME записи, которые вам нужно добавить у вашего провайдера DNS (например, Route 53, Cloudflare, GoDaddy).
  • После проверки DNS-записи сертификат будет выдан.
AWS Certificate Manager: Успешно выдан SSL-сертификат для поддоменов
AWS Certificate Manager: Успешно выдан SSL-сертификат для поддоменов
  1. Создайте поддомен для обслуживания изображений

Теперь, когда SSL-сертификат готов, настройте поддомен (images.yoursite.com) для обслуживания ваших изображений.

  • Перейдите к вашему провайдеру DNS (Route 53, Cloudflare или другому).
  • Создайте CNAME запись:
    • Имя записи: images
    • Тип: CNAME
    • Значение: <ваш-id-распределения-cloudfront>.cloudfront.net
  1. Создайте распределение CloudFront

Теперь настройте CloudFront для обслуживания изображений из S3.

  • Перейдите в AWS CloudFront → Создать распределение.
  • В разделе Источник настройте:
    • Имя домена источника: выберите ваш S3 бакет.
    • Доступ к источнику: выберите Устаревшие идентификаторы доступа → Создать идентификатор доступа к источнику (OAI).
    • Политика бакета: выберите Я обновлю политику бакета вручную.
  • Настроить поведение:
    • Автоматически сжимать объекты: ✅ Да
    • Политика протокола просмотра: Перенаправить HTTP на HTTPS
    • Разрешенные HTTP-методы: GET, HEAD
    • Ограничить доступ для просмотра: ❌ Нет (если только вы не хотите подписанные URL)
  • Настройки кэширования и запросов к источнику:
    • Политика кэширования: ✅ CachingOptimized
    • Политика запросов к источнику: ✅ UserAgentRefererHeaders (передает Referer в S3)
  • Назначить SSL-сертификат:
    • В разделе Настройки выберите Пользовательский SSL-сертификат.
    • Выберите сертификат, который вы создали в AWS Certificate Manager.
  • Нажмите Создать распределение.
CloudFront: Конфигурация источника
CloudFront: Конфигурация источника
CloudFront: Конфигурация поведения
CloudFront: Конфигурация поведения
  1. Настройка разрешений бакета S3

По умолчанию бакет S3 является частным. Нам нужно разрешить CloudFront доступ к нему.

  • Перейдите в S3 → Выберите ваш бакет.
  • Разрешения → Включите ✅ Блокировать весь публичный доступ (поскольку CloudFront будет обрабатывать доступ).
  • Обновите политику бакета:

Замените <имя бакета> и <cloud front oai> на ваши реальные значения:


{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowAccessFromSubdomains",
            "Effect": "Allow",
            "Principal": {
                "AWS": "<cloud front oai>"
            },
            "Action": "s3:GetObject",
            "Resource": [
                "arn:aws:s3:::<bucket name>/images/*",
                "arn:aws:s3:::<bucket name>/assets/*"
            ],
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "http://*.yoursite.com/*",
                        "https://*.yoursite.com/*",
                        "http://yoursite.com/*",
                        "https://yoursite.com/*"
                    ]
                }
            }
        }
    ]
}
  1. Финальные шаги
  • Разверните CloudFront: дождитесь завершения развертывания распределения CloudFront.
  • Проверка загрузки изображения:
    • Попробуйте получить доступ к изображению: https://images.yoursite.com/path/to/image.jpg
  • Если вы получаете 403 Forbidden, проверьте, что:
    • Правильный CloudFront OAI назначен.
    • Политика S3 бакета включает ARN OAI.
    • Заголовок Referer передается.

✅ Теперь у вас есть полностью настроенная, оптимизированная и безопасная система обслуживания изображений с AWS S3 и CloudFront! 🚀

Заключение

И вот, что у нас получилось! С помощью AWS S3 и CloudFront мы создали быстрый, безопасный и экономичный способ обслуживания изображений как профи. Больше никаких перегрузок вашего веб-сервера или медленных времен загрузки — CloudFront берет на себя тяжелую работу, в то время как S3 поддерживает все в порядке и безопасности. Перенаправляя заголовок Referer и блокируя прямой доступ к S3, мы также закрыли доступ, чтобы предотвратить горячие ссылки и нежелательный трафик. Теперь ваши изображения загружаются молниеносно, остаются защищенными и масштабируются без усилий. Просто, эффективно и на долгие годы! 🚀