8 free React hosting services for your app

Reading Time: 10 minutes

Итак, вы создали приложение React, но не знаете, как и где его разместить. В этой статье мы познакомим вас с 8 бесплатными услугами хостинга React и покажем, как мы их развернули. это приложение React используя каждый из них, и расскажем вам, чему мы научились в процессе.

Мы создали наше приложение в Figma, используя Anima плагин, который позволил нам добавить функциональность, адаптивное поведение и мультимедийные возможности, а затем экспортировать готовый к разработке код React для всего пользовательского интерфейса.. На проектирование и внедрение у нас ушел день.

Где бесплатно разместить приложение React

Число решений бессерверного хостинга растет благодаря появлению компонентных инфраструктур, таких как React. Amazon AWS, Microsoft Azure и Google Cloud в настоящее время являются доминирующими платформами. Тем не менее, наблюдается растущий сдвиг в сторону услуг выделенного внешнего хостинга, которые требуют меньших усилий и позволяют быстро приступить к работе, и большинство из них включают CI/CD. Вот 8 бесплатных услуг хостинга приложений React, которые мы протестировали:

2. Vercel

Давайте более подробно рассмотрим эти бесплатные службы хостинга приложений React и продемонстрируем, как мы развернули приложение React, используя каждую из них.

Нетлифай

Фон

Netlify была основана в 2014 году и с самого начала ориентировалась на хостинг статических веб-сайтов. Он привлек множество разработчиков из-за щедрого уровня бесплатного пользования. Через пару лет Netlify стала одним из самых популярных хостингов JAMstack и статических веб-сайтов.

Как использовать

В идеале вы должны зарегистрироваться или войти в систему с помощью GitHub. Это гарантирует, что вы сможете получить доступ к репозиториям в своем профиле и быстро их развернуть.
После входа в систему нажмите «Добавить новый сайт» и выберите «Импортировать существующий проект».
Затем выберите GitHub в качестве своего провайдера.
Выберите «сайт банка» или другое название вашего проекта.
Настройте параметры развертывания (в случае с нашим веб-сайтом параметры по умолчанию работают идеально), затем нажмите «Развернуть сайт».
После развертывания вы можете просмотреть его на общедоступном URL, которым вы можете поделиться со всем миром. Ура!

Вот живое приложение, развернутое на Netlify.

Плюсы и минусы

Netlify легко настроить и развернуть, не говоря уже о том, что это один из самых быстрых сервисов, которые мы здесь тестировали. Недостатком является то, что если вам нужны сотрудники и/или команда, вам придется перейти на платный план.

Vercel

Фон

Vercel (первоначально известный как Zeit) был основан в 2015 году и быстро завоевал известность. Они являются сопровождающими Next.js, популярной платформы React для создания веб-сайтов. Они предлагают бесплатный уровень для некоммерческих веб-сайтов, а также способы использования своей сети Edge для бессерверных функций.

Как использовать

Войдите или зарегистрируйтесь с помощью GitHub.
Нажмите раскрывающийся список «Добавить новый…» и выберите «Проект».
Выбирайте «банк-сайт» или любимый проект React.
Мы использовали настройки развертывания по умолчанию, а затем нажали «Развернуть».
Через некоторое время мы запустили сайт.

Вот живой URL.

Плюсы и минусы

Vercel требуется некоторое время для кэширования установочной части процесса развертывания, но после этого это один из самых быстрых сервисов. Он показывает предварительные развертывания для каждой ветки, которую вы отправляете, и делает это быстро из-за кэширования.

AWS Усилить

Фон

AWS — это огромная коллекция облачных продуктов, и Amplify рекламируется как простой способ получить доступ к некоторым из них. С помощью AWS Amplify вы можете быстро создавать, доставлять и размещать полнофункциональные приложения на AWS, а также гибко использовать широкий спектр сервисов AWS по мере развития сценариев использования.

Как использовать

Зарегистрируйтесь или войдите в AWS, затем найдите AWS Amplify и нажмите «Начать».
Выберите GitHub и авторизуйте его (я разрешил только для репозитория «банк-сайт»).
Выберите репозиторий в разделе «Недавно обновленные репозитории».
1. В настройках сборки нам придется изменить базовый каталог чтобы наше приложение было расстояние вот так: Тогда настройки сборки должны выглядеть так:
На следующем шаге нажмите «Сохранить и развернуть».
Через некоторое время веб-сайт будет развернут и готов к использованию.

И мы живы! Вот URL.

Плюсы и минусы

