Впровадження CI/CD для React додатків з GitLab та Hostinger: Покроковий посібник

Фото від Pankaj Patel на Unsplash

У цьому посібнику я пройду через процес налаштування пайплайна для деплою React додатку на Hostinger. Метою є автоматизація процесу деплою, щоб кожен пуш у ваш репозиторій GitLab автоматично оновлював ваш вебсайт. Цей посібник надасть детальний огляд кроків, необхідних для деплою React додатків на Hostinger за допомогою потужних можливостей CI/CD GitLab.

Налаштування Gitlab CI/CD пайплайна

Щоб налаштувати ваш CI/CD пайплайн, вам потрібно створити файл .gitlab-ci.yml у кореневій директорії вашого проекту. Цей файл визначатиме етапи та завдання вашого пайплайна. Ось приклад вмісту для вашого React проекту:

stages:  
 - build  
 - deploy  

build:  
 stage: build  
 image: node:latest  
 script:  
 - npm ci  
 - npm run build  
 artifacts:  
 paths:  
 - dist/  

deploy:  
 stage: deploy  
 image: alpine:latest  
 before_script:  
 - apk update && apk add lftp  
 script:  
 - lftp -c "set ftp:ssl-allow no; open -u $FTP_USERNAME,$FTP_PASSWORD $FTP_SERVER; mirror -Rev ./dist/ /your_hosting_directory --ignore-time --parallel=10; quit"  
 only:  
 - main

У цьому файлі ми визначаємо два етапи: build та deploy. Етап build використовує останній образ Node.js для встановлення залежностей проекту та побудови React додатку. Створені файли зберігаються як артефакти в директорії dist/.

Етап deploy використовує останній образ Alpine і встановлює lftp, командний FTP клієнт. Потім він використовує lftp, щоб підключитися до FTP сервера, вказаного через $FTP_SERVER, з іменем користувача та паролем, вказаними через $FTP_USERNAME та $FTP_PASSWORD. Він віддзеркалює директорію dist/ в директорію /your_hosting_directory на FTP сервері, ігноруючи час модифікації файлів і завантажуючи до 10 файлів паралельно. Цей етап виконується лише на гілці main.

Не забувайте, що вам потрібно замінити $FTP_USERNAME, $FTP_PASSWORD та $FTP_SERVER на ваші реальні FTP дані. Не хвилюйтесь, якщо не знаєте, як це зробити, я проведу вас через процес налаштування цих даних як секретних змінних у налаштуваннях вашого GitLab проекту в наступному розділі. Цей підхід гарантує безпеку та конфіденційність ваших даних.

Отримання FTP даних з Hostinger

Увійдіть у свій обліковий запис Hostinger: Почніть з того, що увійдете в свій обліковий запис Hostinger. Після входу ви потрапите на панель управління Hostinger.

Перейдіть до розділу Hosting: На панелі управління перейдіть до розділу “Hosting”. Тут ви побачите список всіх ваших хостингів. Натисніть кнопку “Dashboard” поруч з хостингом, для якого ви хочете отримати FTP дані, як показано на скріншоті нижче.

Доступ до розділу FTP Accounts: Зліва на екрані ви побачите меню. Натисніть на “FTP Accounts” в розділі “Files”.

Отримання ваших FTP даних: У розділі FTP Accounts ви побачите список FTP акаунтів, пов'язаних з вашим хостинг-акаунтом. Поруч з кожним FTP акаунтом ви побачите FTP ім’я користувача, FTP сервер та прихований пароль. Клікніть на іконку “ока”, щоб показати FTP пароль.

Не забувайте зберігати ці дані в безпеці. У наступному розділі я покажу вам, як використовувати ці дані для налаштування секретних змінних у налаштуваннях вашого GitLab проекту.

Налаштування секретних змінних у GitLab

1. Перейдіть до вашого GitLab проекту: Увійдіть у свій обліковий запис GitLab і перейдіть до конкретного проекту, де ви хочете налаштувати секретні змінні.
2. Доступ до налаштувань: На головній сторінці проекту натисніть на опцію “Settings” в лівому меню.
3. Перейдіть до розділу CI/CD: У налаштуваннях знайдіть та натисніть на розділ “CI / CD”.
   4.
   Розгорніть розділ Змінних: У розділі CI / CD ви знайдете підрозділ з назвою “Variables”. Клацніть на кнопку “Expand”, щоб розгорнути цей розділ.
4. Додайте нову змінну: Клацніть на кнопку “Add Variable”. Ви побачите поля для введення ключа змінної та її значення.
5. Введіть FTP дані: У полі “Key” введіть назву змінної (наприклад, FTP_USERNAME). У полі "Value" введіть відповідне значення, яке ви отримали з Hostinger. Переконайтеся, що опція "Mask variable" (Маскувати змінну) відмічена, щоб зберегти значення в безпеці. Повторіть цей процес для FTP_PASSWORD та FTP_SERVER.
6. Збережіть змінні: Клацніть на кнопку “Add Variable”, щоб зберегти кожну змінну. Після того, як ви додасте всі змінні, вони стануть доступними для використання у вашому файлі .gitlab-ci.yml і будуть збережені в безпеці.

Не забувайте, що ці змінні чутливі до регістру та повинні точно відповідати тим, що використовуються у вашому файлі .gitlab-ci.yml.

Ось і все, ваш CI/CD пайплайн готовий

У цьому посібнику ми пройшли через процес налаштування CI/CD пайплайна для React додатку за допомогою GitLab і Hostinger. Ми дізналися, як створити файл .gitlab-ci.yml, щоб визначити етапи побудови та деплою, як отримати FTP дані з Hostinger та як безпечно налаштувати ці дані як секретні змінні в GitLab.

З таким налаштуванням кожен пуш в гілку main вашого репозиторію GitLab буде автоматично запускати процес побудови та деплою, гарантуючи, що ваш сайт на Hostinger завжди буде оновлений з останніми змінами. Це не лише автоматизує ваш процес деплою, але й зменшує ризик помилок, які можуть виникнути при ручному деплої.

Не забувайте, що ключем до успішного CI/CD пайплайна є регулярне тестування та моніторинг. Завжди перевіряйте журнали виконання пайплайна в GitLab, щоб переконатися, що все працює без збоїв. Удачі в програмуванні! 🙌

Якщо у вас є коментарі або питання, залишайте відповідь або звертайтеся до мене. 😊

Перекладено з: Implementing CI/CD for React Apps with GitLab and Hostinger: A Step-by-Step Guide