Этот пост изначально был опубликован на моем сайте jakenherman.com.

Судя по подзаголовку, это «Часть 1». В этой серии мы собираемся создать приложение реагирования на листинг рынка сообщества для MLB The Show 19 и настроить автоматический конвейер для создания и развертывания нашего приложения React из репозитория GitHub в Heroku Dyno. В этом посте мы создадим приложение для реагирования и настроим автоматическое развертывание для Heroku, что подготовит нас к созданию компонентов, необходимых для перечисления всех списков для рынка сообщества MLB The Show 19. Почему MLB The Show 19? Потому что… это *бейсбол*. Если вы не знакомы с MLB The Show 19 — это бейсбольная видеоигра для PlayStation 4, в которой есть рынок сообщества, который позволяет игрокам размещать бейсбольные карточки, стадионы и оборудование, которое другие игроки могут купить для своей команды. В этом проекте мы будем создавать списки только для бейсбольных карточек (то есть игроков), а не для стадионов, оборудования или чего-либо еще. Если вас это интересует, я настоятельно рекомендую вам расширить приложение, чтобы оно соответствовало вашим потребностям.

Первое, что нам нужно сделать, чтобы начать, — это создать репозиторий GitHub, чтобы иметь контроль над исходным кодом нашего приложения и иметь место для хранения нашего кода. Для этого перейдите на GitHub.com и создайте репозиторий GitHub. Затем, чтобы получить этот репозиторий на вашем локальном компьютере, используйте либо программу git GUI, либо просто используйте интерфейс командной строки и выполните следующее:

git clone https://www.github.com/‹путь_к_вашему_проекту›

Затем измените каталоги на свой репозиторий GitHub, выполнив:

компакт-диск ‹your_project_name›

Следующее, что нам нужно сделать, это разобраться с сутью приложения. Нам нужно что-то построить, чтобы поместить в наш недавно созданный репозиторий GitHub. Для этого нам нужно создать новое реагирующее приложение. Откройте интерфейс командной строки и выполните команду:

npx create-реагировать-приложение mlb-the-show-community-market-lists

Эта команда установит `react`, `react-dom`, `react-scripts` и несколько других пакетов, которые вы найдете полезными. `create-react-app` — это поддерживаемый facebook способ создания одностраничных приложений React, который используют многие люди в сообществе фронтенда. В отличие от next, razzle и нескольких других популярных серверных фреймворков для рендеринга, CRA рендерит контент на стороне клиента, что может иметь некоторые недостатки в производительности, но нас это не обязательно беспокоит в рамках данного проекта.

Теперь, когда ваше приложение создано, давайте просто остановимся на этом — мы внесем изменения в код в следующем посте. На данный момент мы собираемся проверить проект как есть. Итак, через какой-нибудь графический интерфейс git или командную строку зафиксируйте свои изменения и отправьте свой код в свой репозиторий GitHub:

git add .
git commit -m ‘начальный коммит’
git push origin master

Мы хотим, чтобы Heroku Dyno перестраивал наше приложение каждый раз, когда в ветку master в нашем репозитории GitHub вносятся изменения. Но прежде чем мы это настроим, нам нужно создать конвейер Heroku! Предполагая, что у вас уже есть созданное приложение Heroku, перейдите на страницу dashboard.heroku.com/apps, затем выберите «Создать», а затем «Создать новый конвейер». В поле ввода имени конвейера введите «mlb-the-show-cm-listings». Затем назначьте себя владельцем конвейера, затем в области с надписью «Подключиться к GitHub» подключите свою учетную запись GitHub к этому конвейеру Heroku. После того, как вы подключили свою учетную запись GitHub, выберите репозиторий GitHub, который мы создали ранее в посте, выполнив поиск по имени репозитория, затем нажмите кнопку «Подключить». После подключения репозитория GitHub нажмите кнопку «Создать конвейер».

После того, как ваш конвейер будет создан, вы увидите страницу, состоящую из трех «шагов»: «Проверка приложений», «Стадия», «Производство». На карточке под этапом «Подготовка» нажмите кнопку «Добавить приложение…», а затем фиолетовую кнопку «Создать новое приложение…». В названии приложения вам придется что-то придумать самостоятельно, так как имена приложений heroku должны быть уникальными. После того, как вы определились с именем, нажмите кнопку «Создать приложение», чтобы завершить создание приложения.

Теперь в области «Промежуточная» карточка, которую вы видите, будет содержать только что созданное приложение. Нажмите на название своего приложения в области «Staging», чтобы открыть приложение Heroku, затем перейдите в «Настройки». Прокрутите вниз, пока не увидите раздел с надписью «Buildpacks». Нажмите фиолетовую кнопку «Добавить пакет сборки», затем выберите пакет сборки «nodejs» из списка официально поддерживаемых пакетов сборки, затем нажмите «Сохранить изменения».

Затем перейдите от «Настройки», щелкнув вкладку «Развернуть». Прокрутите вниз, пока не дойдете до раздела «Автоматическое развертывание». Нажмите серую кнопку «Включить автоматическое развертывание». Вы увидите, как текст изменится, чтобы прочитать

Включены автоматические развертывания с `master`

Теперь нам просто нужно запустить развертывание. Давайте внесем изменения в наш проект и зафиксируем/отправим изменения, чтобы активировалось развертывание Heroku.

Откройте папку `src` вашего приложения React, которое мы создали ранее в этом посте, и в `App.js` измените строку, которая говорит:

‹p›
Отредактируйте ‹code›src/App.js‹/code› и сохраните для перезагрузки.
‹/p›

to

‹h1›Привет, Героку!‹/h1›

Затем с помощью графического интерфейса git или командной строки внесите изменения и отправьте код в репозиторий GitHub:

git add .
git commit -m ‘запустить развертывание heroku’
git push origin master

Теперь перейдите на страницу активности вашего приложения heroku, чтобы узнать, была ли запущена сборка: `https://dashboard.heroku.com/apps/‹your_app_name›/activity». Если сборка не удалась из-за сообщения, похожего на это

Для приложения Node.js на Heroku требуется файл package.json в корне структуры каталогов.

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

Другой распространенной проблемой является наличие устаревшего файла блокировки Yarn, поэтому, если у вас по-прежнему возникает ошибка сборки, перейдите в свою командную строку (в каталоге вашего приложения для реагирования) и выполните следующие команды:

yarn install
git add yarn.lock
git commit -m ‘обновленный файл блокировки пряжи’
git push origin master

Если у вас нет сбоя, вы некоторое время будете видеть сообщение «Выполняется сборка…», которое затем изменится на «Сборка выполнена успешно». Как только вы получите «Сборка выполнена успешно», в вашей ленте активности будет создана новая активность с надписью «Развернуто `SHA_OF_YOUR_COMMIT`».

Так что это здорово — мы настроили динамометр Heroku для автоматического развертывания нашего реагирующего приложения при внесении изменений. Единственная проблема заключается в том, куда он развертывается? Перейдите от вкладки «Активность» и снова перейдите в «Настройки». Прокрутите вниз, пока не увидите «Домены и сертификаты». В разделе «Домен» вы увидите строку вида:

Ваше приложение можно найти по адресу ‹some_link_to_your_app›.

При переходе к этому адресу домена отобразится ваше приложение. Имейте в виду, что вы можете добавить собственный домен в любой момент.

Фантастика — теперь у нас есть реагирующее приложение, которое автоматически развертывается на динамометрическом стенде Heroku, теперь нам просто нужно, чтобы это реагирующее приложение делало что-то классное! В следующем посте мы начнем создавать компоненты React, необходимые для просмотра списков Community Market.