Если вы хотите запустить проект с серверной частью Ruby on Rails API и интерфейсом React, не ищите дальше. За последние несколько недель я работал над развертыванием ряда своих проектов на платформе Heroku. Здесь я опишу шаги, необходимые для перехода простого приложения из стадии разработки в стадию производства.

Когда я выбирал платформу для размещения моих проектов в Интернете, Heroku казался очевидным выбором. Мне его рекомендовали из-за простоты использования и того, насколько быстро он может быть запущен и запущен. Итак, обо всем по порядку, вам захочется зарегистрироваться на Heroku! Не беспокойтесь, регистрация бесплатна! Просто нажмите на эту ссылку, и вы попадете прямо на страницу регистрации. Должно выглядеть примерно так:

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

Вот где начинается ваше путешествие. Идите вперед и нажмите кнопку «Создать новое приложение», и приступим. Он сразу же предложит вам ввести свое «название приложения». В этом примере развертывания я предполагаю, что внешний и внутренний код вашего приложения разделены и поэтому, скорее всего, это два отдельных репозитория. Говоря о репозиториях, если вы еще не загрузили свое приложение на GitHub в виде отдельных репозиториев, я бы настоятельно рекомендовал его. Heroku предлагает вам три разных способа развертывания кода на серверах Heroku. 1) Использование Heroku Git и интерфейса командной строки, предоставляемого Heroku, 2) Использование GitHub и подключение его к существующему репозиторию, или 3) Использование реестра контейнеров для вашего приложения Docker. В этой статье мы будем использовать только 2), так как я считаю его наиболее простым и простым в использовании.

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

Вы увидите, что теперь у вас есть два варианта: автоматическое развертывание или развертывание вручную. Здесь я рекомендую, если вам удобно, позволить Heroku вместе с GitHub взять на себя часть работы и включить автоматическое развертывание. Теперь у вас есть возможность выбрать, какую ветку вы хотите развернуть. Вы можете выбрать свою основную ветвь для производства, а затем использовать последующие смещенные ветки для тестирования / дальнейшей разработки или наоборот. Выбор дилеров. Просто знайте, что когда вы вносите изменения в свою «выбранную ветвь развертывания» на GitHub, это приведет к повторному развертыванию вашего приложения с этими изменениями на Heroku, к лучшему или к худшему!

Итак, почти все готово к работе на стороне Heroku, теперь поговорим о некоторых вещах, которые вы, возможно, использовали в разработке, и о том, как вам, возможно, придется их настроить при развертывании. Я смотрю на вас: Базы данных, ActiveStorage и т. Д. Что касается параметров базы данных, PostgreSQL - отличный вариант, поскольку он поддерживается "из коробки" (и бесплатно до 10 000 строк) на Heroku. Так что пока просто имейте в виду, что вам придется перенести свою схему, заполнить базу данных и все эти полезные вещи после развертывания на Heroku. ActiveStorage - это совсем другая история ...

Я развернул два проекта, которые использовали ActiveStorage в разработке, и с тех пор удалил эту функциональность из Rails после развертывания. Достаточно сказать, что это была головная боль. Огромный. Я просто оставлю все как есть и скоро напишу еще одну запись в блоге о том, как я просто вырезал посредника из ActiveStorage и начал отправлять вещи прямо в AWS s3. Но об этом в другой раз. А пока давайте продолжим и нажмем кнопку развертывания, и Heroku добавит ваше бэкэнд-приложение на свои серверы!

Затем Heroku создаст ваше приложение и сообщит вам, когда оно будет завершено и развернуто. Теперь для моего простого примера я использовал PostgreSQL только для одной таблицы для моей модели Post. Но с главной целевой страницы вашего недавно созданного приложения самый простой способ создать, перенести и заполнить вашу БД на Heroku - это нажать кнопку «еще» в правом верхнем углу, а затем выбрать опцию «запустить консоль».

