Развертывание приложения React в службе облачного хостинга — важный шаг как для готового, так и для веб-приложения, находящегося в разработке. В этой статье я покажу вам, как развернуть приложение React на Render Cloud Hosting всего за пять минут.

Render — это унифицированное облако для создания и запуска всех ваших приложений и веб-сайтов с бесплатными сертификатами TLS, глобальной CDN, защитой от DDoS-атак, частными сетями и автоматическим развертыванием из Git.

Вы можете бесплатно запускать экземпляры веб-сервисов, используя бесплатные типы экземпляров Render. Бесплатные типы экземпляров созданы, чтобы помочь вам изучить, разработать личный проект и получить опыт работы в качестве разработчика рендеринга.

Прежде чем мы начнем, убедитесь, что у вас есть учетная запись в Render и ваше приложение React готово к развертыванию. Если вы еще не создали учетную запись, вы можете бесплатно зарегистрироваться на https://render.com.

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

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

Шаг 1. Создайте новый проект в Render.

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

Шаг 2. Подключите репозиторий Git

Далее вам нужно подключить репозиторий Git к Render. Это позволит Render иметь доступ к вашим репозиториям и автоматически развертывать ваше приложение React всякий раз, когда вы отправляете изменения в свой репозиторий. Чтобы подключить свой репозиторий, нажмите кнопку «Добавить репозиторий Git» и следуйте инструкциям, чтобы связать свою учетную запись Git.

Шаг 3. Настройте параметры сборки

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

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

Имя — в этом поле вы должны ввести название вашего приложения или любое другое имя, которое вы хотите видеть в URL-адресе, URL-адрес будет в этом формате; имя-приложения.onrender.com

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

Корневой каталог — запрашивает корневой маршрут вашего приложения, вы можете оставить это поле пустым.

Команда сборки — для приложения реакции команда сборки обычно имеет значение npm run buildили yarn buildв зависимости от используемого менеджера пакетов.

Каталог публикации — каталог публикации — это место, откуда будут обслуживаться ваши статические файлы. Обычно это каталог build, если вы создали свое приложение с помощью create-react-app, если вы используете сайт, каталог публикации по умолчанию — dist.

Шаг 4. Разверните приложение React

Нажмите кнопку «Создать статический сайт» под формой и посмотрите, как вы реагируете на развертывание приложения (это займет несколько минут в зависимости от скорости вашей сети)

Если ваше развертывание прошло успешно, рендер предоставит вам уникальный URL-адрес, по которому вы сможете просмотреть свое приложение в реальном времени. Если ваше развертывание завершилось неудачно, попробуйте использовать кнопку ручного развертывания для повторного развертывания, и если оно не исчезнет, ​​проверьте журналы и устраните ошибку.

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

Шаг 5. Протестируйте развернутое приложение

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

Вот и все! Всего за несколько простых шагов вы успешно развернули свое приложение React на Render Cloud Hosting. Эта мощная платформа обеспечивает автоматическое масштабирование, автоматическую отработку отказа и автоматическое резервное копирование, поэтому вы можете быть уверены, что ваше приложение будет доступно и эффективно для ваших пользователей.

В заключение, развертывание приложения React на Render Cloud Hosting — это быстрый и простой процесс, который можно выполнить всего за пять минут. Благодаря своим мощным функциям и простоте использования Render является идеальной платформой для развертывания готовых приложений React.

Не стесняйтесь оставлять комментарии для меня ниже, следите за мной в Твиттере и LinkedIn и делитесь этим руководством с другими. Спасибо.