Помните время, когда вы пытались поделиться прогрессом с клиентом или хотели продемонстрировать свои следующие побочные проекты? Мы все были там, надеясь, что все может быть всего в нескольких кликах.
Не бойтесь, ваши пожелания были удовлетворены, теперь есть бесплатный и простой подход к развертыванию ваших приложений React.
gh-страницы
Представляю вам gh-pages, которые, как я цитирую, позволяют публиковать файлы в ветке gh-pages на GitHub (или в любой другой ветке где-либо еще).
Пакет автоматизирует рутинный шаг, необходимый для развертывания вашего реагирующего приложения на GitHub Pages, в три простых шага.
Технически этот пакет может помочь вам развернуть любой статический сайт, если базовый каталог статических файлов установлен соответствующим образом — подробнее об этом в шаге 2.
Шаг 1. Добавьте homepage к package.json
Описанный ниже шаг важен!
Если вы пропустите это, ваше приложение не будет правильно развернуто.
Откройте package.json и добавьте поле homepage для своего проекта:
“homepage”: “https://myusername.github.io/my-app",
или для пользовательской страницы GitHub:
“homepage”: “https://myusername.github.io",
или для страницы пользовательского домена:
“homepage”: “https://mywebsite.com",
Приложение Create React использует поле homepage для определения корневого URL-адреса в созданном HTML-файле.
Шаг 2. Установите gh-pages и добавьте deploy к scripts в package.json
Теперь при каждом запуске npm run build вы будете видеть шпаргалку с инструкциями по развертыванию на страницах GitHub.
Чтобы опубликовать его на https://myusername.github.io/my-app, запустите:
npm install — save gh-pages
В качестве альтернативы вы можете использовать yarn:
yarn add gh-pages
Добавьте следующие скрипты в свой package.json:
“scripts”: {
+ “predeploy”: “npm run build”,
+ “deploy”: “gh-pages -d build”,
“start”: “react-scripts start”,
“build”: “react-scripts build”,
Сценарий predeploy запустится автоматически перед запуском deploy.
Сценарий deploy автоматически развернет ваше приложение.
Примечание. Опция -d предназначена для установки базового каталога статических файлов. Установите его в соответствии с конфигурацией вашего проекта. Например, базовым каталогом по умолчанию для create-react-app является build, а для конфигурации webpack — dist.
Если вы выполняете развертывание на странице пользователя GitHub вместо страницы проекта, вам потребуется внести еще одно изменение:
Настройте свои package.json скрипты, чтобы подталкивать развертывания к мастеру:
“scripts”: {
“predeploy”: “npm run build”,
- “deploy”: “gh-pages -d build”,
+ “deploy”: “gh-pages -b master -d build”,
Шаг 3. Разверните сайт, запустив npm run deploy
Затем запустите:
npm run deploy
Для страницы проекта убедитесь, что в настройках вашего проекта используется gh-pages
Наконец, убедитесь, что для параметра GitHub Pages в настройках вашего проекта GitHub установлено использование ветки gh-pages:
При желании настройте домен
Вы можете настроить собственный домен с помощью GitHub Pages, добавив файл CNAME в папку public/.
Ваш файл CNAME должен выглядеть так:
Копировать
mywebsite.com
Ресурсы
Для получения более подробной информации ознакомьтесь с репозиторием или создайте документацию приложения React, на которой основано это руководство.