Это откроет консоль прямо на Heroku, которую вы можете использовать так же, как и раньше, при разработке собственного интерфейса командной строки. Выбрав PostgreSQL в качестве выбранной вами БД в файле config / database.yml, вы уже должны были сказать Heroku о создании базы данных, поэтому вы можете пропустить rails db: create и сразу перейти к rails db: migrate в консоли.

Имейте в виду, что если бы вы делали это в своем собственном интерфейсе командной строки с сайта Heroku, вам просто нужно было бы установить интерфейс командной строки Heroku и войти в систему. Более подробную информацию об этом можно найти в их документации здесь: https: //devcenter.heroku. com / article / heroku-cli .

После переноса вашей новой БД вы можете, конечно, использовать rails db: seed, если это необходимо, или выполнить любые другие файлы / вызовы, которые вам нужны для заполнения вашей БД. Но на этом последнем шаге ваше основное серверное приложение настроено! Теперь перейдем к интерфейсу.

Первоначальные шаги по загрузке фронтенд-приложения в Heroku идентичны тому, что мы сделали для бэкэнда, с одним небольшим изменением, о котором мы поговорим через секунду. Во-первых, в отличие от бэкэнда, если вы не планируете покупать определенный домен и использовать его для своего внешнего интерфейса, имейте в виду, что какое бы имя вы ни назвали для своего внешнего интерфейса, оно будет находиться в URL + herokuapp.com, поэтому лучше сделать его кратким и понятным.

Теперь, прежде чем мы продолжим и подключим наш репозиторий GitHub, мы должны сделать один важный шаг - указать Buildpack. Обычно Heroku очень хорошо умеет просто определять, какой язык вы используете, и будет строить его соответствующим образом. Однако, если вы похожи на меня, я создал свой интерфейс React с помощью npx create-response-app, который позаботился о многих шаблонных вещах за меня. Поэтому Heroku определяет JavaScript как язык и пытается создать его с использованием Node.js, что нам не нужно.

Вместо того, чтобы проводить рефакторинг кода и package.json, проще просто указать параметр Heroku Buildpack. Это можно найти, перейдя в настройки и прокрутив вниз до Buildpacks, а затем вставив эту строку:

Https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz

Теперь мы готовы вернуться на вкладку «Развертывание» и подключиться к нашему репозиторию GitHub так же, как и раньше. Выберите, хотите ли вы, чтобы он автоматически развертывался, как мы это делали раньше, а затем продолжайте и пусть Heroku создаст ваше веб-приложение! В прошлом у меня были проблемы с конфликтами package.json и yarn.lock, обычно из-за конфликтующих версий зависимостей, так что просто будьте начеку. Но помимо этого, как только он завершит сборку, вы сможете открыть свое новое приложение и фактически использовать свой интерфейс! Не удивляйтесь, если все сразу выйдет из строя, вам, скорее всего, понадобится еще один шаг, а именно изменить вызовы fetch на серверную часть. Поскольку теперь вы размещаете свой бэкэнд и, следовательно, базу данных на Heroku, ваш интерфейс теперь должен обращаться к нему. Это может быть утомительно, но везде, где вы выполняли загрузку на ('http: // localhost: 3000 /'), теперь вам нужно получить на ('https: // your-app-name / herokuapp.com/). Но после того, как этот рефакторинг выполнен и отправлен на GitHub, что должно вызвать повторное развертывание вашего серверного приложения, все готово! И вы успешно развернули свое приложение на Heroku!

В своем следующем сообщении в блоге я постараюсь рассказать еще о некоторых проблемах, с которыми я столкнулся при запуске в продакшн на Heroku, и о том, как их решить. Не стесняйтесь оставлять комментарии, если у вас есть вопросы!

[1]: Документы по развертыванию Heroku ( https://devcenter.heroku.com/categories/deployment)

[2]: Документы Heroku Rails ( https://devcenter.heroku.com/articles/getting-started-with-rails6)