Автор оригинала: Yogesh Chavan.
В этой статье мы узнаем самые популярные способы развертывания приложения RACT в NetLify. Мы также изучим изменения конфигурации, необходимые для развертывания приложения на основе маршрутизации.
Что я люблю о NetLify Это дает много полезных функций бесплатно такое как:
- Способ развертывания статического сайта в течение нескольких секунд
- Непрерывное развертывание, которое означает, что когда вы подключаете репозиторий GitHub/GitLab/Bitbucket, он автоматически вызывает развертывание, когда новые коммиты нажаты в репозиторий
- Обеспечение того, что ваш сайт никогда не спускается, даже во время новых развертываний
- Позволяет легко откатиться к любой предыдущей рабочей версии вашего сайта одним щелчком мыши
- Давайте быстро просматривать любую из ранее развернутых версий приложения
- Измените домен или поддомен своего сайта мгновенно
и многое другое.
Итак, давайте посмотрим, как развернуть приложение React для NetLify.
Перетащите папку сборки в NetLify
Самый быстрый и простой способ развертывания приложения React – это просто перетащить папку сборки в NetLify.
Чтобы создать папку сборки, просто выполните NPM запустить сборку или пряжа строит Команда из командной строки из вашей папки проекта.
После создания папки сборки вам просто нужно отбросить папку в области капле под сайты Меню, как показано ниже:
Как развернуть приложение для NetLify из репозитория GitHUB
Это мой любимый способ развертывания приложений в NetLify.
Потому что всякий раз, когда вы нажимаете какие-либо изменения в репозиторий GitHUB, он автоматически будет развернут для NetLify. Вы также можете увидеть все развернутые версии и легко откатывайтесь на любую ранее работающую версию кода с одним щелчком мыши.
Если у вас уже есть репозиторий в GitHub, то вам просто нужно подключить его.
Войдите в свою учетную запись NetLify. На приборной панели нажмите на Новый сайт из Git кнопка.
Нажмите на Github Кнопка для подключения вашего репозитория GitHub.
Он откроет новую вкладку. Убедитесь, что всплывающее окно включено в вашем браузере.
Поиск репозитория GitHub в Поиск REPOS поисковая строка. Если ваш репозиторий не отображается, нажмите на Настройте приложение NetLify на GitHub кнопка внизу страницы.
После нажатия, прокрутите вниз на странице и нажмите на Выберите репозитории Выпадайте и ищите свой репозиторий и нажмите на Сохранить кнопка.
Вы будете перенаправлены на предыдущую страницу, показывающие все доступные репозитории.
Поиск репозитория, который вы хотите развернуть. Для этой статьи я выбрал React-Book-Management-App Репозиторий, который мы создали в моем Предыдущая статья Отказ
Как только вы выберете репозиторий, вы увидите следующий экран:
Для этого приложения нам не нужно ничего менять.
Ваш Создать команду и Опубликовать каталог будет автоматически заполнен. Обязательно введите эти поля, если у вас есть другая команда в Package.json Для создания вашего приложения или эти поля не заполнены автоматически.
Теперь нажмите на Развертывание сайта кнопка. После нажатия вы увидите Развертывание сайта в прогрессе сообщение.
Вам придется немного подождать, пока он развертывает. После завершения развертывания вы увидите следующий экран:
Откройте ссылку на новой вкладке, и вы увидите, что ваше приложение развернуто в прямом эфире.
Потрясающие! Теперь, если вы внесите какие-либо изменения в исходном коде и нажмите, что изменение в GitHub, NetLify обнаружит это изменение и перенаправьте ваше приложение с вашими последними изменениями.
Если вы проверяете приложение, вы увидите, что приложение работает нормально с навигацией, и вы можете добавить/редактировать/удалить книгу.
Но есть один вопрос. Если вы напрямую доступа к /Добавить маршрут или обновить /Добавить Страница маршрута, вы получите страницу не найдут ошибку, как показано ниже:
Вы получите ту же ошибку, если попытаетесь обновить маршрут редактирования страницы.
Это связано с тем, что когда мы получаем доступ к любому маршруту на нашей локальной машине, React Round Reader обрабатывает маршрутизацию. Но когда мы развертываем приложение на любом сервере, напрямую доступ к маршруту отправят запрос на сам сервер (NetLify в нашем случае).
Но как нет /Добавить Обработчик маршрута на стороне сервера вы увидите страницу не найденную ошибку. Но NetLify предоставляет способ исправить это.
Создайте новый файл с именем _redirets внутри публичный Папка нашего проекта и добавить следующее содержимое внутри него:
/* /index.html 200
Здесь мы говорим NetLify для перенаправления всех маршрутов к index.html файл.
index.html Файл содержит наш весь весь код приложения. Он генерируется внутри построить папка, когда пряжа строит Команда выполняется с помощью NetLify при развертывании приложения.
И как маршрутизация обрабатывается наше наше приложение React, которое содержится в index.html Файл, наше приложение будет работать без страницы не нашли проблему.
Теперь нажмите изменения в репозиторий GitHUB, поэтому NetLify снова развернут приложение с этими изменениями.
И после развертывания, если вы проверяете развернутое приложение, вы увидите, что приложение работает нормально, и мы не получим страницу не найденную ошибку.
Вот и все! Мы все сделаны с развертыванием нашего приложения в NetLify.
Как легко изменить имя сайта в NetLify
Если вы проверяете имя развернутого сайта, вы увидите, что его не легко запомнить, особенно если у вас много приложений развернута. Но NetLify предоставляет способ легко изменить это.
Нажмите на Настройки сайта Кнопка отображается на Обзор сайта раздел.
Затем нажмите на Изменить имя сайта кнопка и введите новое имя. Нажмите на Сохранить Кнопка, и теперь вы можете получить доступ к вашему приложению с измененным именем.
Если вы хотите знать, как развернуть приложение Rev + Node.js на производство, проверьте Эта статья Отказ
Спасибо за прочтение!
Вы можете найти полный исходный код GitHub вместе с этим изменением перенаправления в Этот репозиторий Отказ
Вы можете увидеть живую демонстрацию развернутого приложения здесь .
Хотите узнать все функции ES6 + подробно, включая пусть и const, обещает, различные методы обещания, массив и деструктурирование объектов, функции стрелки, Async/ждут, импортируют и экспортируют и намного больше с нуля?
Проверьте мой Овладение современным JavaScript книга. Эта книга охватывает все предпосылки для реагирования на обучение и помогает вам стать лучше на JavaScript и реагировать.
Кроме того, вы можете проверить мой Бесплатно Введение в React Router Курс для изучения React Router с нуля.
Хотите остаться в курсе с регулярным контентом в отношении JavaScript, React, Node.js? Следуй за мной на LinkedIn Отказ
Оригинал: “https://www.freecodecamp.org/news/how-to-deploy-react-router-based-app-to-netlify/”