React в свое время привел к революционным изменениям в разработке веб-сайтов.
Стало довольно легко сделать хороший интерактивный веб-сайт. Но у новичков часто возникает вопрос — как сделать так, чтобы мой сайт могли увидеть другие пользователи в интернете. Конечно, можно купить платный хостинг и развернуть приложение там. Но не торопитесь тратить деньги — развернуть React приложение можно и совершенно бесплатно.
React приложение в своем финальном состоянии действительно представляет собой статический веб-сайт. Статичным называется сайт, содержащий только статические файлы: такие как HTML, JS, CSS и картинки.
Чтобы получить этот статический сайт, нужно выполнить команду npm run build. После этого мы получим папку build, в которой будут собраны все файлы, необходимые для работы нашего статического сайта. Основным файлом является index.html. Дело в том, что большинство веб-серверов настроены так, что когда мы открываем какой-нибудь URL в браузере, то веб-сервер ищет по указанному адресу файл index.html или index.htm. Если веб-сайт динамичен, то веб-сервер может быть сконфигурирован для поиска файлов типа index.php, index.apsx и т.д.
Попробуйте открыть следующие ссылки:
Вы увидите одинаковые страницы сайта.
Все это необходимо для понимания, что в статическом сайте в папке должен быть файл 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.
Несколько основных вариантов:
Перетащите папку build в веб-интерфейс сервиса Netlify
Используя netlify-cli инструмент (https://www.npmjs.com/package/netlify-cli)
Импортировать проект из 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 приложения с возможностью администрировать контент.
Это очень крутая и популярная штука. Но это уже другая история:)
