Укр Рус
Як розгорнути React додаток онлайн та безкоштовно

Як розгорнути React додаток онлайн та безкоштовно

  • 16 серпня
  • читати 10 хв
Сергій Журавель
Сергій Журавель Lead Front-end Developer у Temy, Викладач Комп'ютерної школи Hillel.

React свого часу призвів до революційних змін в розробці веб-сайтів.

Стало доволі легко зробити гарний інтерактивний веб-сайт. Але у новачків часто виникає питання — як так зробити, щоб мій сайт могли побачити інші користувачі в інтернеті. Звичайно, можна купити платний хостинг і розгорнути додаток там. Але не поспішайте витрачати гроші — розгорнути React додаток можна і абсолютно безкоштовно.

React додаток у своєму фінальному стані насправді являє собою статичний веб-сайт. Статичним називається сайт, в якому лише статичні файли: такі як HTML, JS, CSS та картинки.

Для того, щоб отримати цей статичний сайт, потрібно виконати команду npm run build. Після цього ми отримаємо папку build, в якій будуть зібрані всі файли, які потрібні для роботи нашого статичного сайту. Основним файлом є index.html. Справа в тому, що більшість веб-серверів налаштовані так, що коли ми відкриваємо якийсь URL в браузері, то веб-сервер шукає за вказаною адресою файл index.html або index.htm. Якщо веб-сайт динамічний, то веб-сервер може бути налаштований на пошук файлів типу index.php, index.apsx, тощо.

Спробуйте відкрити ось такі посилання:

https://ithillel.ua/

https://ithillel.ua/index.php

Ви побачите однакові сторінки сайту.

Все це потрібно для розуміння, що в статичному веб-сайті в папці має бути файлик index.html, який буде віддаватися веб-сервером.

У випадку SPA (Single Page Application), яким є наш React додаток, цей файлик зазвичай має пусте тіло, лише з одним елементом, в який монтується JavaScript додаток, основний код якого зберігається у JS файлі, який зазвичай називається bundle.

Тож коли ми отримали папку build, ця папка є нашим статичним веб-сайтом. Залишається лише знайти веб-сервер, який може хостити статичні веб-сайти.
Насправді таких серверів та сервісів дуже багато, при чому як хостинг провайдерів, що надають безкоштовний хостинг, до сервісів типу Heroku, Amazon S3, Firebase, тощо. Ми розглянемо два найбільш популярних сервіси у Front-end спільності — GitHub Pages та Netlity.

GitHub Pages

Думаю, навіть більшість початківців вже знають, що таке GitHub і як ним користуватися. Але небагато розробників знає про додатковий сервіс GitHub Pages.

GitHub Pages дозволяє розгорнути статичний веб-сайт прямо в GitHub, отримати доменну адресу і навіть при потребі підключити свій власний домен. Так як React додаток — це також статичний веб-сайт, то його також можна тут хостити.

Є кілька способів як розгорнути свій React додаток на GitHub Pages.

Основні способи це:

  • В окремій бранчі, або в спеціальній папці (наприклад, docs) основної бранчі. Про ці способи ви можете прочитати в документації GitHub Pages
  • Мій улюблений автоматичний спосіб — використовуючи npm пакет gh-pages

Спочатку його треба встановити:

npm install gh-pages -D

Потім в scripts вашого package.json файлу додайте такі скрипти:

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

Після цього збережіть зміни і закомітьте їх. Ви зможете розгортати React додаток однією командою:

npm run deploy

Ця команда сама зробить білд (build) вашого React додатку і, якщо немає ніяких помилок, то створить (або оновить) додаткову гіт гілку gh-pages і закомітить туди останню версію зборки вашого додатку.

Сторінка вашого додатку буде доступною за адресою.

Наприклад, я колись деплоїв простенький додаток для вивчення англійських слів, фраз і умовних виразів на GitHub Pages і ось, яку адресу має веб-додаток: https://sergii-zhuravel.github.io/learning-cards/

Netlify

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

Netlify пропонує безкоштовний тариф, тому спробувати його може кожен бажаючий. Його навіть стартапи використовують як, наприклад, тестове середовище. Увійти в Netlify також дуже просто, можна використати будь-який із параметрів (Github, Gitlab, Bitbucket, Email), вказаних на сторінці входу.

Існує декілька способів розгорнути наш веб-додаток на Netlify.

Декілька основних варіантів:

  1. Перетягнути папку build в веб інтерфейс сервісу Netlify

  2. Використовуючи netlify-cli інструмент (https://www.npmjs.com/package/netlify-cli)

  3. Імпортувати проєкт з GitHub (або іншого Git репозиторію)

Імпортувати проєкт з GitHub дуже просто. Для цього потрібно натиснути кнопку «Import from Git» та слідувати інструкціям.

Але мабуть найшвидший і найпростіший варіант — це метод «перетягни і відпусти». Для цього потрібно лише збілдити React додаток (npm run build) і перетягнути папку build в спеціальну область на сторінці Netlify (з написом «Drag and drop your site output folder here»).

Як ми бачимо, розгорнути React додаток можна швидко, легко і безкоштовно. До речі, Netlify має також сервіс Netlify CMS, що є headless CMS, і може виступати бекендом для вашого React додатку, з можливістю адмініструвати контент.

Це дуже крута та популярна штука. Але це вже інша історія :)

Рекомендуємо курс по темі