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

Автор Нельсон Майкл✏️

Простота развертывания статического веб-сайта на GitHub Pages — это процесс, который можно легко перенести на приложения React. С помощью всего нескольких шагов можно легко разместить приложение React на GitHub Pages бесплатно или создать его для развертывания на собственном домене или поддомене.

В этой статье мы рассмотрим, как развернуть React-приложения на GitHub Pages. Мы также продемонстрируем, как создать пользовательский домен на GitHub Pages для нашего статического сайта.

Давайте приступим! Перейти вперед:

  • Предварительные условия
  • Что такое GitHub Pages?
  • Демонстрация развертывания приложения React с помощью GitHub Pages
    • Настройка приложения React
    • Создание репозитория GitHub
    • Размещение приложения React в репозитории GitHub
      • Отслеживание и синхронизация изменений
      • Размещение кода
      • Добавление пакета зависимостей
      • Добавление скриптов развертывания
      • Коммитирование изменений и размещение обновлений кода
  • Добавление пользовательского домена
    • Развертывание на пользовательский поддомен GitHub
    • Развертывание в домене GitHub Apex

Необходимые условия

  • Учетная запись GitHub или ее создание
  • Знакомство с командами Git
  • Установленный Node.js, или вы можете установить его здесь

Что такое GitHub Pages?

GitHub Pages — это сервис от GitHub, который позволяет добавлять HTML, JavaScript и CSS файлы в репозиторий и создавать статический веб-сайт на хостинге.

