У цьому блозі ми побачимо, як легко налаштувати повноцінний CI-CD пайплайн для React додатка з автоматичним тестуванням і деплоєм. Для цього ми використовуватимемо такі сервіси, як Node, Docker, GitHub, Travis-CI та AWS Elastic Beanstalk.
Ми почнемо з Dockerfile для написання коду додатку. Використаємо два Dockerfile: один для основного додатку, інший — для тестування основного додатку.
Налаштування середовища:
Тут я використовую систему на базі Ubuntu для створення React додатку.
# lsb_release -a
Встановлення NodeJS:
По-перше, нам потрібно встановити node, оскільки команда, яку ми будемо використовувати, потребує його. Я скористаюсь цим блогом Digital Ocean для встановлення node.
Ви можете використовувати будь-який метод; я оберу варіант 3.
# node -v
Пам'ятайте, потрібно встановити Node 14 або новіший.
Створення зразка ReactJS додатку:
Після завершення встановлення, ми можемо виконати команду npx, щоб згенерувати наш зразок React додатку.
# npx create-react-app frontend
Пам'ятайте, це займе деякий час, і коли все буде готово, з'явиться екран, схожий на наведений нижче.
Тестування ReactJS додатку:
Тепер ми можемо просто запустити додаток за допомогою команди npm run start.
Не забувайте змінити директорію на frontend перед запуском цієї npm команди.
Як бачите, додаток успішно запустився, і його можна відкрити за адресою http://localhost:3000
Тепер наш React додаток готовий, і ми можемо створити Dockerfile для контейнеризації додатку.
Створення Production Dockerfile:
Ми будемо використовувати наступний код для Dockerfile
Тут ми використовуємо node:16-alpine docker образ і позначаємо його як builder
У наступних рядках ми визначили WORKDIR, скопіювали файл package.json з локальної машини в робочу директорію образу та встановили залежності за допомогою команди npm install. Потім ми скопіювали всі файли з локальної директорії в робочу директорію образу і побудували React додаток за допомогою команди npm run build.
Тепер, коли збірка готова для обслуговування, ми використовуємо образ nginx для обслуговування сайту. Nginx надає дані на порту 80, тому ми відкриваємо цей порт. Після цього ми копіюємо збірку з node контейнера в nginx контейнер і додаток готовий до запуску.
Створення тестового Dockerfile.dev
Тут ми будемо використовувати інший Dockerfile, метою якого є запуск тестів для React додатку.
Для цього ми створимо окремий Dockerfile з ім'ям Dockerfile.dev, який містить наступний код.
Як ви бачите, ми робимо те саме, що і в попередньому Dockerfile, за винятком кінцевої команди, яка тут npm run start, щоб запустити React додаток.
До цього часу у нас є два Dockerfile: один для обслуговування збірки, а інший — для тестування додатку.
Тепер настав час створити CI & CD, тобто пайплайн для безперервної інтеграції та безперервного деплою, для чого ми будемо використовувати Travis CI.
Написання конфігураційного файлу CI-CD:
Для цього нам потрібно створити файл .travis.yml, який містить наступний код,
Як ви бачите, тут багато чого. Дозвольте пояснити.
На початку ми визначаємо, чи потрібен пайплайну sudo, а також образ, який тут є generic. Потім ми визначаємо сервіс, який буде використовувати Travis — це docker, оскільки ми виконуємо docker команди.
Тут є 3 кроки:
- before_install
- script
- deploy
У першому кроці ми будуємо тестовий образ нашого додатку, який буде використаний у другому кроці для запуску тестів, як показано на зображенні.
Тепер переходимо до основного етапу — deploy, який розгортає код на Elastic Beanstalk. Ми вибрали EBS, оскільки це найпростіший спосіб розгорнути код на AWS без турбот про інфраструктуру. Крім того, він надає балансування навантаження та автоскейлінг за потребою, тому вам не потрібно турбуватися про інфраструктуру, на якій буде працювати код.
На фінальному етапі, тобто deploy, спочатку ми визначаємо ім'я провайдера, яким є elasticbeanstalk в цьому випадку. Це допоможе Travis CI зрозуміти етап розгортання для додатку. Є й інші параметри, які ми також повинні визначити, такі як region, ім'я додатку, env ім'я, bucket_name та bucket_path. Ми також визначили, коли має відбутися деплой — у цьому випадку деплой відбудеться, якщо зміни були внесені в master гілку. І, нарешті, ми визначили облікові дані, які будуть використані для доступу до AWS Elastic Beanstalk через Travis CI.
Отже, тепер наш код готовий, і ми можемо приступати до фактичного деплою CI-CD пайплайну.
Почнемо з налаштування коду в нашому GitHub репозиторії.
Налаштування GitHub репозиторію:
Для цього я створюю публічний репозиторій на GitHub з ім'ям docker-react-travisci та пушу код у репозиторій.
Після цього потрібно ініціалізувати Git в директорії з нашим кодом.
Після завершення ініціалізації, ми можемо пушити код у репозиторій.
Тепер ви можете побачити код у вашому GitHub репозиторії.
Отже, GitHub частину завершено, тепер нам потрібно налаштувати Travis CI та AWS Elastic Beanstalk.
Налаштування AWS Elastic Beanstalk:
У цьому випадку ми спочатку налаштуємо AWS Elastic Beanstalk, тому що якщо налаштувати Travis CI першим, він автоматично запустить побудову та деплой, але не зможе виконати їх, оскільки середовище Elastic Beanstalk ще не буде налаштоване.
Отже, давайте перейдемо на сторінку AWS Elastic Beanstalk і створимо Beanstalk застосунок, натиснувши кнопку Create Application.
Тут ми будемо використовувати ті самі значення, що і в нашому файлі .travis.yml.
У розділі Platform вибираємо Docker, а потім натискаємо Create application.
Це займе деякий час для створення всього застосунку та середовища.
Будь ласка, оновіть змінні у файлі .travis.yml відповідно до вашого налаштування AWS Elastic Beanstalk.
Через деякий час AWS EBS покаже зелений прапорець, і ви зможете отримати доступ до зразка коду через URL, вказаний нижче біля імені середовища.
Отже, тепер наш AWS Elastic Beanstalk готовий, тепер нам потрібно налаштувати Travis CI, але перед цим треба створити AWS IAM користувача, який буде використовуватись Travis CI для деплою коду на AWS через EBS.
Створення IAM користувача:
Для цього я створив IAM користувача з доступом Elastic Beanstalk Administrator, як показано нижче.
Після цього створюємо Access key для цього IAM користувача, який буде використовуватись разом з GitHub репозиторієм у Travis CI.
Сподіваюся, що на даному етапі ви вже завершили налаштування облікового запису Trial для Travis CI та успішно увійшли.
Налаштування GitHub репозиторію з Travis-CI:
Після входу у ваш GitHub акаунт, натискаєте на ваш профіль у верхньому правому куті і далі на Settings, що відкриє сторінку, схожу на нижче.
Я припускаю, що вперше вам буде запропоновано натискати Allow для підключення вашого GitHub акаунту до вашого акаунту Travis CI. Після цього створіть Access key для цього IAM користувача, який буде використовуватись з GitHub репозиторієм у Travis CI.
Сподіваюся, що на даному етапі ви вже налаштували обліковий запис для Travis CI та успішно увійшли.
Після входу в GitHub акаунт, натискаєте на ваш профіль у верхньому правому куті і далі на Settings, що відкриє сторінку, схожу на нижче.
Я припускаю, що вперше вам буде запропоновано натискати Allow для підключення вашого GitHub акаунту до вашого акаунту Travis CI.
Натискаєте на Manager repositories on GitHub і це переведе вас на сторінку налаштувань GitHub у Travis CI, де ви зможете вибрати репозиторій для налаштування CI-CD пайплайну.
Після натискання на Approve and install репозиторій буде доданий до вашого акаунту Travis CI, і ви зможете побачити його в розділі Repositories.
Тепер давайте додамо AWS EBS Secret Access key в репозиторій, натиснувши кнопку Settings репозиторію.
Тому перед цим давайте створимо Secret Access key в IAM.
А потім додамо ці ключі в налаштуваннях Environment Variables репозиторію на Travis CI.
Запуск першої збірки:
Тепер ми готові запустити нашу першу збірку, для цього йдемо до нашого репозиторію і натискаємо на Trigger Build.
Оскільки це буде тільки перший раз, ми запустимо збірку вручну, після цього при кожній зміні в репозиторії Travis CI автоматично запускатиме тести та деплой.
Як видно, Build завершився успішно.
Прокрутіть сторінку вниз, і ви побачите результат фаз тестування та деплою, у моєму випадку обидва етапи пройшли успішно з кодом виходу 0.
Після цього перейдемо на сторінку Elastic Beanstalk, і ви побачите, що EBS знаходиться в процесі оновлення, дочекайтесь завершення.
Через деякий час ви побачите, що Running version змінилася з Sample Application на Travis application, і логи покажуть зміни, внесені в середовище EBS.
Тепер ви можете натискати на посилання EBS, щоб відкрити наш зразок React додатку.
Налаштування Feature Branch:
Тепер давайте зробимо розробку коду зручнішою, створивши feature branch.
Після цього давайте внесемо деякі зміни в файл src/App.js і заштовхаємо їх у feature branch.
Тепер ми можемо злитись з pull request після перевірки коду, а також потім, при порівнянні та створенні pull request, Travis CI запустить тестування для цієї гілки.
Коли ви створюєте pull request, Travis CI розпочне фазу тестування як для самого pull request, так і для гілки.
Коли обидва тести пройдуть успішно, натискайте Merge pull request, а потім Confirm merge.
Feature branch буде злитий з master branch, після чого Travis CI знову розпочне фазу Build & Deploy на AWS Elastic Beanstalk.
Як ви можете побачити, збірка була успішною, і фаза деплою мала б вже початися і відобразитися на Elastic Beanstalk.
Після відкриття посилання, ви можете побачити, що зміни успішно були розгорнуті на EBS.
Це все на сьогодні, друзі! Сподіваюся, ви дізналися багато нового та дізналися, як налаштувати End-To-End CI-CD Pipeline з Travis CI та AWS Elastic Beanstalk.
Якщо ви хочете подивитися код, будь ласка: https://github.com/dcgmechanics/docker-react-travisci
Дуже дякую!!
Не забувайте: #SharingIsCaring 😉
Перекладено з: CICD — Deploy to AWS Elastic Beanstalk with Travis-CI