Автор оригинала: FreeCodeCamp Community Member.
Абхишек Джахар
Я собираюсь научить вас развертывать и принять ваше приложение raction с NetLify. NetLify это услуга, которая автоматизирует сборки, развертывание и управляет вашими веб-сайтами. Это одно из самых быстрых и простых решений развертывания в наши дни.
NetLify предлагает бесплатный план. Итак, во-первых, мы войдем в Нечто Используя любой из вариантов (github, gitlab, bitbucket, e-mail), указанный на странице входа.
Мы начнем с создания сборки нашего приложения, запустив эту команду:
npm run build
Итак, теперь наша папка сборки будет генерироваться, которая будет содержать все готовые к производственным файлам.
Теперь есть Два способа Развернуть наше приложение в NetLify.
Перетаскивания
Netifly сделал так легко, что мы должны просто Перетащите наше Сборка папки в их онлайн приложение (Самое главное изображение выше), и наше приложение будет развернуто в живой URL.
NetLify CLI.
Netifly также предоставляет интерфейс командной строки, который позволяет развертывать ваше приложение прямо из командной строки. Вот что мы будем делать сейчас.
Поэтому сначала мы установим CLI, используя следующую команду:
npm install netlify-cli -g
Теперь мы готовы развернуть его. Чтобы развернуть приложение, которое мы должны убедиться, что мы находимся в папке проекта, а затем запускаем эту команду:
netlify deploy
Мы могли бы получить всплывающее окно, которое попросит нас войти в систему с NetLify и предоставлять доступ к NetLify CLI Отказ
Теперь мы нажмем разрешение. Теперь, когда мы авторизованы, мы можем следовать за предложению командной строки для развертывания приложения.
Командные строки подсказки
- В консоли написано, что « эта папка еще не связана с сайтом. Чем бы Вы хотели заняться?” Он хочет знать, хотите ли мы связать этот каталог на существующем сайте или создавать и настроить новый сайт. Поскольку это новый сайт, мы выберем Создайте и настроить новый сайт.
2. Это дает нам возможность дать нашему сайту имя. Я набрал Портфолио на NetLify (Вы можете ввести любое доступное имя, которое вам нравится).
3. Теперь он попросит учетную запись NetLify, которую вы хотите использовать, поэтому я выберу Мой аккаунт (Абхишек Джахар) , вы можете выбрать свой.
4. Теперь в качестве пути развертывания нам необходимо указать каталог сборки нашего проекта, который содержит активы для развертывания. Итак, мы напечатаем строить там и нажмите Enter.
5. Теперь наш сайт будет создан и первым будет развернут проект URL-адреса, который мы можем просматривать, копируя и вставляем URL в браузере.
Теперь, обратно в консоль, он говорит «Если все выглядит хорошо на вашем черновике URL, возьмите его, чтобы жить с флагом –проду» Отказ
Итак, чтобы наше приложение вживую, мы запустим команду, отображаемую в командной строке
netlify deploy --prod
Он спросит нас еще раз, чтобы указать путь развертывания для живой сборки, который снова является нашей папкой сборки.
Теперь на выходе консоли мы получаем два URL. А Уникальный развертывающий URL, который представляет собой уникальный URL для каждого отдельного развертывания, а также Живой URL Что всегда отображает ваше последнее развертывание.
Поэтому каждый раз, когда вы обновляете свой веб-сайт и разверните его, вы получите уникальный URL для этого развертывания. В основном, если мы развертываем несколько раз, мы будем иметь несколько уникальных URL Так что вы можете указать пользователям на Конкретная версия вашего приложения. Но Живой URL всегда отображает ваш Последние изменения в том же URL.
Страница не найдена ошибка
Если вы публикуете приложение, которое использует маршрутизатор, такой как React Router, вам нужно настроить перенаправления и переписать правила для ваших URL. Потому что, когда мы нажимаем на любой навигационный элемент, чтобы изменить страницу (маршрут) и обновить браузер, мы получаем страницу ошибки 404.
Таким образом, NetLify делает настройка перенаправления и перезаписи правил для ваших URL-адресов действительно проще. Нам нужно добавить файл внутри папки сборки нашего приложения имени _redirets. Внутри файла нам необходимо включить следующее правило перезаписи.
/* /index.html 200
Это правило перезаписи будет служить файлу index.html вместо того, чтобы дать 404, независимо от того, какой URL-адрес браузера запросов.
Так что теперь, чтобы просмотреть последние изменения в Live URL, нам нужно развернуть NetLify Deploy Отказ Опять же, мы уточним сборку как путь развертывания. Теперь, когда мы видим живой URL-адрес и обновите приложение после изменения маршрута, мы больше не будем видеть страницу ошибки 404.
Это все, что есть к этому. На NetLify.com вы можете увидеть настройки вашего сайта. Там вы можете сделать такие вещи, как настроить пользовательский домен или подключите сайт к репозиторию GitHub.
NetLify: All-in-One платформа для автоматизации современных веб-проектов Разверните современные статические сайты с NetLify. Получите CDN, непрерывное развертывание, 1-Щелкните HTTPS и все услуги, которые вы … www.netlify.com
Я надеюсь, что вы нашли этот пост информативным и полезным. Я хотел бы услышать ваши отзывы!
Спасибо за чтение!
Оригинал: “https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/”