Skip to main content

Как настроить бесплатный CDN и HTTPS во всем мире - сокращение затрат на размещение на 75% (S3 + Cloudflare)

Мой учебник по Webassembly 101 получил ~ 50000 просмотров страниц после попадания на первую страницу новостей hacker news. В июне у Amazon я получил счет в размере $ 12 USD S3. В этом уроке я покажу вам, как получить бесплатный CDN и HTTPS, используя Cloudflare.

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

Что такое CDN и зачем вам это нужно?

Сеть доставки контента или сеть распространения контента (CDN) представляет собой географически распределенную сеть прокси-серверов и их центров обработки данных. Цель состоит в том, чтобы распределить услуги по пространству относительно конечных пользователей для обеспечения высокой доступности и высокой производительности.

Вкратце:

  1. Снижение затрат на хостинг
  2. Лучшая производительность для конечных пользователей
  3. Зашифрованный трафик для большей безопасности

Исходные ошибки

  1. Нет CDN.
  2. Изображения с высоким разрешением на S3.
  3. Нет HTTPS, что приводит к потерянным реферерам.

    Заголовок Referrer не отправляется браузерам, если [...] используется необработанный HTTP-запрос, а ссылочная страница была получена с помощью защищенного протокола (HTTPS).

Ошибки 1 и 2 привели к 12-долларовому счету за июнь 2017 года, ~ 100 + Gb данных, переданных по $ 0,09 / Гб.

 

Ошибка 3 привела к плохой аналитике, поскольку большинство рефереров не установлены.

Исправление 1: настроить Clouflare перед вашим сайтом

У Cloudflare есть приятный посадку после регистрации на бесплатную учетную запись. Основные шаги:
  1. Обновите DNS-сервер в своем регистраторе с помощью тех, которые Cloudflare предоставляет вам на вкладке CDN:на панели регистрации вашего регистратора вам просто нужно скопировать пасту над URL-адресами:
  2. Установите ведро S3 с совместимым с cdn именем: и замените его именем вашего сайта. Более подробную информацию см. В документации cdn.example.com.s3.eu-central-1.amazonaws.com

    Если ваш домен «example.com» , и вы хотите использовать «файлы» CNAME вам необходимо убедиться, что имя ведра S3 является «files.example.com». Amazon требует, чтобы CNAME соответствовал имени ведра.

  3. Создайте запись CNAME cdn для вышеуказанного URL-адреса контейнера CDN.

  4. Через 24 часа DNS обновился, и я смог получить доступ к содержимому моего содержимого S3 cdn.openbloc.fr.

Исправление 2: обновить все статьи с изображениями с низким разрешением и URL-адресами CDN

Довольно просто, как говорится в названии. Не храните изображения 4000x3000 px! Используйте низкое разрешение и сжимайте jpeg-изображения столько, сколько позволяет качество.

Исправление 3: Бесплатный HTTPS

Cloudflare предлагает приятный сервис: Cloudflare с одним кликом SSL.

Если у вас нет сертификата SSL на исходном сервере, доступный бесплатный вариант - это гибкий SSL:

Гибкий SSL

Гибкий SSL шифрует трафик от Cloudflare до конечных пользователей вашего сайта, но не от Cloudflare до вашего исходного сервера. Это самый простой способ включить HTTPS, поскольку он не требует установки SSL-сертификата по вашему происхождению. Хотя это не так безопасно, как и другие опции, Flexible SSL защищает ваших посетителей от большого класса угроз, включая общедоступный мониторинг WiFi и встраивание объявлений через HTTP.

Включение его всего в один клик:

Конечно, если у вас уже есть SSL-сертификат на вашем сервере, перейдите по ссылке Full SSL!

Результаты кэширования трафика

Мы получили бесплатную CDN и бесплатную установку HTTPS без использования SSL-протокола Heroku. Я почти ничего не буду платить за свой следующий счет S3 :)

Как вы можете видеть ниже, 84% трафика теперь кэшируется: 

Вывод

  1. 1 июня - 30-ый счет AWS: 12,32 доллара США с просмотренными 51896 страницами.
  2. С 1 июля по 31-й счет AWS: 0,20 доллара США с просмотренными 3056 страницами.

Стоимость хостинга снизилась с $ 0,24 USD за 1000 страниц, просмотренных до $ 0,06 за 1000 просмотренных страниц. Это 75% -ное снижение стоимости вашего счета за хостинг, бесплатно!

Спасибо за прочтение !

Бонусы:
  1. HTTPS везде :

    Перенаправить все запросы со схемой «http» на «https». Это относится ко всем HTTP-запросам в зону.

  2. Оппортунистическое шифрование

    Оппортунистическое шифрование позволяет браузерам пользоваться улучшенной производительностью HTTP / 2 и SPDY, сообщая им, что ваш сайт доступен по зашифрованному соединению. Браузеры будут продолжать показывать «http» в адресной строке, а не «https».

  3. Автоматический перезапуск HTTPS

    Автоматический HTTPS Rewrites помогает исправить смешанный контент, изменив «http» на «https» для всех ресурсов или ссылок на вашем веб-сайте, которые можно обслуживать с помощью HTTPS.

Maxime Rouyrre - предприниматель, UX дизайнер и веб-инженер. В настоящее время работает полный рабочий день, но мы можем сделать некоторые сети! Вы можете встретиться со мной в Париже, Франция.