Создание статического веб-сайта Инфраструктура облачного хранилища и непрерывное развертывание с помощью AWS Code Pipeline

Введение

Это запись моего выступления на ту же тему для PWA Pilipinas и AWS Siklab Pilipinas 20 марта 2022 года. Я рассказал о нескольких основных сервисах AWS для создания наиболее распространенной архитектуры статического веб-сайта, а именно: S3, CloudFront, Route53, ACM и IAM.

…И, на всякий случай, если вы еще не в курсе: AWS запустила ролевую игру под названием Cloud Quest на сайте skillbuilder, где первым заданием является создание статического веб-сайта!

Что такое статический веб-сайт?

Статические веб-сайты — это не что иное, как набор легких статических файлов (это могут быть html, css, javascript, файлы изображений), которые обслуживаются хостом веб-браузером или клиентом, обращающимся к сайту, именно в том виде, в котором они хранятся. Независимо от того, если пользователь1 пытается получить доступ к домашней странице сайта (index.html), а пользователь2 пытается получить доступ к тому же самому, они получат абсолютно одинаковое содержимое. Это статический сайт (не меняется в зависимости от условий), в отличие от динамического сайта, который может меняться от пользователя к пользователю.

Основной принцип работы статического веб-сайта заключается в том, что браузеры клиентов (это может быть как компьютер, так и мобильный телефон) обращаются к домену (www.example.com), который указывает на веб-сервер, содержащий статические файлы, запрашиваемые клиентом. Таким образом, он обслуживается через HTTP/HTTPS.
В облачной архитектуре, где все может быть бессерверным и пользователь не имеет представления о базовой серверной инфраструктуре, это будет выглядеть примерно так:

1. Route53 — это DNS-сервис AWS, который является чрезвычайно надежным и экономически эффективным способом маршрутизации конечных пользователей к интернет-приложениям. Он может переводить имена, такие как www.example.com, в числовые IP, например 202.54.44.181, которые компьютеры используют для связи друг с другом.
2. Cloudfront, с одной стороны, является сетью доставки контента (CDN) AWS. Он предоставляет возможности кэширования для повышения производительности. Он хранит часто используемые файлы в периферийном месте (которое ближе к конечному пользователю), поэтому содержимое не нужно многократно извлекать из бэкенда.
3. AWS Certificate Manager (ACM) — это служба, позволяющая легко предоставлять, управлять и развертывать публичные и частные сертификаты Secure Sockets Layer/Transport Layer Security (SSL/TLS) для использования в службах AWS и ваших внутренних подключенных ресурсах.
4. У нас также есть S3. Это служба объектного хранения (она управляется AWS, то есть вы не владеете обслуживанием сервера). Он обеспечивает высокую доступность, масштабируемость, безопасность и производительность. В этой архитектуре мы развернем приложение React, которое является популярным фреймворком для создания динамических веб-приложений, но на этой демонстрации мы выполним процесс сборки для создания статических файлов для развертывания.

Построение инфраструктуры шаг за шагом

Предварительные требования

1. Node
2. Git
3. AWS-CLI

Создайте приложение React

