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

Предварительные требования:

  • Приложение React, размещенное на GitHub
  • Аккаунт GitHub Pro для размещения приватного кода (подробнее об этом позже)

Я предполагаю, что ваше приложение React запущено и работает и размещено в репозитории GitHub.

Давайте начнем

  1. Установите gh-pages пакет npm

Мы будем использовать пакет gh-pages для быстрого развертывания нашего приложения, установим зависимость gh-pages as dev, выполнив следующую команду в терминале.

$ npm install gh-pages --save-dev

2. Добавить свойство главной страницы в package.json файл

Нам нужно установить свойство homepage в package.json, это должен быть URL-адрес, на котором будет размещен ваш сайт, в зависимости от вашего проекта, это может быть сайт пользователя или сайт проекта, формат для обоих следующий:

  • сайт пользователя: https://{username}.github.io
  • сайт проекта: https://{username}.github.io/{repo-name}

Например, мое имя пользователя prathamesh-mutkure, поэтому свойство моей домашней страницы должно быть https://prathamesh-mutkure.github.io.

Теперь ваш package.json должен выглядеть примерно так:

{
"homepage": "https://prathamesh-mutkure.github.io",
"name": "personal-site",
"version": "0.1.0",
"private": true,
...
}

3. Добавьте сценарии развертывания в файл package.json

Теперь добавьте сценарии predeploy и deploy к свойству scripts в файле package.json, который теперь должен выглядеть так:

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

4. Разверните приложение React

Наконец, выполните следующую команду, чтобы развернуть приложение:

$ npm run deploy

Поздравляем, ваше приложение для реагирования теперь работает 🥳

Пользовательский домен

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

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

Частный код хостинга

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

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

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

Удачного взлома, Пратамеш :)

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.