Часть 12. Подготовка приложения React к развертыванию на Netlify
Прямые заметки разработчиков, сделанные на протяжении следующего урока Денниса Айви — Ускоренный курс React JS
В заключительной части этой серии ускоренных курсов мы рассмотрим создание нашего приложения React, чтобы оно было готово к развертыванию. В процессе мы рассмотрим тестирование сборки, а также способы развертывания в Netlify и обработку ошибок, которые могут возникнуть.
Создание нашего React-приложения
Прежде чем мы развернем приложение React на Netlify, нам нужно проверить, что когда мы создаем приложение, оно работает так же, как и при разработке. Для этого мы сначала запустим следующую команду:
npm run buildЭто создаст оптимизированную версию приложения, состоящую из набора файлов HTML, CSS и JS (также известных как статические файлы), которые будут находиться внутри вновь созданной папки build в нашем проекте.
Создав наше приложение React, мы можем проверить, действительно ли оно работает, сначала установив пакет serve глобально.
npm install -g serveУстановив статический сервер, давайте протестируем наш построенный проект с помощью следующей команды:
serve -s buildОднако, если ваш проект разработки все еще работает на порту 3000 по умолчанию, вы можете указать порт для обслуживания построенного проекта, используя флаг -p. В данном случае он был установлен на PORT 5000.
serve -s build -p 5000Примечание: любые изменения, которые мы вносим в наши рабочие файлы, расположенные в папке src, не будут автоматически отображаться в нашем встроенном приложении. Чтобы увидеть эти изменения, нам нужно будет перестроить наше приложение, чтобы повторно связать и заменить наши текущие статические файлы.
После того, как наш построенный проект успешно обслужен и протестирован, давайте развернем его на Netlify. Убедитесь, что у вас есть учетная запись в Netlify, прежде чем мы начнем.
Вариант развертывания Netlify 1 — перетаскивание
Самый простой (но наименее эффективный способ — в долгосрочной перспективе) развертывания в Netlify — создать новый проект, а затем перетащить папку build прямо в проект.
После завершения загрузки сайт автоматически сгенерируется и будет готов к работе!
Примечание. Когда сайт создается на Netlify, он будет создан со случайным URL-адресом. Но вы можете изменить это через настройки домена. Просто убедитесь, что имя, которое вы хотите, еще не занято!
Если ваш локальный сервер JSON все еще работает в фоновом режиме, развернутое приложение продолжит получать заметки. В противном случае, по умолчанию, если этот сайт был открыт для других людей, они не смогли бы использовать приложение должным образом — потому что они не могут подключиться к вашему локальному серверу через порт 8000.
Вариант развертывания Netlify 2 — развертывание из Github
Второй метод требует немного больше времени для настройки, но это идеальный процесс для развертывания в течение длительного периода времени, когда вносятся изменения.
Для начала вам необходимо зафиксировать код вашего проекта в репозитории Github. Вы также можете сделать это, создав пустой репозиторий Github, который затем предоставит список инструкций по использованию Github CLI для отправки существующего кода в репозиторий.
Отсюда мы вернемся к Netlify и создадим новый проект, выбрав «Импорт из существующего проекта».
В этом случае мы выберем Github, где он поможет нам войти в Github и предоставить Netlify разрешение на доступ к нашим проектам. В моем случае я дал ему разрешение только на репозиторий приложения notes.
Далее нас встретят настройки сайта для нашего приложения. Прокрутив вниз, мы увидим, что Netlify предоставил нам команду сборки — ту же команду, которую мы используем для сборки нашего приложения React. Это означает, что когда мы развертываем приложение, оно будет вызывать команду сборки, так что нам не нужно этого делать. Все, что ему нужно, это файлы проекта, с которыми мы работали до сих пор. Кроме того, поскольку я включил файл .gitignore для узла, у него уже была встроенная ссылка для игнорирования папки сборки при отправке любых изменений в мой репозиторий Github.
Я также выбрал ветку production (на скриншоте она обозначена как master). Таким образом, я могу разделить рабочий процесс сборки при работе с веткой main/master.
В этот момент имеет смысл нажать Deploy Site, что мы и делаем. Но дело в том, что Netlify, скорее всего, вернет некоторые ошибки (которые фактически являются предупреждениями, когда мы просматриваем их в процессе разработки).
Чтобы исправить это, мы собираемся обновить переменную среды непрерывной интеграции, предоставленную Netlify, на false, поскольку в настоящее время она обрабатывает эти предупреждения как ошибки. Неиспользуемый неиспользуемый пакет считается предупреждением в React, поэтому Netlify будет рассматривать это как ошибку в процессе развертывания Netlify.
Цель этих ошибок, поступающих от Netlify, — помочь нам лучше поддерживать наш код, но для небольшого тестового проекта это не критическая проблема, которую необходимо решать.
Чтобы заставить Netlify игнорировать эти незначительные предупреждения, мы перейдем к:
Site settings > Build & deploy > Build settings
Внутри нашей команды сборки мы включим в начале следующее:
CI= npm run buildЭто эффективно установит непрерывную интеграцию в false.
После обновления команды сборки мы можем повторно развернуть приложение.
Вот моя живая демонстрация:
Вот мой репозиторий на Github:
Заключительные мысли
Вся эта серия руководств была посвящена созданию простого приложения для заметок, созданного с помощью приложения create-реагировать. В процессе мы научились создавать компоненты, страницы и маршруты React, которые работают с данными JSON. Чтобы проверить, может ли это приложение работать с серверной частью, мы создали макет сервера API с пакетом json-server.
Поскольку серверная часть была создана с использованием фиктивного сервера API, который хранит данные в файле JSON, окончательное развернутое нами приложение не считается полностью функционирующим. Вместо этого он может работать только тогда, когда на порту 8000 открыт локальный сервер JSON.
Конечно, другой альтернативой может быть изменение источника с локального сервера JSON на использование API localStorage, о котором я писал в разделе «Заметки — бизнес-логика» здесь:
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