1. Выполните следующие команды, чтобы создать рабочий каталог и создать шаблонное приложение react.После этого оно будет выглядеть примерно так, как показано ниже:
2. Запустите приложение локальноОно загрузится в браузере на вашем локальном хосте.Теперь вы знаете, что оно работает!
3. Чтобы создать статические файлы для развертывания, выполните следующую командуВы должны увидеть папку build, содержащую статические файлы.Настройте DNS
4. В AWS Management Console перейдите к службе Route53 и найдите Register domain.Домены .com, конечно, используются большинством сайтов и выглядят законно, поэтому, если речь идет о компании/учреждении, всегда выбирайте .com.
5. Заплатите минимальную плату за защиту конфиденциальности (это необходимо только для сайтов в зоне .com).
6. Завершите заказКогда вы регистрируете домен на Amazon Route 53 или переносите регистрацию домена на Route 53, AWS настраивает домен на автоматическое продление. Период автоматического продления обычно составляет один год, хотя реестры некоторых доменов верхнего уровня (TLD) имеют более длительные периоды продления.Сначала ваш домен должен отображаться в разделе «Ожидающие запросы», а затем, после завершения процесса, перейдет в раздел «Зарегистрированные домены». AWS отправит вам подтверждение по электронной почтеа также подтверждение по электронной почте.Ссылка для проверки создаст размещенную зону. Размещенная зона — это концепция Amazon Route 53. Размещенная зона аналогична традиционному файлу зоны DNS; она представляет собой набор записей, которыми можно управлять совместно и которые принадлежат одному родительскому доменному имени. Все наборы записей ресурсов в размещенной зоне должны иметь в качестве суффикса доменное имя размещенной зоны.Verify отправит еще одно письмо, и на этом настройка домена будет завершена!Он еще ни на что не указывает, поэтому при просмотре он не будет ничего загружать.Создайте ведро S3
7. В консоли управления AWS перейдите в раздел S3.Создайте два ведра, а именно: www.girlwhocodes.click и girlwhocodes.click. Создайте первое onw без www, и оставьте все по умолчанию.После создания, проделайте те же шаги для www. Теперь у нас должно быть два ведра:Создайте пользователя IAM для AWS-CLIМы должны создать пользователя IAM, поскольку файлы будут загружаться с помощью AWS-CLI. Существует также возможность загрузить файлы непосредственно на S3 через консоль управления AWS, но это будет демонстрацией возможности AWS-CLI.
8. Перейдите в службу IAMСледуйте указаниям мастера для создания пользователяПрикрепите AdministratorAccess для простотыТеги необязательныЗавершите работу мастера…
9. Настройте пользователя на локальной машине, настроив идентификатор ключа доступа AWS и секретный ключ доступа AWS для вашего пользователя
10. Протестируйте доступ, выполнив любую команду AWS-CLIЗагрузите статические файлы на S3
11. Выполните команду s3 sync, чтобы скопировать локальные файлы сборки React в ведро s3.
12. Затем вы можете проверить в консоли управления AWS, были ли файлы загружены.Обновление разрешений ведра S3 и включение для хостинга статических веб-сайтовПо умолчанию AWS блокирует публичный доступ к вашему ведру S3. AWS рекомендует блокировать весь публичный доступ к вашим ведрам.
13. Для простоты мы сохраним доступ к ведру s3. Обновление запросит подтверждение того, что вы хотите сделать именно это.Тада!
14. Чтобы сделать объекты в вашем ведре общедоступными для чтения, напишите политику ведра, которая предоставляет всем разрешение s3:GetObject.
15. Включите ведро для размещения статических веб-сайтов (выберите Enable).В поле index document введите имя файла домашней страницы, обычно index.html.Примечание: Для не-wwww, поскольку мы не хотим поддерживать 2 копии файлов, выберите Перенаправлять запросы на объект.
16. Чтобы быстро проверить это, нажмите на файл index.html в вашем ведре. В разделе свойств вы увидите конечную точку объекта. Конечная точка — это конечная точка сайта Amazon S3 для объекта вашего ведра. Щелкнув на конечной точке, вы загрузите страницу в браузере.Дополнительные конфигурации домена!
17. Добавьте запись A для S3. Нажмите на размещенную зону:По умолчанию у вас должны быть записи NS и SOA.Запись NS (сервер имен) указывает, какой DNS-сервер является авторитетным для данного домена (т.е. какой сервер содержит фактические DNS-записи). В основном, записи NS указывают Интернету, куда следует обратиться, чтобы узнать IP-адрес домена. Запись SOA (start of authority) хранит важную информацию о домене или зоне, например, адрес электронной почты администратора, время последнего обновления домена и время ожидания сервера между обновлениями. Все зоны DNS нуждаются в SOA-записи, чтобы соответствовать стандартам IETF.Приступите к созданию «A-записи» www и направьте ее в S3.
18. Добавьте еще одну «A-запись» для не-www домена.После этого у вас должны получиться следующие записиПоскольку ваш домен теперь указывает на S3, он уже должен загружаться при просмотре через браузер.Вы должны заметить, что этот сайт обслуживается с AmazonS3, когда вы просматриваете заголовки ответов для Server.Поскольку этот сайт небезопасен, нам также необходимо настроить CloudFront и прикрепить TLS сертификат. Запрос публичного сертификата в ACM
19. Перейдите в службу ACM. Убедитесь, что вы запрашиваете или импортируете сертификат в регионе US East (N.Virginia).
20. Следуйте указаниям мастера для запроса публичного сертификатаДобавьте www и не www в полностью определенные доменные имена.
21. Выберите проверку DNS в качестве метода проверки, поскольку это проще. Теги можно пропустить, затем нажмите на Request.Вы попадете на эту страницу, где будет показано ожидание проверки. Нажмите на кнопку Создать записи.Запись канонического имени (CNAME) используется вместо записи A, когда домен или поддомен является псевдонимом другого домена. Запись CNAME используется в системе доменных имен (DNS) для создания псевдонима от одного доменного имени к другому доменному имени.
22. В ACM вы можете просто нажать на Создать записи в Route53, чтобы автоматически добавить записи CNAME без необходимости копировать и вставлять их туда.Если вы откроете Route53, эти записи должны быть добавлены.В ACM состояние сертификата должно измениться с Pending Validation на Issued. Настройка CloudFront
23. Перейдите в AWS Console и нажмите на CloudFront.
24. Добавьте детали в мастере. Origin в источнике дистрибутива, поэтому добавьте туда путь S3.Обратите внимание, что нам нужно два дистрибутива (один для www и один для не-www).
25. Добавьте запись CNAME
26. В том же мастере добавьте сертификат ACM.Также выберите перенаправление http на https. Все остальное должно быть по умолчанию, поэтому нажмите на кнопку Создать дистрибутив.Проделайте те же шаги для не-www домена.Если вы перезагрузите страницу в браузере, вы увидите, что содержимое обслуживается S3, но в заголовке ответа указано, что теперь оно передается через дистрибутив CloudFront.
27. Обновите записи Route53 www и non-www, чтобы они теперь указывали на CloudFront.Когда вы перезагрузите страницу, она теперь будет отображаться как безопасная.Если вы изменили файл в S3 и он не загружается в браузере, это потому, что CloudFront обслуживает кэшированное содержимое. Инвалидируйте его, чтобы заставить его снова получить содержимое из S3.

