Как развернуть React приложение онлайн и бесплатно

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.

Сначала его нужно установить:

Затем в scripts вашего package.json файла добавьте следующие скрипты:

Затем сохраните изменения и закомтите их. Вы сможете разворачивать React приложение одной командой:

Эта команда сама сделает билд (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 приложения с возможностью администрировать контент.

Это очень крутая и популярная штука. Но это уже другая история:)