Деплой Next.js додатка на AWS Elastic Beanstalk за допомогою GitLab CI/CD - javascript.org.ua

Позвольте представитися: я є технічним лідером (TechLead) в ІТ-компанії. Нещодавно мені було поставлено завдання — налаштувати автоматичний деплой проекту, розробленого на Next.js, з використанням GitLab CI/CD на платформу AWS Elastic Beanstalk. Це завдання стало для мене новим викликом, оскільки я виявив, що в Інтернеті мало інформації з цієї теми. Тому в цій статті я радо надам вам детальне керівництво про те, як успішно реалізувати автоматичний деплой ваших Next.js проектів за допомогою GitLab CI/CD та AWS Elastic Beanstalk.

1— AWS

Ми плануємо розгорнути наше застосування на платформі AWS Elastic Beanstalk. Для цього ми також будемо використовувати службу AWS S3, де будуть зберігатися zip-архіви з нашим застосунком. Кожен із цих архівів є окремим релізом.

Невелика інформація про сервіси AWS:

AWS (Amazon Web Services) — це провідна хмарна платформа, що надається компанією Amazon. Вона пропонує широкий спектр інфраструктурних ресурсів та послуг для хмарного хостингу, зберігання даних, обчислень, машинного навчання та багато іншого.

AWS Elastic Beanstalk — це керований сервіс розгортання та масштабування веб-застосунків. Він спрощує процес розгортання, управління та масштабування застосунків на платформі AWS. Elastic Beanstalk автоматизує процеси налаштування середовища, запуску застосунків, масштабування ресурсів та забезпечення високої доступності.

AWS S3 (Simple Storage Service) — це високошвидкісне хмарне сховище даних. Воно забезпечує простий інтерфейс для зберігання та отримання будь-якої кількості даних у будь-який час і з будь-якого місця в Інтернеті. S3 забезпечує високу відмовостійкість, надійність і безпеку зберігання даних, а також інтеграцію з іншими сервісами AWS.

Налаштування AWS Elastic Beanstalk

Створення застосунку (application):

Увійдіть у консоль AWS і відкрийте сервіс Elastic Beanstalk.
Натисніть кнопку “Створити новий застосунок” (Create application).
Введіть ім'я вашого застосунку і, при необхідності, додайте опис.

Створення застосунку в AWS Elastic Beanstalk

Створення середовища (Environments):

У інтерфейсі Elastic Beanstalk виберіть застосунок, для якого ви хочете створити нове середовище.
На сторінці застосунку знайдіть розділ “Окруження” (Environments) і натисніть кнопку “Створити нове середовище” (Create new environment).
Виберіть тип середовища Web server environment.
Введіть ім'я середовища (наприклад: mydomain-dev-env) і виберіть базову конфігурацію, включаючи платформу (в нашому випадку Node.js), тип сервера та інші параметри.
Налаштуйте додаткові параметри, такі як змінні середовища, масштабування, мережа та ресурси — за потреби.
Перевірте всі введені дані і натисніть кнопку “Створити середовище”.
Дочекайтеся, поки середовище буде успішно створено та запущено. Це може зайняти кілька хвилин.

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

Налаштування AWS S3

Створення та налаштування Bucket:

Виберіть сервіс “S3” зі списку сервісів AWS.
На головній сторінці S3 натисніть кнопку “Створити бакет” (Create bucket).
Введіть унікальне ім'я для бакета і виберіть регіон розміщення.
Налаштуйте додаткові параметри, такі як версіонування, журналювання, шифрування і права доступу, якщо це потрібно. У нашому випадку ми залишимо параметри за замовчуванням.
Перевірте вибрані параметри і натисніть кнопку “Створити бакет” (Create bucket).

Налаштування AWS IAM

Інструкція по створенню користувача:

Виберіть сервіс “IAM” зі списку сервісів AWS.
У розділі “Користувачі” (Users) натисніть “Додати користувача” (Add user).
Введіть ім'я користувача і виберіть “Доступ до програмних інтерфейсів” (Programmatic access).
4.
В розділі “Вибір типу доступу” (Set permissions) виберіть “Прикріпити існуючі політики безпосередньо” (Attach existing policies directly).
Введіть “AdministratorAccess-AWSElasticBeanstalk” і виберіть політику з цією назвою.
Введіть “AmazonS3FullAccess” і виберіть політику з цією назвою.
Натисніть “Створити користувача” (Create user).
Збережіть згенеровані “Ключ доступу” (Access key) і “Секретний ключ” (Secret access key).

