Розгортання Angular додатку в одному Docker образі на AWS Elastic Beanstalk за допомогою майстра

Вступ

Після багатьох годин фрустрації, я зміг розгорнути багатоконтейнерний репозиторій на AWS Elastic Beanstalk. Як вихідний код, так і Docker-образи знаходяться в Gitlab. Я хочу поділитися своїм досвідом, щоб інші з подібними потребами могли скористатися цим посібником. Можливо, я роблю деякі зайві кроки; ви можете звернути на це увагу в коментарях, і я буду вдячний.

Попередні вимоги

  • Обліковий запис AWS
  • Репозиторій Gitlab
  • Docker-образи, вже опубліковані в Container Registry Gitlab
  • Працюючий багатоконтейнерний додаток, що використовує docker-compose.yml

Кроки

  1. Створити додаток Elastic Beanstalk в AWS.
  2. Додати змінні середовища до додатка Elastic Beanstalk.
  3. Створити користувача IAM з власними політиками.
  4. Додати змінні середовища до CI/CD вашого репозиторію.
  5. Додати config.json до вашого S3 кошика AWS.
  6. Додати .gitlab-ci.yml до проєкту.
  7. Зробити пуш.

Створення додатка Elastic Beanstalk в AWS

  1. Перейдіть на AWS
  2. Знайдіть Elastic Beanstalk
  3. Натисніть кнопку "Create Application"
  4. Введіть назву вашого додатка
  5. Виберіть Docker як платформу і Sample application, як на зображенні нижче
  6. Готово

pic

pic

Додавання змінних середовища до додатка Elastic Beanstalk

Тепер, коли ми тут, давайте налаштуємо змінні середовища для нашого додатка, щоб вони були доступні під час розгортання.

pic

  1. Зліва ви повинні побачити ваш додаток {назва додатка}-env
  2. Натисніть на конфігурацію
  3. У категорії "Software" натисніть кнопку "Edit"
  4. Там ви побачите секцію "Environment properties"
  5. Додайте ваші змінні середовища
  6. Натисніть кнопку "Apply"
  7. Готово

Тепер сервіс перезапуститься, і все повинно працювати коректно.

Створення користувача IAM з власними політиками

Давайте створимо користувача IAM для Gitlab, який має доступ до AWS.

pic

  1. Знайдіть IAM і відкрийте IAM сервіс
  2. Зліва натисніть "Users"
  3. Додайте ім'я користувача, я назвав його "{app-name}-ci". Наприклад, "example-app-ci"
  4. Виберіть "Access Key — Programmatic access" і натискайте next
  5. Натискайте "Attach existing policies"
  6. Знайдіть "Beanstalk" і виберіть політику, яку вам потрібно. Для цього посібника ми вибираємо "AdministratorAccess-AWSElasticBeanstalk"

І натискайте next

  1. Пропустіть Tags, натиснувши "next"
  2. натискайте "create user" і збережіть access key та secret. Ми використовуватимемо їх на Gitlab.

Додавання inline політики до нашого користувача IAM

  1. У тому ж IAM сервісі натисніть на "Roles"
  2. Виберіть "aws-elasticbeanstalk-ec2-role"
  3. Додайте нову inline політику
  4. Додайте код нижче
  5. Натискайте next або перегляньте політику
  6. Збережіть
{  
 "Version": "2012-10-17",  
 "Statement": [  
 {  
 "Sid": "VisualEditor0",  
 "Effect": "Allow",  
 "Action": "s3:GetObject",  
 "Resource": "arn:aws:s3:::"  
 }  
 ]  
}

Тепер переходимо до Gitlab.

Додавання змінних середовища до CI/CD вашого репозиторію

  1. Перейдіть до вашого репозиторію в Gitlab
  2. Зліва натисніть settings -> Repository
  3. Розгорніть секцію “Deploy tokens”

Створіть новий deploy token з доступом "readrepository" та "readregistry". Цей токен ми збережемо в нашому S3 кошику. Коли ми створили додаток Elastic Beanstalk, AWS створив для нас S3 кошик.

  1. Збережіть облікові дані десь (ми використовуватимемо їх незабаром).
  2. Тепер давайте додамо змінні. Зліва натискаємо settings -> CI/CD
  3. Я додав наступні змінні:
    • AWSACCESSKEY_ID = (IAM користувач)
    • AWSDEFAULTREGION = (ваш регіон AWS)
    • AWSSECRETACCESS_KEY = (IAM секрет)
    • GITLABDEPLOYUSER
    • GITLABDEPLOYTOKEN
    • S3BUCKETNAME

Додавання файлу config.json до вашого AWS S3 кошика

Оскільки я опублікував свої Docker-образи в приватному реєстрі Gitlab, AWS не може їх отримати.

Створення середовища на Elastic Beanstalk

  1. Перейдіть на вкладку Environments і натисніть Create one now.

pic

Environments

  1. На наступному екрані, під Select environment tier, виберіть Web server environment. Потім натисніть кнопку Select.

pic

Choosing Environment tier

  1. Тепер потрібно заповнити форму, щоб продовжити.

3.a) У формі Environment information можна змінити Environment name або залишити його за замовчуванням. Для текстового поля Domain введіть бажане ім'я домену. Переконайтесь, що натиснули Check availability, щоб перевірити унікальність імені.

pic

Environment information

3.b) У формі Base configuration, для Platform, у випадаючому списку Preconfigured platform виберіть Docker. Потім, під Application code, виберіть Upload your code. Після цього натисніть кнопку Upload, щоб завантажити джерело пакету, створене в першій частині.

pic

Base configuration

3.c) Виберіть Local file, а потім натисніть кнопку Browse. Знайдіть і виберіть файл output.zip, який ви створили в першій частині. Потім натисніть завантажити.

pic

Upload the output.zip

3.d) Переконайтесь, що ваш пакет (output.zip) було завантажено, перевіривши ім’я версії, яке ви вказали під час завантаження. Як показано на зображенні, воно підкреслено жовтою лінією. Нарешті, натискайте кнопку Create environment.

pic

Creating the environment

  1. Зачекайте кілька хвилин, поки майстер AWS ELB завершить процес.

pic

AWS ELB CLI status screen

Нижче описані процеси, які виконує AWS ELB:

a) Розпаковка пакету.
b) Створення EC2 інстансу, який буде хостити Docker-образ.
c) Розгортання та запуск Docker-образу.
d) Налаштування параметрів проксі відповідно до Dockerrun.aws.json.

Якщо немає проблем, ви повинні побачити, що середовище було успішно запущено.

pic

Environment launched

  1. Через кілька секунд з'явиться панель управління.

pic

Dashboard

  1. Щоб перевірити результат, натисніть на URL у верхній частині.

pic

URL

Нижче — результат після натискання на URL.

pic

Angular Page

Вітаємо! Все зроблено. Ви успішно розгорнули Angular-додаток у Docker за допомогою AWS ELB.

Подяка:

@ Abdulrahman kreaeeh — за вказівки на граматичні помилки та пропозиції щодо покращень.

Перекладено з: Deploying an Angular app in a Single Docker image to AWS Elastic Beanstalk using wizard

Leave a Reply

Your email address will not be published. Required fields are marked *