Создайте конвейер развертывания (дополнительно!)

Как DevOps-инженер, я должен больше говорить о конвейерах, поэтому мы подробнее рассмотрим Code Pipeline, который является еще одним сервисом AWS.

1. Создайте конвейер в Code Pipeline. Пройдите через мастер, используя в основном настройки по умолчанию. Также создайте новую роль службы.Выберите следующие параметры
2. Для стадии источника, поскольку я установил свой код на GitHub, я установлю его в качестве источника.
3. Нам также необходимо установить соединение с GitHub Выберите GitHub здесьДобавьте имя к соединению и нажмите на ConnectДолжна произойти однократная настройка для проверки соединенияВыберите репозитории, к которым вы хотите разрешить доступ AWSДолжен появиться код, затем нажмите на Connect, чтобы завершить работу мастера.
4. Перейдите к другим шагам мастераПримечание: Я пропустил этап сборки, так как собираю файлы локально.
5. На этапе развертывания выберите Amazon S3 в качестве провайдера.
6. Просмотрите конвейер на последнем этапеЗатем создайте!Конвейер будет создан, но будет отображаться с красными отметкамиЕсли нажать на ошибку, будет показана причина того, что ведро S3 еще не разрешает ACL.Это можно отредактировать в S3 через консоль управленияи убрать красные метки в трубопроводе.

Протестируйте конвейер

1. Обновите файлы вашего статического веб-сайта, например, обновите параграф.
2. Протестируйте изменения локально
3. Запустите npm build для создания новых статических файлов
4. Внесите код в GitHub
5. Конвейер должен быть запущен действием push
6. Файлы будут загружены на S3
7. Снова аннулируйте кэш распространения, чтобы увидеть отражение изменений.На этом архитектура статического сайта с конвейером для непрерывного развертывания завершена!

Существует часть 2 этой статьи, которую я написал, где ручной процесс создания архитектуры выполняется с помощью Terraform Code. Перейдите по ссылке, если вы хотите ознакомиться с ней!