В этом посте я буду описывать, как я выполнил проблему Acloud Guru для разработки и развертывания веб -сайта Cloud Resume на AWS. Детали задачи можно найти Здесь Анкет Это был действительно интересный вызов и помог мне узнать несколько новых вещей. Наличие собственного веб -сайта резюме очень полезно, так как сейчас все переходит в Cloud. Таким образом, естественно иметь свой опыт и профиль в облаке. Здесь я описываю, как я разработал и развернул свой веб -сайт портфеля. Надеемся, что это поможет кому -то создать собственный сайт. Теперь есть много способов достичь того же результата. Этот пост является моим методом процесса разработки и развертывания.
Кодовая база для этого поста может быть найдена Здесь Анкет
Об вызове и веб -сайте
Позвольте мне сначала дать обзор о том, каковы требования к вызову. На высоком уровне это основные цели, которые должны были быть достигнуты:
- Разработать резюме в качестве веб -сайта, используя HTML и CSS
- Размещайте HTML -файлы на AWS S3 и проводят такой же, как и статический веб -сайт через S3
- Пользовательский домен, чтобы указать на веб -сайт. Нажатие на пользовательский домен должен открыть веб -сайт резюме, и он должен служить на HTTPS
- Включите счетчик посетителей на сайте. Счетчик должен прочитать подробности, связанные с графом из бэкэнд -динамода, через API
- API должен быть разработан с помощью Python
- Вся инфраструктура должна быть определена с использованием шаблонов SAM (IAAC) и версии контролируется
- Наконец, чтобы развернуть весь веб -сайт, должно быть два отдельных конвейера CI/CD: один для переднего конца и один для заднего конца
Для моего веб -сайта есть подробности высокого уровня о том, как я строил и развернул.
- Для передней части я создал веб -приложение React и создал его в качестве спа -салона (приложение для одной страницы)
- Для бэкэнда это API Python Flask, который получает данные от DynamoDB. API Flask развернута как лямбда
- Вся архитектура построена с использованием шаблона SAM
- Развертывание автоматизируется с использованием рабочего процесса действий GitHub, который запускается, когда изменения направляются в основную ветвь на GitHub Repo.
На сайте также показано подсчет посетителей на домашней странице. Подсчет посетителей сохраняется в DynamoDB, который доступ к API Flask.
Позвольте мне просмотреть более подробную информацию о каждом из этих компонентов.
Общая архитектура
Позвольте мне пройти через высокий уровень объяснения всей архитектуры приложения. Вся система разделена на две части: Frontend и Backend. Ниже изображение должно объяснить общую систему.
Фронт Передняя часть – это приложение React One Page. Приложение общается с бэкэнд, вызывающей конечные точки API. Приложение имеет два разных пользовательского интерфейса, основанный на том, открыт ли он на рабочем столе или на мобильном устройстве. Приложение React создано, и статические файлы развернуты в ведре S3 для размещения веб -сайта. Ниже приведены компоненты, которые содержатся во всей архитектуре фронта:
- S3 Bucket: Это ведро, в котором хранится статические файлы, построенные из приложения React. Ведро включено для статического хостинга и обнародовано, чтобы файлы могли быть доступны конечной точкой веб -сайта. Это развернуто с использованием шаблона CloudFormTaion. Шаблон является частью моего репозитория GitHub.
- Cloudfront Distribution: Это CDN, который выступает на сайте, размещенном на ведре S3. Это веб -распределение с дополнительными доменами, указанными для картирования моего пользовательского домена. Это также развертывается с использованием шаблона облачной информации, где указаны параметры, связанные с распределением.
- Маршрут 53 и размещенная зона: Чтобы разоблачить веб -сайт, я купил пользовательский домен из AWS и настроил его по маршруту 53. Записи псевдоним добавляются в размещенную зону маршрута 53 для пользовательского домена. Записи псевдоним указывают на распределение Cloudfront. Для сервера веб -сайта через HTTPS я также сгенерировал сертификат от ACM.
Задняя часть Для заднего конца я разработал API Flask. API раскрывает конечные точки, которые при обращении к обращению выполняют действия для обновления счетчика и возврата обратного количества из базы данных Dynamo DB. API Flask развернута в качестве функции Lambda и публично выявляется через API Gateway. Весь задний конец развертывается с помощью шаблона SAM. Ниже приведены компоненты, которые составляют заднюю архитектуру:
- Функция Lambda: API Flask развернута как лямбда -функция. Он разоблачает разные конечные точки TP обновлять количество и получить счет от DynamoDB. Чтобы подключить DynamoDB из кода Python, я не храню каких -либо учетных данных в коде. Роль IAM назначается функции Lambda, которая предоставляет ей необходимые разрешения для доступа к DynamoDB. DB хранит подсчет посетителей на столбце, который читается функцией Lambda и возвращается обратно в качестве ответа. Эта функция развернута с шаблоном SAM. Шаблон SAM является частью моего репо.
- Lambda слои: Зависимости для функции Python Lambda собираются в слое Lambda. Lambda -слой также создается через шаблон SAM и связан с функцией Lambda. Зависимости загружаются на уровень из локальной папки пакета, где зависимости предварительно установлены из файла требований. В фактическом сценарии развертывания это обрабатывается трубопроводом CI/CD.
- API Gateway: Функция Lambda и конечные точки API открываются публично через шлюз API. Это простой шлюз API, развернутый как часть шаблона SAM. Все маршруты функций лямбда направляются через шлюз API. Это по своей сути создается с помощью развертывания SAM, и я не настроил тот, который создается.
DynamoDB: Это бэкэнд -таблица данных, которая также развертывается шаблоном SAM. Таблица данных посетителей создана с первичным ключом для посетителей. Это будет содержать только количество посетителей и никаких других записей. Вот как будут выглядеть данные: Я развернул очень простые настройки Dynamodb Table, чтобы пока оставаться в свободном уровне.
Мониторинг: Как Front End, так и задний конец контролируются CloudWatch, где я настроил несколько оповещений, чтобы предупредить меня о любой ошибке. Это предупреждения, которые я настраиваю для мониторинга каждого стека:
- Передний конец: для фронта я установил оповещения Cloud Watch на основе метрик ошибок CloudFront и отправляю электронное письмо в тему SNS, где я подписан
- Задняя часть: для бэкэнда предупреждение CloudWatch установлено в группе журналов CloudWatch для функции Backend Lambda. Оповещение отправляет электронное письмо на основе строк ошибок в журнале Cloud Watch.
Развертывание и конвейер CI/CD
Чтобы развернуть различные компоненты архитектуры приложения, я использую рабочий процесс действий GitHub и автоматизирую весь процесс развертывания. Есть два отдельных рабочих процесса, созданных для развертывания передней части и бэкэнд отдельно. Существует два разных репозитория Github для переднего конца и бэкэнда, которые запускают соответствующие потоки GitHub. Оба файла потока GitHub находятся в моем репо GitHub и могут быть направлены. Позвольте мне пройти через каждый из потоков.
Пользовательский изображение и реестр Docker Поскольку все команды развертывания будут включать Sam Cli и AWS CLI, я создал пользовательское изображение Docker, которое содержит оба из них установленных. CLI настраивается с помощью переменных среды, которые передаются при инициализации контейнера с помощью изображения Docker. Изображение Docker хранится в частном реестре, который я создал на Gitlab. Токен для входа в Gitlab передается в секрете репо Github и используется в рабочем процессе действий для входа в систему и вытягивания изображения Docker для запуска контейнера. Все команды развертывания выполняются в этом контейнере.
Фронт -конечный поток Ниже изображение показывает шаги, которые построены как часть потока действий GitHub.
Ниже приведены шаги, происходящие в рабочем процессе:
Сборка: На этом этапе я выполняю тестовую сборку приложения React, чтобы проверить, успешно ли оно создается после любого изменения в коде. Если сборка не удается, весь рабочий процесс не удается и отправляет мне уведомление. На этом шаге это действия, которые происходят:
- Запустите контейнер Docker из пользовательского изображения Docker
- Осмотрите код и запустите установку NPM для установки всех зависимостей
- Запустите команду Build, чтобы построить статические файлы из приложения React. Если сборка не удается, рабочий процесс не удается
Развернуть инфра: На этом этапе я развертываю необходимую инфраструктуру, необходимую для поддержки развертывания фронтальных файлов и раскрытия веб -сайта. Инфра -компоненты развернуты с использованием шаблона облачной информации, который запускает новый стек на AWS. Ниже приведены компоненты, которые развертываются шаблоном CloudFormation:
- S3 Bucket и настроить статическое свойство веб -сайта для ведра
- Распределение CloudFront с приведенным выше ковшом S3 в качестве происхождения Команда CloudFormation Deploy выполняется в контейнере Docker, запущенном из пользовательского изображения Docker, где клавиши AWS передаются в виде переменных ENV.
Развертывание: Это последний шаг, на котором строится приложение React, и генерируемые статические файлы копируются в ковш S3, включенное для статического хостинга. Как только файлы будут развернуты в ведре S3, веб -сайт можно получить через конечную точку CloudFront.
Весь этот поток работает каждый раз, когда изменение вносится к репо. Если нет никаких изменений в конкретном файле, связанном с определенным этапом, изменения не применяются, и поток переходит к следующему шагу.
Задний поток Ниже изображение показывает, как работает поток для развертывания компонентов заднего конца.
Сборка: На этом этапе я запускаю некоторые модульные тесты Python на коде, чтобы проверить, что новые изменения не вызывают никаких ошибок. Если тест не удается, рабочий процесс не удается и отправляет мне уведомление. Я также выполняю сборку SAM на этом шаге, чтобы проверить, что сборка также успешно происходит. В целом, это задачи, происходящие на этом шаге:
- Запустите контейнер Docker из пользовательского изображения
- Установить все зависимости от питона из Файл требований
- Запустите модульные тесты. При сбое, рабочий процесс не удается
- Запустите образец сборки, чтобы гарантировать, что сборка успешна
Развернуть инфра: На этом этапе я развертываю необходимую вспомогательную инфраструктуру, необходимую для компонентов без серверов, развернутых шаблоном SAM. Инфра -компоненты определяются в шаблоне облачной информации, который я использую для создания стека на AWS. Я запускаю команду AWS в контейнере Docker, запущенном из пользовательского изображения. Ниже приведены компоненты, которые развертываются этим шаблоном:
- S3 Bucket для артефактов пакета SAM
- IAM Роль, которая будет принять функцию Lambda
Развертывание: На этом этапе я наконец развертываю компоненты без серверов в AWS через SAM CLI. Команда SAM выполняется внутри контейнера Docker, запущенного из пользовательского изображения Docker. Ниже приведены задачи, происходящие на этом шаге:
- Установите зависимости Python в папку с пакетом. Это необходимо для слоя лямбды
- Выполните команду Deploy SAM, чтобы начать развертывание компонентов без серверов после выполнения развертывания, конечная точка API будет отображаться на консоли выполнения рабочего процесса GitHub.
Маршрут 53 Изменения Как только оба развертывания будут сделаны, мне все равно придется разоблачить веб -сайт над моим пользовательским доменом. Чтобы разоблачить конечную точку CloudFront через пользовательский домен, я добавил две записи псевдонима в размещенной зоне Route 53 для моего пользовательского домена. Две записи должны охватывать две записи доменов: – Apex Domain – www sub domain Мне также пришлось предоставить сертификат в ACM, чтобы конечная точка веб -сайта можно было обслуживаться над HTTPS.
После того, как все эти изменения будут сделаны, нажав на мой сайт домен открывает веб -сайт резюме и показывает количество посетителей вверху. Если есть какие -либо проблемы с API, значок посетителя показывает ошибку, но остальная часть веб -страницы все еще нормально загружается.
Вывод
Мне очень понравилось работать над этим испытанием, так как я узнал несколько новых советов и хитростей, разработав для проекта. В этом посте я попытался документировать на очень высоком уровне о своем подходе и надеяться, что это поможет кому -то с их подходом к вызову. Для получения полной информации о проекте, пожалуйста, посетите код Repo на GitHub. Я также пишу свой собственный блог о облачных технологиях, и если я могу обратиться к каким -либо вопросам Здесь
Оригинал: “https://dev.to/amlana24/a-cloud-resume-built-with-react-and-deployed-to-aws-using-s3-and-lambda-2nc5”