Разверните приложение React и Node / Express с одним репозиторием

Допустим, вы работаете над полнофункциональным приложением, в котором на стороне клиента используется React, а на стороне сервера - Node.js / Express. Скорее всего, у вас будут отдельные репозитории GitHub для каждого. Но что, если оба эти подкаталоги? Давайте сначала посмотрим, как будет выглядеть эта структура:

app (github repo)
  |__frontend (react application)
  |__backend (node/express application)

Я использовал этот подход, чтобы определить, можно ли развернуть каждый подкаталог в Heroku. Не принято использовать приложения в виде подкаталогов, и в идеале у них должен быть собственный репозиторий GitHub.

Если предположить, что мы инициализируем app как репозиторий, его развертывание в Heroku не сработает. Вместо этого целью было бы развернуть frontend и backend на Heroku через репозиторий theapp на GitHub.

В этом руководстве рассказывается, как развернуть несколько приложений в одном репозитории GitHub. Предполагается, что приложение было отправлено на GitHub с последними изменениями.

Предварительное условие

  • Убедитесь, что у вас установлен Heroku CLI.

Добавить и / или переименовать пульты Heroku

Мы будем использовать команду heroku create для создания нового пустого приложения на Heroku. В то же время будет автоматически создан пульт с именем heroku (вы можете проверить это, набрав git remote -v в терминале).

Бэк-энд

Мы начнем с создания подкаталога backend. В интерфейсе командной строки перейдите в основной каталог app. Оказавшись там, давайте сгенерируем серверное приложение Heroku с heroku create app-backend. Я хочу назвать приложение на Heroku app-backend. Вы можете назвать его как угодно, но убедитесь, что оно соответствует остальным командам.

Если вы запустите git remote -v и не видите удаленный heroku, вам придется добавить его с помощью команды heroku git:remote -a app-backend.

Следующим шагом будет переименование пульта heroku, поскольку у нас будет несколько пультов. Выполните команду git remote rename heroku heroku-app-backend. В этом случае я переименовал его в heroku-app-backend, но вы можете выбрать, во что переименовать пульт.

Внешний интерфейс

Аналогичные шаги будут предприняты для репозитория frontend, но его нужно создать с помощью buildpack. В терминале, все еще находящемся в каталоге app, запустите:

heroku create app-frontend -b https://github.com/mars/create-react-app-buildpack.git

Опять же, я решил назвать приложение app-frontend.

Если вы ошиблись с названием, вы всегда можете переименовать его с помощью:

heroku apps:rename new_name --app old_name

Если вы запускаете git remote -v и не видите удаленный heroku, вам нужно добавить его с помощью команды heroku git:remote -a app-frontend.

Настройте скрипт для правильного пульта Heroku Remote

Этот шаг можно считать необязательным, но, настроив его, будет намного проще отправить новую / обновленную версию вашего приложения в Heroku позже. Поскольку у нас есть приложение React и Node / Express, npm можно использовать как инструмент для публикации на пультах Heroku.

Внутри каждого подкаталога frontend и backend мы можем обновить файл package.json и добавить команды для публикации прямо на пульт Heroku. Начнем с backend. Перейдите в этот репозиторий с помощью cd backend и откройте package.json. Мы добавим в scripts следующее:

"scripts": {
   "publishToHeroku": "cd ../ && git subtree push --prefix backend heroku- 
    app-backend master || true"
}

Давайте разберемся. Команду git subtree нужно запускать из корня нашего репозитория, в котором настроен git. push --prefix backend указывает, какой каталог мы хотим нажать. heroku-app-backend master указывает имя пульта дистанционного управления и имя ветки, в которую нужно отправить. || true - это просто запасной вариант, чтобы избежать кода ошибки npm.

Выполните те же действия для каталога frontend, но в scripts будет добавлено следующее:

publishToHeroku: cd ../ && git subtree push --prefix frontend heroku-app-frontend master || true

Примечание. Если при выполнении приведенных выше команд возникают какие-либо проблемы, убедитесь, что вы ссылаетесь на правильные имена каталогов и пультов Heroku.

Развертывание

Перед развертыванием, если какая-либо часть вашего приложения использует переменные среды, обязательно сначала установите их с помощью Heroku. В противном случае развернутое приложение может дать сбой. Для этого используйте команду heroku config:set KEY=VALUE из терминала для каждой переменной среды и проверьте с помощью heroku config.

Теперь мы можем использовать npm и команду script, которую мы установили ранее, для развертывания каждого каталога в Heroku. Давайте запустим cd backend, чтобы перейти к backend и запустить npm run publishToHeroku. Те же действия применимы для frontend.

Приложения должны быть успешно развернуты.

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

Осторожность

В этом руководстве предполагается, что вы используете npm как встроенный инструмент, но он должен работать с любым другим инструментом, пока выполняется соответствующий сценарий. Если вам нужно опубликовать ветку, отличную от master, вам нужно внести изменения в script, чтобы оно соответствовало имени ветки, которую вы хотите развернуть. Например:

publishToHeroku: cd ../ && git subtree push --prefix frontend heroku-app-frontend <name_of_branch>|| true

Если вы работаете с другим фреймворком, у которого нет package.json, например, у вас есть серверная часть Rails вместо серверной части Node / Express, вы не сможете настроить тег скрипта. Вместо этого из корневого каталога вы можете попробовать запустить команду прямо из терминала:

git subtree push — prefix backend heroku-app-backend master

Я сам не реализовал этот подход с Rails, но если вы развертываете приложение Rails в Heroku, имейте в виду, что база данных должна быть postgresql.

Заключительные замечания

Как уже упоминалось, не принято размещать приложения в качестве суб-репозиториев на GitHub. Приложение React и приложение Node / Express должны иметь свой собственный репозиторий, но некоторые программисты могут захотеть иметь оба репозитория в одном в целях организации. Это все еще возможно для развертывания в Heroku, выполнив несколько дополнительных шагов.

Спасибо за чтение. Надеюсь, статья была вам полезна.

Ресурсы