Пошаговый пример, демонстрирующий, как развернуть статический одностраничный веб-сайт на AWS S3.
Моя компания создает индивидуальные веб-сайты для малых предприятий, которым просто необходимо простое присутствие в Интернете. Мы создаем эти одностраничные сайты с использованием HTML и JavaScript и развертываем их с GitHub на AWS S3 с помощью AWS CodePipeline, где они затем распространяются AWS CloudFront для всеобщего обозрения.
Когда мы делаем обновление для клиента, мы извлекаем последний код, выполняем обновление и отправляем запрос на вытягивание GitHub для слияния кода с основной веткой. В результате слияния AWS CodePipeline автоматически извлекает код и помещает его в корзину AWS S3.
Вот как это настроить.
Предположения
В этой статье я предполагаю, что вы знаете, как создать веб-страницу и проверить ее в основной ветке на GitHub. Будет полезно создать свой первоначальный веб-сайт и довести его до того момента, когда вы будете готовы к развертыванию на S3.
Создание сегментов AWS S3
Для вашего первого конвейера вам понадобятся две корзины AWS S3. Первым будет сегмент, содержащий код веб-сайта, который вы собираетесь развернуть по всему миру. Этот сегмент не требует каких-либо специальных разрешений для развертывания в нем CodePipeline.
В этом примере я создам корзину S3 с именем customer-website-sample и оставлю все разрешения по умолчанию:
- Блокировать весь публичный доступ
- Управление версиями сегмента отключено
- Без тегов
- Шифрование по умолчанию отключено
- Нет дополнительных настроек
Не стесняйтесь изменять эти настройки в соответствии с вашей средой.
Вторая корзина S3 предназначена для хранения «артефактов», которые будут созданы AWS при построении конвейера развертывания, используемого CodePipeline. Вы будете ссылаться на этот сегмент позже при создании конвейера, и вы можете использовать его для этого и всех будущих конвейеров.
AWS S3 требует глобально уникальных имен для сегментов, поэтому мы назовем этот сегмент another-codepipeline-artifacts (название моей компании-разработчика программного обеспечения - Другой) и, как и предыдущий сегмент, мы Я оставлю все настройки по умолчанию такими, какие они есть.
Вот и все! Переходим к созданию конвейера.
Создание конвейера
Войдите в свою учетную запись AWS, а затем перейдите в сервис AWS CodePipeline.
Нажмите оранжевую кнопку Создать конвейер в правом верхнем углу. Откроется диалоговое окно Выбор настроек конвейера, показанное ниже.
В разделе Название конвейера мы назовем этот конвейер Sample-Customer-Website. Имя не может содержать пробелов или специальных символов.
AWS потребуется роль службы с соответствующими разрешениями для взаимодействия с другими службами AWS, такими как S3. Хотя вы можете создавать уникальные роли для каждого создаваемого конвейера, для первого конвейера я рекомендую выбрать Новая роль службы и установить флажок, чтобы позволить AWS CodePipeline создать его за вас. Если вы создаете и развертываете сайты того же типа в AWS S3, скорее всего, вы сможете повторно использовать ту же роль службы для будущих конвейеров.
При желании вы также можете принять имя роли по умолчанию, предложенное AWS. В этом примере я меняю имя роли на AWS-CodePipeline-Service-Role. В следующий раз, когда я создам конвейер, я выберу параметр существующая роль службы и выберу эту из списка.
Пока не нажимайте оранжевую кнопку Далее!
Разверните раздел Дополнительные настройки на этом экране.
В разделе Хранилище артефактов выберите переключатель Пользовательское местоположение, а затем выберите корзину AWS S3, созданную вами на предыдущем шаге для всего хранилища артефактов CodePipeline. В этом примере это сегмент another-codepipeline-artifacts.
Теперь нажмите оранжевую кнопку Далее. Откроется следующий экран настройки - диалоговое окно Добавить исходный этап. Здесь вы подключитесь к своему репозиторию GitHub.
В раскрывающемся списке Поставщик источника выберите GitHub (Version 2) (дополнительные сведения о функциях и различиях между вариантами версии 1 и версии 2 можно найти в документации AWS, перейдя по ссылке Подробнее в информационное сообщение).
Это открывает остальную часть экрана для всех необходимых параметров для подключения к вашей учетной записи GitHub.
Если это ваше первое подключение CodePipeline к GitHub, нажмите кнопку Подключиться к GitHub справа. Откроется новое окно Инструменты разработчика AWS, в котором вы создадите новое соединение. Если вы еще не вошли в GitHub, вам будет предложено войти.
В разделе Имя подключения дайте новому подключению уникальное имя. В данном случае я называю свою Another GitHub Connection, чтобы создать соединение с моей организацией GitHub для Другой.
Затем нажмите кнопку Установить новое приложение. Откроется окно Коннектор AWS для GitHub, в котором можно выбрать соответствующую учетную запись GitHub или организацию.
В моем примере я выбираю организацию anotherllc. Это приведет вас к экрану, где вы выберете настройки доступа к репозиторию для AWS.
Поскольку я собираюсь использовать этот коннектор для всех будущих подключений AWS CodePipeline, я собираюсь предоставить доступ к всем репозиториям и нажать зеленую кнопку Сохранить.
Это вернет меня в окно Инструменты разработчика AWS, где теперь мы видим уникальный идентификатор приложения, присвоенный AWS в селекторе GitHub Apps.
Чтобы продолжить, нажмите оранжевую кнопку Подключиться. Это вернет вас обратно к настройке AWS CodePipeline, и вы должны увидеть новое соединение, заполненное в селекторе Соединение, и сообщение об успешном завершении, говорящее о том, что ваше соединение GitHub готово к использованию!
Теперь в селекторе Имя репозитория выберите репозиторий из списка, который содержит код веб-сайта, который вы хотите развернуть.
В селекторе Имя ветки выберите ветку, которую вы хотите развернуть. В моем примере я выбрал ветку main.
Наконец, в разделе Параметры обнаружения изменений убедитесь, что установлен флажок Запускать конвейер при изменении исходного кода. Это включает веб-перехватчик, который отслеживает изменения в ветке GitHub и запускает ваш конвейер. В моем примере он будет запускаться автоматически, когда я объединю запрос на перенос в ветку main.
Для Формат артефакта вывода оставьте выбранным CodePipeline по умолчанию.
Нажмите оранжевую кнопку Далее. Вы перейдете к следующему шагу - экрану Добавить этап сборки.
Поскольку этот пример представляет собой простую веб-страницу, не требующую компиляции или особых соображений по развертыванию, мы можем просто нажать кнопку Пропустить этап сборки. Затем вас спросят: «Вы уверены?» и вам будет предложено подтвердить ваш выбор. В диалоговом окне нажмите оранжевую кнопку Пропустить.
Это подводит нас к последнему экрану конфигурации Добавить этап развертывания, где мы выбираем, где CodePipeline должен развертывать ваш код.
В селекторе Развернуть поставщика выберите Amazon S3. Это заполнит экран настройками, необходимыми для подключения CodePipeline к корзине AWS S3, которую мы создали для нашего сайта в первом разделе этой статьи.
При необходимости выберите соответствующий регион AWS и в селекторе Bucket выберите корзину AWS S3, созданную на предыдущем шаге. В этом примере это созданная мной корзина customer-website-sample.
Затем установите флажок Извлечь файл перед развертыванием.
Это скроет поле Ключ объекта S3 и отобразит необязательное поле Путь развертывания. Вы можете использовать параметр Путь развертывания, если развертываете сайты в определенную папку в корзине S3. Но в этом случае сегмент S3 предназначен для этого сайта, поэтому его можно оставить пустым.
Нажмите оранжевую кнопку Далее. Это приведет вас к последнему шагу, на котором вы можете прокрутить вниз и просмотреть все параметры конфигурации для этого конвейера.
Если вас все устраивает, прокрутите вниз и нажмите оранжевую кнопку Создать конвейер внизу экрана.
Это сохранит все ваши настройки и создаст AWS CodePipeline. Затем он запустит ваше первое развертывание, извлечет последний код из указанной вами ветки репозитория GitHub и развернет его в вашей корзине AWS S3.
Вы сможете наблюдать, как задание CodePipeline работает на каждом этапе. По мере завершения каждого из них он будет отмечать его зеленым индикатором успеха. После завершения работы с разделом Развертывание ваш код будет найден в вашей корзине AWS S3!
Если мы вернемся к корзине S3, которую мы создали ранее, мы увидим, что все папки и файлы, созданные в этом проекте веб-сайта, теперь там. Если к этому сегменту подключен AWS CloudFront, процесс развертывания через CloudFront начнется автоматически, и вы должны увидеть обновления веб-сайта в своем браузере в течение нескольких минут, если не почти сразу.
Вот и все! Теперь вы создали простую непрерывную интеграцию и развертывание в S3 с помощью AWS CodePipeline и GitHub.
Если вы нашли эту статью полезной, обязательно ознакомьтесь с другими моими статьями, в которых даются советы по настройке вашей среды разработки, а также некоторые примеры кода для ваших проектов.