*Політики (права) для користувача можуть бути на ваш розсуд.

2 — GitLab

Для початку потрібно внести зміни в налаштування GitLab CI/CD, додавши необхідні змінні. Для цього слід перейти в розділ налаштувань вашого проекту (Settings), вибрати опцію CI/CD із випадаючого списку, а потім перейти до розділу змінних (Variables). У цьому прикладі розглянемо додавання змінних з атрибутами Masked, які застосовуються лише до змінних AWSACCESSKEY_ID та AWSSECRETACCESS_KEY. Ви також можете вибрати відповідні атрибути залежно від ваших потреб.

Додайте наступні змінні:

AWS_ACCESS_KEY_ID=  
AWS_SECRET_ACCESS_KEY=  
AWS_PROFILE=  
AWS_PLATFORM=  
AWS_REGION=  
AWS_APP_NAME=  
AWS_ENVIRONMENT_NAME=  
AWS_S3_BUCKET=

AWSACCESSKEY_ID: Ідентифікатор доступу AWS.
AWSSECRETACCESS_KEY: Секретний ключ доступу AWS.
AWS_PROFILE: Ім'я профілю AWS для взаємодії з обліковим записом AWS.
AWS_PLATFORM: Платформа, на якій розгортається застосунок (наприклад, Node.js).
AWS_REGION: Регіон AWS для розгортання застосунку.
AWSAPPNAME: Ім'я застосунку для розгортання на Elastic Beanstalk.
AWSENVIRONMENTNAME: Ім'я середовища (environment) на Elastic Beanstalk.
AWSS3BUCKET: Ім'я відра (bucket) AWS S3 для зберігання статичних файлів.

Після завершення вищезазначених дій ваш результат має відповідати зображенню нижче:

GitLab — Settings — CI/CD — Variables

3 — .gitlab-ci.yml

Файл .gitlab-ci.yml є конфігураційним файлом, що використовується в системі керування версіями GitLab для налаштування процесів безперервної інтеграції та безперервної доставки (CI/CD) у вашому проекті. Він визначає, які кроки та команди повинні виконуватися автоматично при кожній зміні в вашому репозиторії.

У моєму випадку я хочу, щоб операції зборки (build) та розгортання (deploy) запускалися тільки при пуші змін у гілку staging.

У кореневому каталозі вашого проекту створіть файл .gitlab-ci.yml. У створений файл додайте наступні команди:

stages:  
 - build  
 - deploy  

build:  
 image: node:16  
 stage: build  
 script:  
 - npm install  
 - npm run build  
 artifacts:  
 paths:  
 - .next/  
 only:  
 - staging  

deploy-staging:  
 image: python:latest  
 stage: deploy  
 before_script:  
 - apt-get update -qq && apt-get install -y -qq zip  
 - export CI_JOB_TIMESTAMP=$(date --utc --iso-8601=seconds)  
 - export CI_VERSION_TAG=${CI_COMMIT_SHA}_${CI_JOB_TIMESTAMP}  
 - pip3 install awscli --upgrade --user  
 - AWS_CONFIG_FILE=~/.aws/config  
 - mkdir ~/.aws  
 - touch $AWS_CONFIG_FILE  
 - chmod 600 $AWS_CONFIG_FILE  
 - echo "[profile ${AWS_PROFILE}]" > $AWS_CONFIG_FILE  
 - echo "aws_access_key_id=${AWS_ACCESS_KEY_ID}" >> $AWS_CONFIG_FILE  
 - echo "aws_secret_access_key=${AWS_SECRET_ACCESS_KEY}" >> $AWS_CONFIG_FILE  
 script:  
 - zip -r ${CI_VERSION_TAG}.zip .

