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

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

  1. Хостинг с оплатой по мере использования
  2. Сертификат SSL
  3. Функциональный субдомен www
  4. Легко настраиваемый, но минималистичный дизайн
  5. Статьи на основе Markdown

Для 4 и 5 выше я использовал Hugo с темой Minimal.

Предостережение

Обратите внимание, что это подробное руководство, предназначенное для тех, кто больше всего ценит гибкость и совместимость с другими сервисами AWS. Если вы просто ищете что-то легкое и быстрое, вы можете использовать Netlify или Amplify.

Предпосылки

Далее я предполагаю, что:

  1. Вы разработали и запрограммировали свой веб-сайт или, по крайней мере, имеете макет.
  2. У вас есть учетная запись AWS (если нет, перейдите зарегистрируйте ее. Учетные записи AWS включают один год бесплатного доступа к уровню).
  3. Вы знакомы с DNS и как это работает, по крайней мере, на высоком уровне.

Что касается DNS, краткое объяснение состоит в том, что это своего рода каталог Интернета, и, как Google владеет google.com, вы также можете владеть своим собственным доменом, например example.com. Для этого вам нужно обратиться к регистратору DNS и приобрести желаемый домен. Я настоятельно рекомендую использовать Namecheap в качестве регистратора, так как у них отличный интерфейс и низкие цены. В качестве альтернативы вы можете выбрать GoDaddy.

Если ваш домен .com занят и вам нужны умные гибридные приложения, вам пригодятся следующие сайты:

После покупки не устанавливайте никаких записей DNS. Мы сделаем это позже, когда доберемся до Route53.

Хостинг с Amazon AWS

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

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

Прежде чем приступить к делу, важно понять номенклатуру:

  • AWS: веб-сервисы Amazon
  • S3: Simple Storage Service, для хранения файлов
  • Route53: сервис для обработки записей DNS.
  • CloudFront: сеть доставки контента (CDN) для ускорения работы вашего веб-сайта, также необходимая для создания сертификата SSL.

Вот изящная Mindmap, разработанная с помощью Cloudcraft для того, что вы собираетесь построить:

Сначала мы сконцентрируемся на пути в правой части, поэтому это обычная конфигурация (с Route53, CloudFront и S3), а не для субдомена www. Важно отметить, что, используя эту модульную конфигурацию, вы вообще не будете запускать какой-либо внутренний сервер Linux, поэтому вам не нужно беспокоиться об обновлении или исправлении чего-либо. Насколько это удобно?

Сервис Amazon Simple Stoarage (S3)

Здесь вы будете хранить свои статические файлы (HTML, CSS, JavaScript). Если вы использовали приложение Create React или другую среду разработки внешнего интерфейса, поищите созданную вами папку «build» или «public».

Вот что вам нужно сделать:

  1. Создайте корзину S3 с именем example.com. Обратите внимание, что имена корзин S3 являются глобальными и, как и в случае с доменами, вам нужно будет найти другое имя, если кто-то занял example.com до вас. В зависимости от ваших потребностей вы можете включить или отключить параметры, которые предоставляет AWS: управление версиями, ведение журнала доступа к серверу, шифрование и т. Д.
  2. Обязательно снимите флажки, в которых упоминается блокировка и удаление списков управления доступом и политик общего доступа. Часто сегменты S3 используются для хранения частных данных, поэтому AWS оптимизирует конфигурацию для создания конфигураций с высокой степенью защиты. Однако в вашем случае вы хотите, чтобы ведро было общедоступным.
  3. Обязательно установите политику, вот пример.
  4. Активируйте «Статический хостинг веб-сайтов» для своего сегмента и установите флажок «Использовать этот сегмент для размещения веб-сайта».
  5. Загрузите файлы, убедившись, что index.html находится в корне вашей корзины.

Все описанные выше операции можно выполнить с помощью Веб-консоли управления AWS или AWS CLI. В частности, для шага 4 я бы рекомендовал сделать это в консоли, чтобы вы могли получить конечную точку для своего нового размещенного веб-сайта (я скрыл свою из соображений конфиденциальности):

Протестируйте его в браузере, чтобы убедиться, что вы правильно настроили корзину S3. Должно быть так:

example.com.s3-website.your-region.amazonaws.com

CloudFront

