Развертывание приложений React в Netlify

от Эджиро Танкгод

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

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

Что такое Netlify и зачем его использовать?

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

Преимущества Netlify многочисленны, и вот лишь некоторые из них:

Netlify экономит деньги с течением времени, потому что требуется меньше денег для настройки и обслуживания статического веб-сайта.
Netlify позволяет вам предварительно просмотреть любые развертывания, которые вы делаете или хотите сделать, чтобы вы и ваша команда могли видеть, как изменения будут выглядеть в производственной среде, без необходимости развертывания их на вашем текущем веб-сайте.
Netlify повышает скорость сайта за счет глобального распространения и автоматического предварительного рендеринга.
Мы можем быстро развернуть только определенную ветку нашего проекта Git — в этом есть несколько преимуществ, в том числе тестирование новых функций или быстрый просмотр того, как запрос на вытягивание повлияет на ваш сайт.
Netlify упрощает развертывание веб-сайта, особенно если вы используете GitHub, GitLab или Bitbucket для непрерывного развертывания.
Встроенное решение Netlify для управления DNS упрощает запуск веб-сайтов.

Начиная

В этом руководстве мы развернем приложение для визуализации данных в Netlify. Это простое приложение React, которое отображает данные в виде визуальных элементов, таких как круговые диаграммы и гистограммы, с помощью пакета react-google-chart.

Давайте рассмотрим некоторые требования для использования Netlify, прежде чем мы начнем:

У вас должна быть учетная запись у любого поставщика Git, например GitHub, GitLab или Bitbucket.
Npm предустановлен вместе с Node или Yarn, поэтому, если у вас есть Node, у вас есть npm.
Тем не менее, вам может быть полезно иметь базовое представление о терминале.

Начнем…

Отправить на Github

Прежде чем мы сможем опубликовать наши веб-сайты в Netlify, мы должны опубликовать наше приложение React в GitHub с помощью командной строки в нашем терминале.
Во-первых, давайте создадим репозиторий GitHub. Мы перейдем на нашу страницу GitHub и нажмем New Repository.

Укажите необходимую информацию и нажмите «Создать репозиторий»:

Давайте вернемся к терминалу и начнем с подготовки всех наших файлов, чтобы мы могли зафиксировать их в репозитории. Затем используйте следующие инструкции для создания новой ветки с именем main:

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main

Как только это будет завершено, мы можем использовать следующие команды, чтобы отправить наше приложение React во вновь сформированный удаленный репозиторий:

$ git remote add origin https://github.com/username/git-repo.git
$ git push -u origin main

Как только все это будет сделано, мы получим успешное сообщение, подобное приведенному выше.

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

Развертывание приложения для Netlify

Netlify предлагает бесплатный план (как показано на изображении ниже). Создайте учетную запись или войдите в систему любым из способов, указанных на странице входа.

Мы развернем наше приложение в Netlify, используя как метод перетаскивания, так и метод импорта проекта после входа в систему с нашей панели управления Netlify.

Разверните приложение React с помощью перетаскивания

Мы начнем с создания версии сборки нашего реагирующего приложения, выполнив следующую команду:

$ npm run build

Примечание: причиной запуска команды npm run build является тот факт, что методы перетаскивания работают только со статическими файлами, такими как HTML, CSS и JavaScript, которые можно получить при выполнении вышеуказанной команды.

Готовые к производству файлы (те, которые мы будем использовать для загрузки методом перетаскивания в Netlify) будут найдены в нашей папке сборки, которая будет создана после успешного завершения.

На нашей странице обзора Netlify выберите « Добавить новый сайт»› « Развернуть вручную». Это отправит нас на страницу, где мы поместим наши статические файлы. Пока мы вошли в систему, мы также можем просматривать страницу перетаскивания из этого места.

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

Повтор сеанса с открытым исходным кодом

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

Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.

Импорт проекта в Netlify

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

В этом методе первым шагом будет посещение веб-сайта нашей команды Netlify и выбор « Добавить новый сайт»> « Импортировать существующий проект», как показано ниже.

После этого он направит нас на экран, где мы можем выбрать поставщика Git, на котором размещен исходный код вашего веб-сайта или приложения. В нашей ситуации мы выбрали GitHub. Теперь, когда репозиторий GitHub разрешен, мы можем его найти:

Теперь, когда мы нашли проект, мы можем позаботиться о развертывании. Это приводит нас к экрану, где, например, мы можем указать, какую ветку мы хотим развернуть, если мы тестируем конкретную версию. Кроме того, мы можем указать команду сборки и местоположение файла сборки на этой странице (это автоматически обрабатывается Netlify, за исключением случаев, когда мы хотим это изменить). После завершения мы нажимаем кнопку «Развернуть сайт».

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

Разверните приложение React для Netlify с Netlify CLI

Мы можем развернуть наше приложение прямо из командной строки, используя интерфейс командной строки Netlify (CLI), и мы можем настроить непрерывное развертывание, чтобы Netlify развертывал новые версии нашего сайта всякий раз, когда мы отправляем коммиты в соответствующий репозиторий Git.

Первым шагом будет установка CLI с помощью следующей команды:

$ npm install netlify-cli -g

С помощью этой команды Netlify будет установлен глобально. Запустите следующую команду из корневого каталога проекта, если вы хотите локально установить Netlify CLI:

$ npm install netlify-cli --save-dev

Выполнение следующей команды из любого каталога — это первый шаг в развертывании нашего приложения React с использованием Netlify CLI. Для аутентификации и получения токена доступа.

$ netlify login

Чтобы аутентифицировать нас и предоставить нам доступ к Netlify CLI, откроется вкладка браузера:

Используя команду deploy, мы теперь можем развернуть наше приложение, если это было успешно:

$ netlify deploy

Это вызовет следующие вопросы об установке:

Нажмите «создать и настроить новый сайт», так как мы впервые развертываем Netlify:

Вам будет предложено выбрать «команду», как мы, в качестве «имени сайта» (вы можете изменить это позже, если хотите).

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

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

Поэтому мы будем использовать следующую команду для публикации нашего приложения:

$ netlify deploy --prod

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

Обнаружить ошибку

Мы должны настроить перенаправления и переписать правила URL, если мы используем маршрутизатор, такой как React Router. Потому что всякий раз, когда мы нажимаем на любой элемент навигации, чтобы изменить страницу (маршрут) и обновить браузер, мы получаем страницу ошибки 404, подобную приведенной ниже.

В результате Netlify упрощает настройку перенаправлений и правил перезаписи для наших URL-адресов. Чтобы это происходило автоматически, мы поместим файл с именем _redirects в папку public и добавим его в папку сборки нашего приложения. Файл должен иметь следующее правило перезаписи:

/*    /index.html   200

Независимо от того, какой URL-адрес запрашивает браузер, упомянутое выше правило перенаправления доставляет index.html, а не возвращает ошибку 404. Правила перенаправления можно добавить в файл конфигурации netlify.toml или файл _redirects.

Лучший вариант для развертывания

Все первые три метода помогают в развертывании, но последние два также помогают в других функциях, таких как непрерывное развертывание, развертывание определенных ветвей, управление тестированием и т. д.

Интерфейс перетаскивания удобен, когда вы хотите быстро опубликовать файлы сборки, не загружая свой код в какие-либо поставщики Git. Под капотом Netlify Dashboard и CLI выполняют одни и те же задачи. Вам не придется иметь дело с ненужной навигацией, потому что Netlify CLI принимает все команды через понятный терминал, и вы можете ожидать, что он будет меняться реже, чем веб-страница.

Идеальный вариант зависит от конкретных предпочтений разработчика, при этом многие предпочитают импортировать проекты в метод Netlify из-за его удобного пользовательского интерфейса для большинства начинающих/студентов-разработчиков.

Заключение

В этом руководстве продемонстрированы три простых метода быстрого развертывания проекта React в Netlify: пользовательский интерфейс перетаскивания, интерфейс командной строки Netlify и панель мониторинга Netlify. Мы также узнали, как решить проблемы 404, когда маршрутизатор используется в проекте React.

Ресурсы

СОВЕТ ОТ РЕДАКТОРА. Если вместо этого вы хотите развернуть приложение Vue, ознакомьтесь с нашей статьей Пошаговое руководство по созданию и развертыванию приложения Vue JS с помощью Netlify.

Первоначально опубликовано на blog.openreplay.com 23 сентября 2022 г.