Розгортання React додатку за допомогою AWS Amplify та GitHub — посібник для початківців

pic

Як людина, що вивчає веб-розробку та хмарні технології, я вирішив спробувати розгорнути додаток React за допомогою AWS Amplify. Цей процес включав створення тестового проєкту за допомогою React.js, завантаження його на GitHub та розгортання в хмарі через AWS Amplify Hosting.

Хоча це був тестовий проєкт, я отримав багато цінних знань про хмарне розгортання, CI/CD та ефективне використання Amplify. Сподіваюся, цей посібник допоможе вам, якщо ви початківець, як і я!

Інструменти та технології 🛠

React.js (create-react-app)

AWS Amplify Hosting

GitHub (для контролю версій)

AWS Console

CI/CD pipeline через інтеграцію Amplify + GitHub️

Покроковий процес

Створення React додатку

Для початку я використав команду для створення базового додатку React:

npx create-react-app my-test-app
cd my-test-app
npm start

Це дало мені простий шаблон для фронтенду.

Пуш на GitHub

Після налаштування проєкту локально я ініціалізував репозиторій Git і відправив його на GitHub:

git init
git remote add origin https://github.com/username/my-test-app.git
git add .
git commit -m "Initial commit"
git push -u origin main

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

  • Увійшов до AWS Amplify Console.
  • Натиснув “Host a Web App” і вибрав GitHub як джерело репозиторію.
  • Авторизував Amplify для доступу до мого репозиторію на GitHub.
  • Вибрав свій репозиторій та гілку.
  • Перевірив і підтвердив налаштування збірки.

Amplify автоматично визначив, що це додаток React, і створив файл amplify.yml.

Автоматичне розгортання за допомогою CI/CD

Після налаштування AWS Amplify зробив все автоматично:

  • Встановив залежності
  • Побудував додаток React
  • Розгорнув його на захищеному URL
  • Налаштував pipeline CI/CD

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

Скріншоти

pic

Створення фронтенд-проєкту на React

pic

Налаштування середовища AWS Amplify

pic

Налаштування AWS Amplify за допомогою GitHub

pic

Крок перевірки в AWS Amplify

pic

Результат з Amplify

Я робив повторні спроби розгортання через помилку в коді.

Він показує 3 етапи:

  1. Розгорнуто
  2. Ще розгортається
  3. Розгортання в черзі.

pic

Момент розгортання

pic

Кінцевий результат

📂 GitHub репозиторій: https://github.com/dtdrupasinghe/notesapp.git

Чому це важливо

  • Як працює хостинг в AWS Amplify
  • Інтеграція CI/CD через GitHub
  • Простота безсерверних розгортань
  • Керування змінами додатка через Git push

Цей тестовий проєкт став чудовим способом ознайомитися з сучасними робочими процесами розгортання. Я в захваті від того, як розвиваються мої навички в створенні повноцінних додатків та продовжую мандрівку в хмарі.

Останні думки

Якщо ви новачок у хмарному розгортанні і шукаєте щось доступне для початківців, AWS Amplify — це чудовий вибір. Це швидко, масштабовано і добре інтегрується з GitHub.

Дякую за прочитане! Якщо у вас є питання або пропозиції, не соромтеся залишити коментар нижче або зв'язатися зі мною на LinkedIn.

AWS #AWSAmplify #ReactJS #GitHub #CI_CD #CloudDeployment #FrontendDev #WebDevelopment #BeginnerGuide #FullStackJourney

Перекладено з: Deploying a React App Using AWS Amplify and GitHub — A Beginner’s Guide