Як людина, що вивчає веб-розробку та хмарні технології, я вирішив спробувати розгорнути додаток 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, сайт оновлюється автоматично.
Скріншоти
Створення фронтенд-проєкту на React
Налаштування середовища AWS Amplify
Налаштування AWS Amplify за допомогою GitHub
Крок перевірки в AWS Amplify
Результат з Amplify
Я робив повторні спроби розгортання через помилку в коді.
Він показує 3 етапи:
- Розгорнуто
- Ще розгортається
- Розгортання в черзі.
Момент розгортання
Кінцевий результат
📂 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