Зміст
- Опис проекту
- Практичний проект: Автоматизація розгортання React додатку на AWS Elastic Beanstalk
- Крок 1: Клонуємо вихідний код
- Крок 2: Налаштування Docker
- Крок 3: Створення багатоступеневого Dockerfile
- Крок 4: Створення Docker образу
- Крок 5: Запуск Docker контейнера
- Крок 6: Налаштування AWS Elastic Beanstalk
- Крок 7: Включення CI/CD за допомогою GitHub Actions
- Крок 8: Запуск GitHub Action CI/CD
- Крок 9: Перевірка результату
Ласкаво просимо до 87 дня виклику #90DaysOfDevOps. Сьогодні у нас новий проект, де ми автоматизуємо розгортання React додатку на AWS Elastic Beanstalk за допомогою GitHub Actions. Завдяки потужностям GitHub Actions, ми можемо безперешкодно інтегрувати безперервну інтеграцію та безперервне розгортання (CI/CD) у наш GitHub репозиторій, що робить процес розгортання ефективним і автоматизованим.
Опис проекту
У цьому проекті наша мета — розгорнути React додаток на AWS Elastic Beanstalk, повністю керованому сервісі, який спрощує розгортання, управління та масштабування додатків. Використовуючи GitHub Actions, ми можемо налаштувати pipeline для CI/CD, щоб автоматично будувати та розгортати React додаток на Elastic Beanstalk щоразу, коли є новий коміт або pull request у репозиторії GitHub.
Перед тим, як розпочати проект, ви можете ознайомитися з цим блогом, щоб краще зрозуміти, як працює процес розгортання за допомогою GitHub Actions та AWS Elastic Beanstalk.
Практичний проект: Автоматизація розгортання React додатку на AWS Elastic Beanstalk
Ласкаво просимо до цього практичного проекту, де ми разом автоматизуємо розгортання React додатку на AWS Elastic Beanstalk за допомогою Docker та GitHub Actions. Наприкінці цього проекту у вас буде повністю функціонуючий pipeline для розгортання вашого React додатку.
Крок 1: Клонуємо вихідний код
Якщо ви використовуєте машину з Ubuntu, Git ймовірно вже встановлений. Клонуйте репозиторій і перейдіть до директорії проекту.
git clone https://github.com/samsorrahman/AWS_Elastic_BeanStalk_On_EC2.git
cd AWS_Elastic_BeanStalk_On_EC2
Крок 2: Налаштування Docker
Після того, як ви клонували код, знайдіть shell-скрипт docker_install.sh, який встановить та активує Docker. Зробіть його виконуваним і запустіть скрипт для установки Docker.
chmod +x docker_install.sh
sh docker_install.sh
Крок 3: Створення багатоступеневого Dockerfile
Наш React додаток потребує Node.js для роботи та NGINX для обслуговування запитів після розгортання. Давайте створимо багатоступеневий Dockerfile, щоб задовольнити ці вимоги.
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
Крок 4: Створення Docker образу
Маючи Dockerfile, настав час створити Docker образ.
sudo docker build -t react-app-image .
Крок 5: Запуск Docker контейнера
Запустіть Docker контейнер з побудованим образом:
sudo docker run -d -p 80:80 react-app-image
Переконайтеся, що контейнер працює, за допомогою команди docker ps, і підтвердіть активність додатку, отримавши доступ до публічної IP-адреси EC2 на порту 80.
Крок 6: Налаштування AWS Elastic Beanstalk
Перейдіть до сервісу AWS Elastic Beanstalk та натисніть “Створити додаток”.
Надайте необхідні дані, зокрема ім'я додатку, виберіть платформу “Docker” та оберіть “Sample Code” як початкову точку.
Після натискання “Створити додаток” дочекайтесь, поки середовище буде налаштовано.
Щоб отримати доступ до вашого розгорнутого додатку, перейдіть до розділу “Domain” і скористайтесь наданим URL. Це посилання перенаправить вас на ваш живий React додаток, що працює на AWS Elastic Beanstalk.
Крок 7: Включення CI/CD за допомогою GitHub Actions
Ми будемо використовувати GitHub Actions для CI/CD. Знайдіть файл “deploy-react.yaml” і перемістіть його в директорію “.github/workflows”. Оновіть файл відповідними параметрами, такими як назва гілки, ім'я додатку, ім'я середовища, AWS доступний ключ, секретний ключ AWS і регіон.
name : Deploy react application in BeanStalk
on :
push:
branches:
- "main"
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout source code
uses: actions/checkout@v2
- name: Generate deployment package
run: zip -r deploy.zip . -x '*.git*'
- name: Deploy to EB
uses: einaregilsson/beanstalk-deploy@v21
with:
aws_access_key: ${{ secrets.AWS_ADMIN_ACCESS_KEY_ID }}
aws_secret_key: ${{ secrets.AWS_ADMIN_SECRET_ACCESS_KEY_ID }}
application_name: react-app
environment_name: React-app-env-2
version_label: ${{ github.sha }}
region: eu-west-2
deployment_package: deploy.zip
Крок 8: Запуск GitHub Action CI/CD
Виконайте push всіх кодів з папки “AWSElasticBeanStalkOnEC2” в гілку “main” вашого репозиторію на GitHub. GitHub Actions автоматично запустить процес CI/CD.
Крок 9: Перевірка результату
Перевірте посилання на Elastic Beanstalk, отримане раніше. Тепер тестовий додаток має бути замінений на наш React додаток, що підтверджує успішне розгортання.
Вітаємо з завершенням цього практичного проекту! 87-й день виклику #90DaysOfDevOps був присвячений автоматизації розгортання React додатку на AWS Elastic Beanstalk за допомогою GitHub Actions. Налаштувавши цей CI/CD pipeline, ви значно спростили процес розгортання, забезпечивши, щоб ваш додаток завжди був актуальним і готовим до використання вашими користувачами. Завтра ми перейдемо до нового захоплюючого проекту. Слідкуйте за новинами!
Сподіваюся, що ви дізналися щось корисне з цього блогу. Якщо це так, не забудьте підписатись і натискати кнопку аплодисментів 👏 нижче, щоб показати свою підтримку 😄. Підпишіться на мій блог, щоб не пропустити майбутні пости.
Якщо у вас є питання чи відгуки, не соромтесь залишити коментар нижче. Дякую за читання і бажаю чудового дня!
Зв'яжіться зі мною на LinkedIn
Зв'яжіться зі мною на GitHub
Перекладено з: #90DaysOfDevOps Challenge — Day 86— DevOps Project 8 — Automating React App Deployment on AWS Elastic Beanstalk with GitHub Actions