Краткое руководство по ресурсам и настройкам Terraform, необходимым для развертывания статического веб-приложения.
Недавно мне нужно было настроить инфраструктуру для развертывания небольшого прогрессивного веб-приложения React (PWA) в облаке. По сути, это приложение было статическим сайтом без серверной части. Мне также нужно будет настроить инфраструктуру для этого проекта с помощью Terraform.
Amplify - это сервис AWS, который позволяет легко развертывать полнофункциональные приложения или статические сайты. Он позволяет вам либо подключаться к репозиторию, либо выполнять развертывание вручную, при этом вы можете либо указать его в корзине S3, либо загрузить zip-файл, содержащий ваш сайт. Еще одна полезная функция - автоматическая проверка пользовательского интерфейса развернутого приложения на нескольких распространенных устройствах, чтобы вы могли проверить правильность его рендеринга на экранах разных размеров. Есть много других замечательных функций, таких как мониторинг и автоматическое создание веток, о которых вы можете прочитать здесь.
Для целей этой статьи мы предположим, что у нас уже есть приложение React, которое мы хотим развернуть. Контент или код приложения не важны, поскольку мы сосредоточимся на настройке инфраструктуры, а не на разработке приложения. Мы будем использовать управляемые развертывания AWS Amplify, в которых мы подключаем репозиторий CodeCommit к Amplify, чтобы при отправке изменений в наш репозиторий наше приложение автоматически развертывало изменения.
Мы также будем использовать Terraform для настройки нашей инфраструктуры AWS. Как правило, рекомендуется настроить инфраструктуру с помощью кода, поскольку он позволяет гарантировать, что каждый раз, когда вы развертываете среду, она будет в точности такой же, как и в предыдущий раз. Инфраструктура как код также позволяет сохранить вашу архитектуру в системе контроля версий и упрощает проверку.
Я также предполагаю, что вам удалось настроить Terraform и вы можете развернуть ресурсы в своей учетной записи AWS, поскольку я сосредоточусь на конкретном коде terraform, необходимом для этого проекта.
Настройка репозитория CodeCommit
Первое, что нам нужно сделать, это настроить репозиторий CodeCommit. Для этого нам нужно определить следующий ресурс.
После того, как вы добавили этот ресурс, вы можете продолжить и применить эти изменения, чтобы репозиторий был создан в вашей учетной записи AWS, и добавить в него свой код. Теперь мы готовы перейти к самому интересному.
Создание служебной роли
Следующее, что нам нужно сделать, очень важно. Нам необходимо настроить роль IAM, которая будет использоваться в качестве роли службы в проекте Amplify, что позволит ему подключиться к CodeCommit для извлечения кода. Из документации AWS неясно, нужна ли вам роль службы для статического сайта. Кажется, это намекает на тот факт, что вам нужен только один, если у вас есть серверные службы, с которыми ваше приложение должно взаимодействовать. Однако, если вы создаете проект вручную в консоли Amplify и пытаетесь подключить его к CodeCommit, вам нужно будет указать роль службы. Чтобы настроить роль IAM, добавьте следующий код.
Вторая часть создает роль IAM, которая ссылается на вышеуказанный документ политики и предоставляет доступ только для чтения для указанной службы к CodeCommit. Как правило, лучше всего всегда предоставлять наименьшие привилегии, необходимые для достижения ваших целей.
Создание проекта Amplify
Теперь мы можем настроить наш ресурс проекта Amplify. Для этого нам нужно указать несколько вещей:
- Название проекта - название проекта, которое будет отображаться в консоли Amplify.
- Репозиторий - ссылка на репозиторий CodeCommit, созданный выше.
- Роль службы IAM - как упоминалось выше, чтобы позволить Amplify взаимодействовать с CodeCommit.
- Включить автоматическую сборку ветки - нам это нужно, чтобы при внесении изменений в наш репозиторий проект был повторно развернут.
- Buildspec - это встроенный файл (может быть внешним файлом), в котором указывается, как создавать ваше приложение. Обратите внимание, что в спецификации сборки я использую
npm run build, поскольку это приложение React. Я также провожу тесты пользовательского интерфейса в рамках этой сборки.
См. Код ниже:
Создание ветки разработки
Последний кусок головоломки - нам нужно связать наше приложение Amplify с определенной веткой в нашем репозитории CodeCommit. Обычно команда хочет иметь develop ветку для работы и тестирования, а затем оставить master в качестве производственной ветки. В этом смысле Amplify великолепен, поскольку позволяет сопоставлять различные экземпляры среды нашего приложения с конкретными ветвями. Таким образом, изменения, переданные, например, в ветку develop, не повлияют на производство в ветке master.
Итак, чтобы добавить ветки, добавьте следующее:
Вот и все! Если вы примените эти изменения, вы настроите полностью автоматизированное развертывание приложения AWS Amplify со всей вашей инфраструктурой, аккуратно указанной в Terraform.
В следующей статье я расскажу о настройке конвейера Jenkins для синхронизации репозитория Bitbucket с CodeCommit с помощью веб-перехватчика, который запускает задание Push to the репозиторий.
Спасибо за прочтение! :)
использованная литература
Больше контента на plainenglish.io
