Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

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

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

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

Что такое Нетлифай?

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

Основные возможности Netlify

Netlify имеет ряд функций, которые упрощают процесс развертывания.

  • Он предоставляет необходимые функции доступа и контроля версий, позволяющие командам разработчиков эффективно и результативно сотрудничать в проектах.
  • Он предлагает услуги безопасного хостинга, которые вы можете настроить в соответствии со своими потребностями. Кроме того, он обеспечивает автоматическое резервное копирование в случае потери данных.
  • Он легко интегрируется с популярными облачными службами разработки, такими как GitHub, GitLab и Bitbucket.
  • Он предоставляет функции, упрощающие установку и настройку URL-адреса пользовательского домена и SSL-сертификата для вашего приложения.

Создайте демонстрационное приложение React

  1. Для начала вам нужно сначала создать демонстрационное приложение React который вы в конечном итоге развернете на Netlify. Запустите команду ниже на своем терминале, чтобы создать приложение React: 
    npx создать-реагировать-приложение демо-реагировать-netlify-приложение
  2. Затем запустите эту команду терминала, чтобы запустить сервер разработки: 
    запуск нпм
    Идите вперед и просмотрите результаты в своем браузере по адресу http://localhost: 3000.
  3. Наконец, запустите эту команду, чтобы создать готовую к работе версию вашего приложения: 
    npm запустить сборку
    Эта команда создает необходимые производственные файлы и активы в новой папке в корневом каталоге с именем build. Папка сборки содержит уменьшенную версию всего приложения, содержащую все необходимое для развертывания приложения.

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

Netlify предоставляет три метода, которые вы можете использовать для развертывания своего приложения React. Ты можешь:

  • Импортируйте свой проект из хоста репозитория Git, такого как GitHub.
  • Используйте функцию перетаскивания.
  • Используйте инструмент командной строки, CLI Netlify.

Развертывание с помощью функции импорта GitHub

  1. Начать с создание репозитория на GitHub для размещения файлов проекта вашего приложения React. Кроме того, вы также можете разместить файлы проекта в любом другом поддерживаемом поставщике Git, таком как GitLab, Bitbucket или Azure DevOps.
  2. Затем зарегистрируйте учетную запись на Нетлайф. После регистрации перейдите на панель управления учетной записью и выберите Места вкладка
  3. Нажать на Импорт из Git кнопка.
  4. Выберите предпочитаемую платформу поставщика Git. Netlify предложит вам пройти аутентификацию у вашего провайдера Git, чтобы предоставить ему доступ к вашей учетной записи и репозиториям.
  5. Как только вы это сделаете, Netlify отобразит список репозиториев вашего провайдера Git. Выберите репозиторий проекта React, который вы изначально передали своему поставщику Git.
  6. После выбора репозитория вам необходимо указать, как Netlify должен обрабатывать процесс развертывания. Обычно для статических веб-сайтов вам не нужно вносить никаких изменений, однако для динамических веб-сайтов, таких как приложения React, вам придется установить параметры сборки. К счастью, Netlify по умолчанию автоматически определяет структуру, используемую для сборки приложения, и заполняет поля необходимыми настройками сборки.
  7. Наконец, нажмите Развернуть сайт чтобы завершить процесс.

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

Развертывание с помощью функции перетаскивания

Это самый простой способ развернуть ваше приложение React на Netlify. Вам нужно только перетащить папку сборки в пользовательский интерфейс перетаскивания Netlify.

  1. На приборной панели Netlify выберите Сайт вкладка Далее нажмите на Добавить новый сайт а затем выберите Развернуть вручную из вариантов раскрывающегося меню.
  2. На странице функции перетаскивания выберите папку, содержащую файлы сборки React, и перетащите ее в этот пользовательский интерфейс. Проект мгновенно развернется на Netlify. Кроме того, вы можете нажать на Просмотрите, чтобы загрузить чтобы выбрать папку сборки из файловой системы.

Развертывание с использованием интерфейса командной строки Netlify

Используя интерфейс командной строки Netlify (CLI), вы можете развернуть свое приложение React прямо из терминала. Кроме того, интерфейс командной строки Netlify позволяет настроить непрерывное развертывание, чтобы при фиксации и отправке новых обновлений в репозиторий Git они развертывались автоматически.

  1. Запустите команду ниже на своем терминале, чтобы установить интерфейс командной строки Netlify: 
    нпм установить netlify-cli-g
  2. Теперь выполните приведенную ниже команду, чтобы развернуть приложение. Перед развертыванием убедитесь, что вы находитесь в рабочем каталоге проекта. 
    netlify развернуть
    Интерфейс командной строки Netlify предложит вам разрешить внесение изменений в вашу учетную запись. После того, как вы предоставите разрешение, укажите имя учетной записи команды, которую вы указали при регистрации, затем выберите, следует ли связать каталог приложения с существующим веб-сайтом или создать и настроить новый один. Завершите, указав собственное имя веб-сайта и имя папки сборки.
  3. CLI развернет черновую версию вашего приложения. Убедитесь, что все работает как положено.
  4. Наконец, выполните приведенную ниже команду, чтобы развернуть приложение в рабочей среде. 
    netlify развернуть --prod

Сравнение трех методов развертывания

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

Метод перетаскивания проще для развертывания статических сайтов, так как не требует кодирования или настройки. Однако он не позволяет выполнять автоматические обновления при внесении изменений в репозиторий.

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

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

Использование Netlify для развертывания других приложений

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

Удобный интерфейс упрощает настройку, управление и развертывание ваших API.