gh-pages -d build

Продолжая свой предыдущий пост Отображение данных о местоположении с помощью Mapbox, я искал варианты бесплатного размещения приложения в Интернете. Первоначально я думал об использовании Amazon Web Services для размещения своего приложения с их уровнем бесплатного пользования. Но 750 часов в месяц использования экземпляра EC2 в конечном итоге закончились бы, если бы у меня было запущено и работало более одного экземпляра. Использовать AWS для размещения моего приложения React было невозможно, так как я искал постоянное бесплатное решение.

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

Вот как я опубликовал свое приложение React на страницах GitHub.

Есть несколько способов разместить приложение React на страницах GitHub. Во-первых, вручную создайте ветку с именем gh-pages и используйте эту ветку для создания страниц GitHub для репозитория. Второй вариант - использовать пакет npm, gh-pages, который, по сути, сделает всю тяжелую работу.

Вариант 1 - трудный путь

Следуя документации страниц GitHub, я создал новую ветку gh-pages в моем локальном репозитории.

git checkout -b gh-pages

Обновите package.json файл и добавьте homepage ключ, указывающий на: https://<github_username>.github.io.<repository_name>/

homepage: "https://chandankkrr.github.io/this-is-too-much-data/"

Затем выполните команды npm install и build , чтобы установить зависимости и построить проект.

npm install
npm run build

После выполнения команды сборки в корневом каталоге проекта создается папка сборки. На этом этапе я подтолкнул свою ветку к источнику, затем перешел к настройке репозитория в GitHub и использовал ветку gh-pages в качестве источника для страниц GitHub.

Я был взволнован, увидев, все ли настроено правильно и приложение работает на страницах GitHub, но после перехода на https://chandankkrr.github.io/this-is-too-much-data все, что я нашел, было содержимое файла Readme.md, отображаемое на странице с темой по умолчанию.

Я думаю, причина того, что содержимое файла readme было отображено вместо запущенного приложения, заключается в том, что GitHub не может определить, что ему нужно для обслуживания файла из папки сборки. По сути, он ищет файлы для обслуживания из корневого каталога.

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

mv build/* .
rm -rf ./build

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

git add .
git commit -m "Build files for GitHub pages"
git push

Наконец, после того, как изменения были перенесены в GitHub, я снова проверил настройки репозитория, чтобы убедиться, что ветка gh-pages по-прежнему является источником страниц GitHub.

Перейдя на https://chandankkrr.github.io/this-is-too-much-data, я вижу, что приложение запущено и работает.



Приложение React
Отображение данных истории местоположений Google с использованием Mapbox и React chandankkrr.github.io



Вариант 2. Простой способ

Второй вариант публикации приложения React на страницах GitHub - использование пакета npm gh-pages.

Пакет npm может публиковать файлы в gh-pages ветке на GitHub. Я установил пакет и выполнил сборку, выполнив следующую команду npm.

npm install gh-pages

После установки я обновил свой package.json файл, включив команду deploy в сценарии.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
}

Пакет требует, чтобы свойство домашней страницы присутствовало в файле package.json. Это используется gh-страницами для размещения файлов на определенном URL-адресе сервера.

homepage: "https://chandankkrr.github.io/this-is-too-much-data/"

Файл package.json выглядит следующим образом

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

npm run deploy

Я снова проверил настройки репозитория, чтобы убедиться, что ветка gh-pages по-прежнему является источником страниц GitHub. Приложение React было запущено и работало.

Я столкнулся с проблемой, из-за которой запуск команды развертывания не работал. По какой-то причине я получал несанкционированное исключение. После устранения проблемы я получал сообщение об ошибке "15_ уже существует".

После проверки на странице репозитория npm в разделе советы упоминается следующее.

При получении ошибки branch already exists

{ ProcessError: fatal: A branch named 'gh-pages' already exists.
at ChildProcess.<anonymous> (~/node_modules/gh- pages/lib/git.js:42:16)
at ChildProcess.emit (events.js:180:13)
at maybeClose (internal/child_process.js:936:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
code: 128,
message: 'fatal: A branch named \'gh-pages\' already exists.\n',
name: 'ProcessError' }

фатальный: ветка с именем gh-pages уже существует.

При обработке gh-pages, модуль генерирует файл in.cache/, и если он застрял по какой-либо причине, например из-за неправильного пароля, он не будет автоматически очищать

Запустите ~node_modules/gh-pages/bin/gh-pages-clean или удалите ~node_modules/gh-pages/.cache

Заключение

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

Ваши приложения работают на страницах GitHub? Пожалуйста, поделитесь 🙏