Для размещения статического веб-сайта вам на самом деле не нужен CloudFront или какой-либо другой CDN, потому что данных для хранения не так много, а прирост эффективности и UX незначителен. Однако одной из первоначальных целей было защитить веб-сайт с помощью сертификата SSL, поэтому мы будем использовать CloudFront.

Теперь вы, возможно, слышали о CloudFlare, который, возможно, является самым простым способом начать работу с CDN, а также обеспечивает некоторые преимущества безопасности SSL. Я говорю некоторые, потому что у них есть вводящая в заблуждение функция под названием Гибкий SSL, которая не имеет гарантий безопасности, которые есть у самозаверяющего SSL-сертификата.

Поэтому вы не собираетесь использовать это, а вместо этого воспользуетесь аналогичным сервисом в AWS под названием CloudFront. Вы можете думать об этом как о ваших собственных серверах распространения контента, поскольку данные кэшируются в нескольких местах по всему миру, чтобы обеспечить вашим пользователям быстрое время отклика. Что еще более важно для статического веб-сайта, это также позволяет использовать сертификат SSL.

Опять же, вы можете создать свой дистрибутив CloudFront с помощью интерфейса администратора AWS или инструмента командной строки. Вот пример конфигурации.

Предостережения:

  1. Имя источника должно быть конечной точкой, которую вы получили после активации «Статического хостинга веб-сайтов» в корзине S3.
  2. НЕ устанавливайте «DefaultRootObject». Оставьте это пустым.
  3. Разрешить как HTTP, так и HTTPS. Вы сможете автоматически перенаправлять пользователей с HTTP на HTTPS после того, как сертификат будет подписан и установлен.

Обязательно подождите, пока дистрибутив загрузится правильно (это может занять до 15 минут). Проверьте это, открыв конечную точку, которую вы получаете, ваш статический веб-сайт S3 должен появиться. Конечная точка должна выглядеть так:

13fb4knzujxq0b.cloudfront.net

Запишите где-нибудь свою конечную точку CloudFront, потому что мы будем использовать ее с Route53 через секунду.

Маршрут53

Пришло время подключить домен, который вы купили у своего регистратора DNS, к CloudFront и S3. Route53 служит для этого мостом.

Вот что вам нужно сделать, чтобы настроить Route53 и подключить домен к CloudFront:

  1. Создайте зону хостинга Route53 и укажите свой домен. Сделайте это общедоступным.
  2. Вам будет предоставлено 4 записи NS. Скопируйте и вставьте серверы имен на страницу администрирования внешнего домена. Если вы используете Namecheap, вот как вы можете обновить свои серверы имен. В Namecheap перейдите в Account - ›Dashboard -› Manage - ›Nameservers -› Custom DNS и поместите туда свои 4 сервера имен:

3. Создайте набор записей и оставьте имя пустым (по умолчанию example.com). Тогда вам нужно:

  • Установите тип «A - IPv4-адрес».
  • Ответьте «Да» на «Псевдоним» и установите в качестве цели псевдонима URL-адрес распространения CloudFront.
  • Сохраните политику маршрутизации как «Простую» и, в зависимости от вашего бюджета и потребностей, включите или отключите «Оценивать состояние целевого объекта».

4. Повторите шаг 3 для типа «AAAA - IPv6-адрес», если вы разрешили раздачу CloudFront быть совместимой с IPv6. Если вы следовали этому руководству, IPv6 был включен по умолчанию.

Обратите внимание, что распространение DNS может занять до 72 часов, хотя обычно его следует обновлять в течение нескольких часов или быстрее. Если вы ранее установили какие-либо другие записи DNS (например, MX для рабочих писем), вам придется сбросить их в Route53.

Настройка вашего поддомена WWW

Поздравляю с этим! Сожалею, что сообщаю вам, что теперь вам нужно повторить все три предыдущих шага. Да, вы правильно поняли, из-за неуловимого способа работы Интернета www не является чем-то включенным в качестве целостного компонента HTTP.

Важно отметить, что на самом деле добавлять субдомен www на ваш веб-сайт не обязательно, и вы можете спокойно перейти к следующему шагу, если вас устраивает, что конечные пользователи не могут получить доступ к вашему сайт через www.example.com. Я был немного педантичен, и мне просто пришлось добавить субдомен www.

Примечания:

  1. Повторите только шаги для S3, CloudFront и Route53, вам не нужно (и нельзя) переходить в Namecheap, чтобы купить www.example.com.
  2. Для всех полей, где вас просили поставить example.com, теперь ставьте www.example.com.