Вам необходимо отредактировать базовый каталог в спецификации развертывания — он не распознается «из коробки». Пользовательский интерфейс кажется немного неуклюжим, но это личное предпочтение. У AWS Amplify огромный потенциал, поскольку многие другие веб-сервисы AWS находятся в пределах досягаемости.

Огневая база

Фон

Firebase — это сервис Google, наиболее известный как платформа хранения данных в реальном времени. Но у него также есть опция хостинга для статических веб-сайтов и микросервисов Express.js или API, а также поддержка предварительной версии URL для ветвей, над которыми работает ваша команда. Как и в случае с Netlify, Vercel и другими, он обслуживает развернутый контент через сеть CDN.

Как использовать

Установить Firebase-инструменты с npm install -g firebase-tools.
Войдите в Firebase с помощью вход в Firebase. После входа в систему вы должны увидеть такое сообщение:
Перейдите в каталог проекта и запустите инициализация Firebase, вы должны увидеть что-то вроде этого: Выберите вариант настройки файлов для хостинга Firebase с дополнительным развертыванием действий GitHub. Затем вы можете создать проект прямо из CLI или использовать для этого пользовательский интерфейс Firebase, а затем подключить его. We created the project from the command line, and this is how we answered the resulting questions: After that, simple `firebase.json` and `.firebaserc` files will be created.
Затем запустите развертывание огневой базы для фактического развертывания файлов из расстояниекаталог. Если каталог отсутствует, обязательно запустите npm запустить сборку сначала сгенерировать файлы. развертывание огневой базы команда должна сгенерировать вывод, аналогичный приведенному ниже примеру:

Теперь вы можете просмотреть веб-сайт на предоставленном URL. Ура!

Плюсы и минусы

Firebase довольно прост, но когда вы настраиваете его внутри своего проекта, вопросы, на которые вам нужно ответить, немного сбивают с толку. К счастью, мы ответили на них в разделе выше, но прежде чем продолжить, необходимо понять реальные функции Firebase. Помимо этого, Firebase быстро развертывается и может создать URL, где вы можете просмотреть развернутые файлы. Вы также можете легко автоматизировать это с помощью развертывания GitHub Action с помощью CLI, что очень удобно.

Страницы GitHub

Фон

GitHub Pages существует уже довольно давно и представляет собой простой способ публиковать документы или личный веб-сайт непосредственно из GitHub. Он отлично подходит для статического контента, и многие люди используют его для развертывания простых сайтов с минимальными вложениями. Его можно использовать бесплатно, если ваш проект является общедоступным, и это быстрый и дешевый способ разместить веб-сайт.

Как использовать

