GitHub — популярная платформа для размещения и обмена репозиториями кода. В этом руководстве мы рассмотрим, как развернуть приложение React на GitHub с помощью GitHub Pages.
Вот краткое изложение шагов, которые мы рассмотрим:
- Создайте новый репозиторий на GitHub и инициализируйте его файлом README.
- Перейдите в корневой каталог вашего приложения React в терминале.
- При необходимости создайте файл package.json, запустив
npm init
. - Установите пакет gh-pages, запустив
npm install --save gh-pages
. - Добавьте необходимые сценарии в файл package.json.
- Замените «my-app» в поле
homepage
вашего файла package.json на имя вашего репозитория. - Зафиксируйте свой код и отправьте его в репозиторий GitHub.
- Запустите
npm run deploy
, чтобы развернуть приложение на страницах GitHub.
Давайте углубимся в детали каждого шага.
1. Создайте новый репозиторий на GitHub
Для начала войдите в свою учетную запись GitHub и создайте новый репозиторий. Дайте вашему репозиторию имя и инициализируйте его файлом README.
2. Перейдите в корневой каталог вашего приложения React.
Затем откройте терминал и перейдите в корневой каталог вашего приложения React. Здесь находится файл package.json.
3. Создайте файл package.json (при необходимости)
Если в вашем приложении React нет файла package.json, вы можете создать его, выполнив следующую команду в своем терминале:
npm init
Вам будет предложено ввести некоторую информацию о вашем проекте, такую как имя и версия. Вы можете нажать Enter, чтобы принять значения по умолчанию для большинства этих полей.
4. Установите пакет gh-pages
Чтобы развернуть ваше приложение React на страницах GitHub, нам понадобится пакет gh-pages. Вы можете установить этот пакет, выполнив следующую команду в своем терминале:
npm install --save gh-pages
Это добавит пакет gh-pages в зависимости вашего проекта в файле package.json.
5. Добавьте необходимые скрипты в файл package.json
Чтобы упростить развертывание приложения, вы можете добавить следующие сценарии в файл package.json:
"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }
Эти сценарии позволяют развернуть приложение, выполнив команду npm run deploy
. Сценарий predeploy
запускает сценарий build
, который создает готовую к работе версию вашего приложения в каталоге build
. Затем сценарий deploy
использует пакет gh-pages для развертывания содержимого каталога build
на страницах GitHub.
6. Обновите поле homepage
в файле package.json.
Затем вам нужно обновить поле homepage
в файле package.json, чтобы оно соответствовало URL-адресу вашего сайта GitHub Pages. Замените «мое приложение»
"homepage": "https://{your_username}.github.io/{your_repository_name}"
Это сообщает сценарию сборки, где найти развернутое приложение.
7. Зафиксируйте свой код и отправьте его в свой репозиторий GitHub
Прежде чем вы сможете развернуть свое приложение, вам необходимо зафиксировать свой код и отправить его в свой репозиторий GitHub. Вы можете сделать это, выполнив следующие команды в своем терминале:
git add . git commit -m "Initial commit" git push origin master
8. Разверните свое приложение на страницах GitHub
Наконец, чтобы развернуть приложение на страницах GitHub, выполните в терминале следующую команду:
npm run deploy
Это запустит сценарии predeploy
и deploy
, которые мы ранее добавили в файл package.json. Когда развертывание будет завершено, вы должны увидеть сообщение о том, что ваше приложение опубликовано.
Теперь ваше приложение React должно быть доступно по адресу https://{your_username}.github.io/{your_repository_name}.
Вот и все! Вы успешно развернули свое приложение React на GitHub. Всего за несколько простых шагов вы можете поделиться своим приложением со всем миром и продолжать вносить обновления по мере его дальнейшей разработки.