Веб-сайт может быть размещен на домене GitHub github.io (например, https://username.github.io/repositoryname) или на вашем собственном домене. Приложение React может быть размещено на GitHub Pages аналогичным образом.

Как развернуть приложение React на GitHub Pages

Чтобы развернуть приложение React на GitHub Pages, выполните следующие шаги:

  1. Настройте ваше React-приложение
  2. Создайте репозиторий GitHub для своего проекта
  3. Разместите ваше приложение React в репозитории GitHub.

Настройка React-приложения

Давайте начнем с создания нового приложения React. В этом руководстве мы будем использовать create-react-app, но вы можете настроить проект так, как вам удобно.

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

cd desktop 
Вход в полноэкранный режим Выйти из полноэкранного режима

Создайте React-приложение с помощью команды create-react-app:

npx create-react-app "your-project-name"
Войти в полноэкранный режим Выйти из полноэкранного режима

Всего через несколько минут create-react-app закончит настройку нового React-приложения!

Теперь давайте перейдем в каталог только что созданного проекта React-приложения, как показано ниже:

cd "your-project-name"
Войти в полноэкранный режим Выйти из полноэкранного режима

Это руководство ограничивается демонстрацией того, как развернуть React-приложение на GitHub Pages, поэтому мы оставим текущую настройку как есть, не внося никаких дополнительных изменений.

Создание репозитория GitHub

Следующим шагом будет создание репозитория GitHub для хранения файлов и ревизий нашего проекта.

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

После того как репозиторий будет успешно создан, вы увидите страницу, похожую на эту:

Отлично! Переходим к следующему шагу.

Загрузка приложения React в репозиторий GitHub

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

Отслеживание и синхронизация изменений

Инициализируйте Git с помощью следующей команды:

git init
Войти в полноэкранный режим Выйти из полноэкранного режима

Внесение кода в репозиторий GitHub

Теперь мы зафиксируем наш код и разместим его в нашей ветке на GitHub. Для этого просто скопируйте и вставьте код, полученный при создании нового репозитория (см. скриншот репозитория выше).

git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/nelsonmic/testxx.git
git push -u origin main
Вход в полноэкранный режим Выход из полноэкранного режима

Добавление пакета зависимостей GitHub Pages

Далее мы установим пакет gh-pages в наш проект. Пакет позволяет нам публиковать файлы сборки в ветку gh-pages на GitHub, где они затем могут быть размещены.

Установите gh-pages в качестве dev-зависимости через npm:

npm install gh-pages --save-dev
Войдите в полноэкранный режим Выход из полноэкранного режима

Добавление скриптов развертывания

Теперь давайте настроим файл package.json так, чтобы мы могли указать наш репозиторий GitHub на место, где будет развернуто наше приложение React.

Нам также потребуется добавить скрипты predeploy и deploy в файл package.json. Сценарий predeploy используется для пакетирования React-приложения; сценарий deploy развертывает пакетированный файл.

В файл package.json добавьте свойство homepage, которое должно иметь следующую структуру: http://{github-username}.github.io/{repo-name}.

Теперь добавим скрипты.

В файле package.json прокрутите вниз до свойства scripts и добавьте следующие команды:

"predeploy" : "npm run build",
"deploy" : "gh-pages-d build",
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот визуальная справка:

Вот и все! Мы закончили настройку файла package.json.

Фиксация изменений и отправка обновлений кода в репозиторий GitHub

Теперь давайте зафиксируем наши изменения и отправим код в наш удаленный репозиторий, как показано ниже:

git add .
git commit -m "setup gh-pages"
git push
Вход в полноэкранный режим Выйти из полноэкранного режима

Мы можем развернуть наше React-приложение, просто выполнив команду: npm run deploy. Это создаст собранную версию нашего приложения React и разместит ее в ветке gh-pages в нашем удаленном репозитории на GitHub.

Чтобы просмотреть наше развернутое React-приложение, перейдите на вкладку Settings и нажмите на меню Pages. Вы должны увидеть ссылку на развернутое React-приложение.

Добавление пользовательского домена

Мы можем бесплатно развернуть наше React-приложение на домене GitHub, но Github Pages также поддерживает пользовательские поддомены Apex-доменов. Ниже приведены примеры, показывающие, как выглядит каждый тип поддомена:

Поддерживаемый пользовательский домен Пример
http://logdeploy.com
Пользовательский поддомен app.logdeploy.com
Апекс-домен logdeploy.com

Сейчас, если мы перейдем по адресу https://nelsonmic.github.io/logdeploy/, мы увидим наш недавно опубликованный веб-сайт. Но мы также можем использовать пользовательский поддомен или домен Apex.

Вот шаги по их настройке:

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

  1. Приобретите доменное имя у выбранного вами поставщика доменных услуг (например, Namecheap или GoDaddy).
  2. Подключите пользовательский домен к GitHub Pages. Для этого нажмите на меню Pages на вкладке Settings. Далее прокрутите вниз до поля Пользовательский домен и введите недавно приобретенное доменное имя. Это автоматически создаст коммит с файлом CNAME в корне вашего репозитория.
  3. Убедитесь, что запись CNAME вашего поставщика услуг домена указывает на URL GitHub развернутого сайта (в данном примере nelsonmic.github.io/logdeploy/). Для этого перейдите на страницу управления DNS поставщика услуг домена и добавьте запись CNAME, указывающую на username.github.io, где username — ваше имя пользователя GitHub.

Развертывание в домене GitHub Apex

Для развертывания на домене Apex выполните первые два шага для развертывания на пользовательском поддомене, но замените третий шаг следующим: 3. Перейдите на страницу управления DNS поставщика доменных услуг и добавьте запись ALIAS или ANAME, которая указывает на ваш домен Apex на IP-адреса ваших страниц GitHub, как показано ниже:

  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

Заключение

GitHub Pages прост в освоении и бесплатен в использовании, что делает его очень привлекательным вариантом для разработчиков любого уровня подготовки.

В этой статье мы показали, как использовать GitHub Pages для преобразования приложения React в статический веб-сайт. Мы показали, как развернуть приложение React на домене GitHub, а также на пользовательском поддомене. Если вы ищете простой способ поделиться своим кодом с миром, GitHub Pages — отличный вариант.


Полная видимость производственных приложений React

Отладка приложений React может быть сложной задачей, особенно когда пользователи сталкиваются с проблемами, которые трудно воспроизвести. Если вы заинтересованы в мониторинге и отслеживании состояния Redux, автоматическом обнаружении ошибок JavaScript, отслеживании медленных сетевых запросов и времени загрузки компонентов, попробуйте LogRocket.

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

Пакет промежуточного ПО LogRocket Redux добавляет дополнительный уровень видимости пользовательских сессий. LogRocket регистрирует все действия и состояние ваших хранилищ Redux.

Модернизируйте отладку приложений React — начните мониторинг бесплатно.

Оцените статью
devanswers.ru
Добавить комментарий