Разверните свое приложение React бесплатно и без проблем

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

Вы создали приложение React, и теперь пора его развернуть, чтобы мир увидел ваш проект. Вы можете рассмотреть такие облачные платформы, как AWS, Azure, Google Cloud, Heroku и т. Д. Однако самый простой и быстрый способ - развернуть приложение React на GitHub Pages, и в этой статье описаны шаги, как сделать это.

Страницы GitHub

Размещается прямо из вашего репозитория GitHub. Просто отредактируйте, нажмите, и ваши изменения вступят в силу.

Предпосылки

Перед тем как начать, убедитесь, что вы соответствуете следующим требованиям:

1. У вас есть учетная запись GitHub.
2. На вашем компьютере установлен Git.
3. На вашем компьютере установлен Node.js.

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

Шаг 1 - создайте приложение React

Если у вас еще нет готового приложения, создайте его с помощью Create React App:

npx create-react-app my-react-app

Шаг 2 - установите gh-pages

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

npm install gh-pages --save-dev

Шаг 3 - подключите репозиторий GitHub

• Создать новый репозиторий GitHub
• находясь в корне вашего проекта, добавьте новый репозиторий как удаленный, запустив: git remote add origin https://github.com/{YOUR-GITHUB-USERNAME}/{YOUR-GITHUB-REPOSITORY}.git

Шаг 4 - обновите package.json

Добавьте новое свойство homepage в package.json:

"homepage": "https://{YOUR-GITHUB-USERNAME}.github.io/{YOUR-GITHUB-REPOSITORY}"

Добавить новый scripts для развертывания:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

Сценарий predeploy подготавливает все ресурсы и создает приложение и всегда запускается перед сценарием deploy.

Затем сценарий deploy публикует все, начиная с папки build и заканчивая веткой gh-pages. Эта ветка является одним из источников публикации для GitHub Pages.

Шаг 5 - разверните приложение

Теперь у вас всего одна команда до развертывания приложения. Просто запустите deploy скрипт npm, чтобы поделиться своим проектом со всеми:

npm run deploy

После успешного запуска скрипта ваше приложение должно быть активным: https: // {YOUR-GITHUB-USERNAME} .github.io / {YOUR-GITHUB-REPOSITORY}

Обратите внимание, что отображение вашей страницы по этому URL-адресу может занять около часа.

Заключение

1. Создать приложение React
2. Установить gh-pages
3. Создайте репозиторий GitHub
4. Обновите package.json с помощью homepage и scripts
5. Запустите сценарий deploy npm

Ваше приложение запущено! 🎉

Тебе может понравиться