-x "node_modules/*"  
 - ~/.local/bin/aws s3 cp ${CI_VERSION_TAG}.zip s3://${AWS_S3_BUCKET}/${CI_VERSION_TAG}.zip --profile ${AWS_PROFILE}  
 - ~/.local/bin/aws elasticbeanstalk create-application-version --application-name ${AWS_APP_NAME} --version-label ${CI_VERSION_TAG} --region ${AWS_REGION} --source-bundle S3Bucket="${AWS_S3_BUCKET}",S3Key="${CI_VERSION_TAG}.zip" --profile ${AWS_PROFILE}  
 - ~/.local/bin/aws elasticbeanstalk update-environment --environment-name ${AWS_ENVIRONMENT_NAME} --version-label ${CI_VERSION_TAG} --region ${AWS_REGION} --profile ${AWS_PROFILE}  
 only:  
 - staging

У цьому прикладі представлено конфігураційний файл для системи безперервної інтеграції/безперервної доставки (CI/CD) GitLab CI/CD. Давайте розберемо, що робить кожна команда в цьому файлі (ми не будемо розглядати примітивні команди типу npm run build):

artifacts
Визначає артефакти, які будуть збережені після успішного виконання етапу. paths:— .next/ вказує на папку з нашою збіркою, якщо цього не зробити, то папка .next зникне при переході на наступний етап, оскільки вона додана в .gitignore.
apt-get update -qq && apt-get install -y -qq zip
Оновлює всі пакети та встановлює утиліту zip.
export CIJOBTIMESTAMP=$(date — utc — iso-8601=seconds)
Встановлює змінну середовища CI_JOB_TIMESTAMP в значення поточної дати та часу в форматі ISO 8601.
export CIVERSIONTAG=${CICOMMITSHA}${CIJOB_TIMESTAMP}
Встановлює змінну середовища CI_VERSION_TAG в значення, що складається з комбінації значень інших змінних середовища CI_COMMIT_SHA та CI_JOB_TIMESTAMP.
pip3 install awscli — upgrade — user
Використовується для встановлення інструменту командного рядка AWS (AWS CLI) за допомогою менеджера пакетів pip3 в режимі користувацької установки.
AWSCONFIGFILE=~/.aws/config
Використовується для визначення змінної середовища AWS_CONFIG_FILE, яка вказує на шлях до файлу конфігурації AWS CLI.
mkdir ~/.aws
Використовується для створення директорії .aws у домашній директорії поточного користувача.
touch $AWSCONFIGFILE
Використовується для створення порожнього файлу з ім'ям, вказаним у змінній середовища AWS_CONFIG_FILE.
chmod 600 $AWSCONFIGFILE
Використовується для зміни прав доступу до файлу, вказаного в змінній середовища AWS_CONFIG_FILE, на значення 600.
echo “[profile ${AWSPROFILE}]” > $AWSCONFIG_FILE
Використовується для запису рядка в файл конфігурації AWS CLI.
У цьому випадку, [profile ${AWS_PROFILE}] є рядком, який буде записаний у файл конфігурації. ${AWS_PROFILE} представляє змінну середовища, що містить ім'я профілю AWS.
echo “awsaccesskeyid=${AWSACCESSKEYID}” >> $AWSCONFIGFILE
Використовується для додавання рядка в файл конфігурації AWS CLI. У цьому випадку, "aws_access_key_id=${AWS_ACCESS_KEY_ID}" є рядком, який буде доданий до файлу конфігурації. ${AWS_ACCESS_KEY_ID} представляє змінну середовища, що містить ідентифікатор ключа доступу AWS.
echo “awssecretaccesskey=${AWSSECRETACCESSKEY}” >> $AWSCONFIGFILE
Використовується для додавання рядка в файл конфігурації AWS CLI. У цьому випадку, "aws_secret_access_key=${AWS_SECRET_ACCESS_KEY}" є рядком, який буде доданий до файлу конфігурації. ${AWS_SECRET_ACCESS_KEY} представляє змінну середовища, що містить секретний ключ доступу AWS.
zip -r ${CIVERSIONTAG}.zip . -x “node_modules/*”
Використовується для створення архіву ZIP, який міститиме всі файли та папки в поточній директорії, за винятком папки node_modules. Також за бажанням можна виключити інші файли або папки.
14.
~/.local/bin/aws s3 cp ${CIVERSIONTAG}.zip s3://${AWSS3BUCKET}/${CIVERSIONTAG}.zip --profile ${AWS_PROFILE}
Використовується для копіювання файлу ${CI_VERSION_TAG}.zip до сховища Amazon S3 за допомогою інструмента AWS CLI та вказаного профілю AWS.
${CI_VERSION_TAG}.zip - це ім’я локального файлу, який буде скопійовано до сховища S3. Значення ${CI_VERSION_TAG} буде підставлено з відповідної змінної середовища.
s3://${AWS_S3_BUCKET}/${CI_VERSION_TAG}.zip - це шлях до цільового файлу в сховищі S3, куди буде скопійовано локальний файл. Значення ${AWS_S3_BUCKET} та ${CI_VERSION_TAG} будуть підставлені з відповідних змінних середовища.
--profile ${AWS_PROFILE} - це опція, яка вказує AWS CLI використовувати вказаний профіль AWS під час виконання операції. Значення ${AWS_PROFILE} буде підставлено з відповідної змінної середовища.
~/.local/bin/aws elasticbeanstalk create-application-version — application-name ${AWSAPPNAME} — version-label ${CIVERSIONTAG} — region ${AWS_REGION}
Використовується для створення версії додатку в сервісі AWS Elastic Beanstalk за допомогою інструмента AWS CLI та вказаних параметрів, включаючи джерело архіву з Amazon S3.
elasticbeanstalk - це команда AWS CLI для роботи з сервісом AWS Elastic Beanstalk.
create-application-version - це підкоманда AWS CLI, що використовується для створення нової версії додатку в Elastic Beanstalk.
--application-name ${AWS_APP_NAME} - це опція, яка вказує ім’я додатку, для якого буде створена нова версія. Значення ${AWS_APP_NAME} буде підставлене з відповідної змінної середовища.
--version-label ${CI_VERSION_TAG} - це опція, що задає мітку версії для нової версії додатку. Значення ${CI_VERSION_TAG} буде підставлене з відповідної змінної середовища.
--region ${AWS_REGION} - це опція, яка вказує регіон AWS, де буде створена нова версія додатку. Значення ${AWS_REGION} буде підставлене з відповідної змінної середовища.
--source-bundle S3Bucket="${AWS_S3_BUCKET}",S3Key="${CI_VERSION_TAG}.zip" - це опція, що вказує джерело архіву версії додатку. Значення ${AWS_S3_BUCKET} та ${CI_VERSION_TAG} будуть підставлені з відповідних змінних середовища. Це вказує, що архів знаходиться в Amazon S3 в зазначеному бакеті (S3Bucket) і з вказаним ключем (S3Key).
--profile ${AWS_PROFILE} - це опція, яка вказує AWS CLI використовувати вказаний профіль AWS під час виконання операції. Значення ${AWS_PROFILE} буде підставлене з відповідної змінної середовища.
~/.local/bin/aws elasticbeanstalk update-environment — environment-name ${AWSENVIRONMENTNAME} — version-label ${CIVERSIONTAG} — region ${AWSREGION} — profile ${AWSPROFILE}
Використовується для оновлення середовища виконання в сервісі AWS Elastic Beanstalk за допомогою інструмента AWS CLI та вказаних параметрів.
elasticbeanstalk - це команда AWS CLI для роботи з сервісом AWS Elastic Beanstalk.

4 — Перевірка

Для перевірки авто-деплою потрібно внести зміни до проекту, зробити коміт і здійснити злиття з вашими змінами в гілку “staging”. Після цього ви повинні побачити в розділі GitLab -> Project -> Pipelines новий запущений конвеєр (pipeline). По завершенню успішного проходження всіх етапів (stages), проект повинен бути автоматично розгорнутий в інфраструктурі AWS Elastic Beanstalk. Якщо один з етапів не буде пройдений, рекомендується перевірити всі налаштування, описані вище.

GitLab -> Project -> Pipelines. Приклад успішного проходження pipeline

Завершення і подяка

Дякую за вашу увагу. Сподіваюся, що ця стаття про налаштування авто-деплою проекту Next.js на AWS Elastic Beanstalk з використанням GitLab CI/CD була корисною для вас. Я намагався надати максимально детальну інформацію на цю тему.
Якщо ви зіткнулися з будь-якими труднощами, проблемами або виявили неточності в статті, будь ласка, залиште свої коментарі нижче. Ваша думка та зворотний зв'язок важливі для мене. Буду радий почути ваші коментарі та відгуки про цю статтю. Дякую!

Перекладено з: Деплой Next.js приложения на AWS Elastic Beanstalk с помощью GitLab CI/CD