Узнайте, как развернуть интерфейсные приложения JavaScript в Heroku

Предполагается, что у вас есть базовые знания о React или Vue.js. Все процедуры здесь работают как для приложений React, так и для Vue.js.

Развертывание Frontend-приложений JavaScript с помощью Heroku, мягко говоря, совсем несложно. В основном это связано с тем, что Heroku устраняет все проблемы, связанные с настройкой, и просто позволяет вам развертывать. Конечно, все обстоит иначе, когда вам нужно развернуть серверные приложения, поскольку вам нужно будет подготовить базу данных, где это применимо, и включить учетные данные в переменные среды. К счастью, нам не нужно беспокоиться ни о чем из этого при развертывании интерфейсных приложений ... о, если вы не используете переменные среды в своем интерфейсном приложении, вам также нужно будет установить их на Heroku.

Начиная

Требования:

  • Node.js настроен
  • Аккаунт Heroku
  • Аккаунт Github

Я предполагаю, что у вас уже есть проект React или Vue, который вы хотите развернуть. В этом примере я буду использовать проект React, который я создал ранее.
Во-первых, убедитесь, что у вас есть учетная запись Github. Вам нужно будет сделать фиксацию и отправить свой код в Github:

git add . && git commit "initial commit" && git push origin master

Затем создайте учетную запись на Heroku, если у вас ее еще нет, и добавьте новое приложение:

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

Когда у вас будут установлены все требования, нажмите «Создать приложение». Это должно создать ваше приложение и показать вам вкладку развертывания, где вы можете выбрать, как вы хотите развернуть свое приложение.

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

Как только Heroku его найдет, нажмите «Подключиться». Heroku свяжет этот репозиторий с приложением Heroku. В следующем разделе вам будет предложено настроить автоматическое развертывание из Github.

Как уже говорилось, каждое нажатие на указанную ветку запускает новую сборку и развертывание. Мы оставим выбранную ветку как «главную» (измените ее, если хотите что-то другое). Затем нажмите кнопку «Включить автоматическое развертывание».

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

Нажмите «Развернуть ветку», и Heroku сделает все остальное оттуда. После завершения развертывания вы должны увидеть внизу кнопку «просмотр». Нажмите эту кнопку, чтобы просмотреть свое приложение.

Вы должны увидеть свое приложение по уникальному URL-адресу.

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

Вы можете проверить это, обновив файл App.js и отправив это обновление в главную ветку на Github. На панели инструментов Heroku вы должны увидеть, что идет новая сборка.

Как только это будет сделано, вы должны увидеть обновления, которые вы сделали на своем сайте.

Надеюсь, это кому-то помогло.

Привет ☕️

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