Обратите внимание, что вам необходимо отредактировать Приложение.jsx куда мы звоним Маршрутизатор и добавить базовое имя к нему, чтобы оно соответствовало имени репо. Так вот как Приложение.jsx должен выглядеть: Мы должны изменить базовое имя потому что страницы GitHub развернут веб-сайт на URL этой формы `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Веб-сайт не будет работать должным образом, если для него не установлено базовое имя. реакция-маршрутизатор-дом.

После изменения кода нам нужно установить gh-страницы пакет с:
И добавьте предварительное развертывание и развертывать сценарий для пакет.json:
Затем мы просто запускаем npm запустить развертывание. Это вызовет npm запустить сборку и он будет использовать gh-страницы опубликовать содержание расстояние в отдельную ветку на GitHub под названием gh-страницы.
Наконец, проверьте, gh-страницы используется для страниц GitHub, как показано ниже:

Вот живой URL.

Плюсы и минусы

Если вы развертываете проект, имя которого отличается от вашего имени пользователя, он будет развернут в подкаталоге нашего бесплатного домена с помощью GitHub. Затем вам нужно написать дополнительный код для поддержки логики нахождения внутри подкаталога.

В нашем случае он не поддерживает непрерывное развертывание «из коробки», но вы можете его настроить. После настройки изменения можно быстро применить.

Страницы GitLab

Фон

Как и GitHub, GitLab имеет собственное решение для хостинга, и они называют его GitLab Pages. Я должен им это дать: настроить непрерывное развертывание для GitLab Pages проще, чем для GitHub Pages.

Как использовать

Зарегистрируйтесь или войдите в GitLab.
Добавьте репозиторий в GitLab, если у вас его там еще нет. Ты можешь форк того, что я туда добавил
Как и в случае со страницами GitHub, вам необходимо отредактировать Приложение.jsx куда мы звоним Маршрутизатор и добавить базовое имя к нему, чтобы оно соответствовало имени репо. Итак, это последнее изменение: Мы должны изменить базовое имя потому что страницы GitLab развернут веб-сайт на URL такой формы: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Веб-сайт не будет работать должным образом, если для него не установлено базовое имя. реакция-маршрутизатор-дом.
После того, как вы отредактировали и отправили проект в GitLab, перейдите в «Настройки» > «Страницы», и вас встретит четырехэтапный мастер для развертывания репозитория на GitLab Pages.
Первым шагом мастера является ввод образа сборки. Мы будем использовать Node.js LTS.
Далее мы введем команду предварительной сборки. НПМ CI здесь будет достаточно.
Теперь переходим к этапу сборки. Нам нужно пройти — —dist-dir общедоступный потому что GitLab Pages ожидает, что веб-сайт будет построен в общественный каталог. К сожалению, другой каталог вам не сойдет с рук.
Зафиксируйте вновь созданный .gitlab-ci.yml файл, который сообщает GitLab, как развернуть ваш веб-сайт.
Теперь перейдите в раздел CI/CD -> Pipelines репозитория и наблюдайте за работой недавно добавленного конвейера.
Через некоторое время работа конвейера завершится, и веб-сайт будет развернут на GitLab Pages.

Вот результат.

Плюсы и минусы

Пакеты устанавливаются медленно, и вам нужно добавить дополнительный код, чтобы он заработал, но мастер очень интуитивно понятен и требует всего четырех шагов для развертывания.

Оказывать

Фон

Render — это новый проект, запущенный в 2019 году. Он пытается изменить способы развертывания своих сервисов (включая статические веб-сайты). Пока что у них все хорошо, и их число растет.

Как использовать

Зарегистрируйтесь или войдите в Render.
Создайте новый статический веб-сайт, нажав кнопку «Создать» и выбрав «Статический сайт».
Выберите репозиторий, который вы хотите развернуть.
Держите пряжа; сборка пряжи команду сборки в настройках сборки. К сожалению, это не работает с НПМ CI; npm запустить сборку как это делают другие сервисы. Измените «Каталог публикации» на расстояние и нажмите «Создать статический сайт».
Через некоторое время Render развернёт код.

Вот живой URL от Render.

Плюсы и минусы

Это действительно быстро, но для нашего проекта с командами npm ci и npm run build он не работает. Кажется, работает только «пряжа».

Всплеск

Фон

Surge существует уже некоторое время. На самом деле их сервис прост в использовании, и для развертывания вашего статического веб-сайта требуется всего одна или две команды. Это бесплатно, но предлагает платный план стоимостью 30 долларов в месяц. Стоицизм инструмента – вот что делает его блестящим. Никакой сложной настройки не требуется, просто установите `surge` и запустите его с `surge`.

Как использовать

Чтобы подготовиться, запустите npm запустить сборку для создания статических файлов внутри расстояние каталог. всплеск будет использовать их для развертывания.
Бегать npm install —global всплеск
Затем запустите всплеск.

Несколько вещей, на которые следует обратить внимание:
Если вы запускаете его впервые, вам придется создать учетную запись в Surge. Не волнуйтесь, это легко. Просто введите свой адрес электронной почты и желаемый пароль.

Затем вам будет предложено ввести «проект», который должен быть путем к расстояние каталог. Вы можете просто добавить расстояние к пути, который вам дали, если вы запустили всплеск внутри развертываемого репозитория.

Затем введите будущий URL вашего сайта. Попробуйте что-то уникальное, потому что что всплеск предложенное мне не помогло.

После ввода URL всплеск развернет содержимое из расстояние к указанному URL. Вот что я получил:

Плюсы и минусы

Это быстро и просто и не требует использования отдельного интерфейса, но не предлагает доступный URL для вашего приложения.

Время развертывания для каждой службы хостинга

Наши топ-3 бесплатных хостинговых услуги React

Нетлифай
Vercel
Всплеск

Ключевые выводы

После тестирования каждого из этих бесплатных сервисов хостинга приложений React мы считаем, что Netlify — лучший из всех. Он обеспечивает быстрое развертывание и множество функций, которые могут вам понадобиться. Сразу за ним идет Vercel, который имеет множество функций и работает довольно быстро после первоначального развертывания. Кроме того, у нас есть Surge — минимальный инструмент развертывания, который может стоить довольно дешево, если вы решите обновиться.

8 бесплатных услуг хостинга приложений React1 min read