Если вы задаетесь вопросом, означает ли создание сегментов S3 необходимость развертывания статических файлов для них обоих, ответ - нет, вам не нужно этого делать. Когда вы активируете «Статический хостинг веб-сайтов» для своего второго сегмента S3, выберите «Перенаправить запросы» вместо «Использовать этот сегмент для размещения веб-сайта»:

Сертификат SSL

LetsEncrypt - одна из лучших вещей, которые произошли с Интернетом за последние пару лет. Они демократизировали доступ к SSL-сертификатам, и это огромное достижение, им слава! Если LetsEncrypt был так полезен для вас, подумайте о том, чтобы сделать пожертвование.

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

  1. Перейдите в репозиторий certbot-s3front и установите инструмент. У вас должны быть установлены Python и pip.
  2. Следуйте их инструкциям, но (1) пропустите части S3 и CloudFront, вы уже это сделали, и (2) установите example.com, www.example.com в качестве значения для -d (домен) параметр. Подробнее об этом читайте на форуме ЛЭ.
  3. После успешного создания SSL-сертификата вы можете дополнительно включить «Перенаправление HTTP на HTTPS» в своем голом домене (то есть «example.com») распространения CloudFront. Не делайте этого для www, так как это все равно приведет к перенаправлению на ваш голый домен.
  4. Обязательно сделайте резервную копию вашего /etc/letsencrypt/live/example.com сертификата (ов).

Примечания:

  1. По загадочным причинам я не мог заставить работать аутентификацию certbot, задав переменные среды AWS_ACCESS_KEY_ID и AWS_SECRET_ACCESS_KEY. Это может быть вызвано тем, что у меня в ~/.aws/credentials несколько разных профилей, но я не уверен. Чтобы избежать ошибки NoCredentialsError, просто временно установите профиль по умолчанию, и certbot подберет его.
  2. Если вам, как и мне, не повезло, и вы снова получаете ошибку IAMCertificateId, ознакомьтесь с этим решением.

ACM

Вскоре после публикации этой статьи многие люди заявили, что было бы намного проще использовать AWS Certificate Manager (ACM) для создания сертификатов. Не нужно думать о продлении, но это означает, что вы привязаны к AWS.

Узкие места

  1. Нет серверной логики: это руководство применимо только к статическим веб-сайтам, поэтому вы не можете запускать какую-либо внутреннюю логику с помощью модуля Node.js, такого как ExpressJS. Для этого вы можете развернуть экземпляр EC2, написать Lambda-функции или использовать Docker через ECS / Kubernetes.
  2. Срок действия сертификатов LetsEncrypt истекает через 90 дней: это можно решить двумя способами. Во-первых, вы можете установить напоминание в своем календаре, что я признаю неоптимальным, но я нахожусь в стадии экспериментов, поэтому меня не беспокоит небольшая ручная работа. Во-вторых, вы можете установить задание cron, но вам понадобится Linux-сервер и вы будете использовать параметры «- Renew-by-default - text» при взаимодействии с certbot.
  3. Предварительный просмотр расширенных ссылок может быть беспорядком: это может быть проблема, специфичная для моей темы Hugo, но я также думаю, что каждый хочет иметь правильное изображение и описание для предварительного просмотра при публикации ссылок на свои веб-сайты. Вот, как мне это удалось.

Заворачивать

Поздравляем, теперь у вас есть действительно дешевый, но все же очень гибкий статический веб-сайт! Статистика выставления счетов для 100–1000 активных посетителей в месяц и довольно частых развертываний S3 составляет от 1 до 2 долларов, так что это кража! Для дальнейшего использования вам может потребоваться обновить компоненты AWS, но это выходит за рамки данного руководства.

Если вы опытный разработчик, желающий воспроизвести это руководство на нескольких аккаунтах AWS, вы можете попробовать Terraform. Это отличный инструмент Инфраструктура как услуга, который можно использовать для определения S3, CloudFront и Route53 как фрагментов кода. Разве технологии не такие уж удивительные?

Надеюсь, вы найдете этот урок полезным! Найдите меня в Twitter или Keybase, если хотите пообщаться.

Кредиты

  • Amazon за логотипы AWS, S3, CloudFront и Route53.

Первоначально опубликовано на paulrberg.com