Автоматизоване розгортання React-додатку на AWS Elastic Beanstalk за допомогою GitHub Actions: Налаштування CI/CD конвеєра - javascript.org.ua

Цей проєкт виконується на машині з версією Ubuntu 22.04, тому використовувані команди можуть відрізнятися для вашої операційної системи.

Крок 1: Клонуємо проєкт:

Клонуйте репозиторій GitHub на вашій локальній системі.

git clone https://github.com/sitchatt/AWS_Elastic_BeanStalk_On_EC2.git  
cd AWS_Elastic_BeanStalk_On_EC2/

Крок 2: Встановлення Docker і Docker-compose:

Виконайте наступні команди для встановлення Docker та Docker-compose.

#Оновлення системи  
sudo apt-get update  

#Встановлення Docker  
sudo apt install docker.io  
#Додавання поточного користувача до групи Docker  
sudo usermod -aG docker $USER  
#Перевірка встановлення  
docker --version  
#Встановлення Docker-compose  
sudo apt install docker-compose  
#Перевірка встановлення  
docker-compose --version

Крок 3: Створення багатоступеневого DockerFile:

Багатоступеневий Dockerfile дозволяє створювати більш ефективні та менші фінальні Docker-образи, використовуючи кілька етапів складання. Ця функція особливо корисна, коли у вас є складні вимоги до складання або залежності під час процесу розробки, але ви хочете отримати мінімалістичний виробничий образ.

DockerFile для нашого додатку:

FROM node:14-alpine as builder  
WORKDIR /app   
COPY package.json .   
RUN npm install   
COPY . .   
RUN npm run build  
FROM nginx   
EXPOSE 80   
COPY --from=builder /app/build /usr/share/nginx/html

Пояснення:

Етап складання (node:14-alpine):

FROM node:14-alpine as builder: Встановлює базовий образ для етапу складання.
WORKDIR /app: Встановлює робочу директорію всередині контейнера на /app.
COPY package.json .: Копіює файл package.json до робочої директорії.
RUN npm install: Встановлює залежності на основі файлу package.json.
COPY . .: Копіює решту коду додатка в контейнер.
RUN npm run build: Будує додаток.

Останній етап (nginx):

FROM nginx: Встановлює базовий образ для фінального етапу.
EXPOSE 80: Відкриває порт 80 (стандартний HTTP порт).
COPY --from=builder /app/build /usr/share/nginx/html: Копіює побудовані артефакти з етапу складання в образ Nginx.
Останній етап не потребує додаткових кроків, оскільки Nginx буде обслуговувати статичний контент з /usr/share/nginx/html.

Щоб побудувати Docker-образ, виконайте наступну команду:

docker build . -t

Крок 4: Налаштування AWS Elastic Beanstalk:

Amazon Elastic Beanstalk — це простий у використанні сервіс для розгортання та масштабування веб-додатків і служб, розроблених за допомогою Java, .NET, PHP, Node.js, Python, Ruby, Go та Docker на знайомих серверах, таких як Apache, Nginx, Passenger та IIS.

Перейдіть до AWS Elastic Beanstalk

Натисніть на Create application.

Крок 1

Виберіть веб-середовище та ім'я додатка.

Виберіть Docker як платформу для запуску вашого додатка.

Виберіть демонстраційний додаток.

Виберіть Single instance, free tier для Presents.

Крок 2

Налаштуйте доступ до служби. Створіть нову роль служби, нову назву ролі служби та пару ключів EC2.

Переконайтесь, що ваша роль IAM має наступні дозволи:

Крок 3:

Виберіть стандартний VPC, тобто.
172.31.0.0/16.

Налаштування екземпляра:

Активуйте свою публічну IP-адресу та перевірте всі підмережі екземпляра.

Крок 4:

Виберіть стандартну групу безпеки.

Крок 5:

Натисніть "Next" або змініть конфігурацію за вашим бажанням.

Крок 6

Натисніть "Review and submit". Створення займе від 5 до 15 хвилин.

Після створення вашого додатка, він надасть посилання на домен вашого додатка, з якого ви зможете отримати доступ до вашого додатка, яке виглядатиме так:

Крок 5: Налаштування CI/CD конвеєра за допомогою GitHub Actions

Створіть новий репозиторій на GitHub та завантажте ваш код веб-додатка:

Щоб створити CI/CD конвеєр у GitHub, натисніть на Actions -> set up a workflow yourself.

Ваш Main.yml:

name: CI/CD for day87  
on:  
 push:  
 branches:  
 - main  
jobs:  
 build-and-deploy:  
 runs-on: ubuntu-latest  
 steps:  
 - name: Checkout Repository  
 uses: actions/checkout@v1  
 - name: Configure AWS Credentials  
 uses: aws-actions/configure-aws-credentials@v1  
 with:  
 aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}  
 aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}  
 aws-region: us-east-1  
 - name: Deploy Static Site to S3 Bucket  
 run: aws s3 sync . s3://elasticbeanstalk-us-east-1-543991822877 --delete

Elastic Beanstalk створить для вас S3-кошик, куди ви можете завантажити ваш код, і Elastic Beanstalk розгорне ваш додаток.

Тепер, щоб створити секрети в GitHub, перейдіть на вкладку Settings репозиторію.