Как развернуть приложение Node.js на Heroku из GitHub?

Опубликовано: 26 Июля, 2021

В этой статье мы рассмотрим, как развернуть ваше приложение Demo Node.js на Heroku . В конце этой статьи у нас будет базовое приложение Hello World, работающее в общедоступном домене, к которому может получить доступ кто угодно. Узел должен быть установлен на вашем компьютере. Обратитесь к этой статье Как установить Node на свой компьютер. Мы также собираемся использовать учетную запись Github.

Шаг 1 : Установка Nodemon и Express Module в папку проекта

Установка экспресс- модуля:

 npm установить экспресс

Установка модуля nodemon:

 npm установить nodemon

Шаг 2: Создание файла package.json в папке проекта с помощью команды npm init:

Эти две команды важны для запуска и динамического выполнения кода после изменений, внесенных в ваше приложение Node.js соответственно.

 "start": "узел app.js",
"dev": "nodemon app.js"

Конфигурация файла package.json

 {
    "name": "demoapp",
    "версия": "1.0.0",
    "описание": "",
    "main": "app.js",
    "scripts": {
        "start": "узел app.js",
        "dev": "nodemon app.js"
    },
    "автор": "",
    "лицензия": "ISC",
    "dependencies": {
        "экспресс": "^ 4.17.1",
        "nodemon": "^ 2.0.6"
    }
}

Структура проекта:

app.js

Javascript




// Importing express module
const express = require( 'express' );
const app = express();
// Getting Request
app.get( '/' , (req, res) => {
// Sending the response
res.send( 'Hello World!' )
// Ending the response
res.end()
})
// Establishing the port
const PORT = process.env.PORT ||5000;
// Executing the sever on given port number
app.listen(PORT, console.log(
`Server started on port ${PORT}`));

Команда выполнения:

 nodemon app.js

Вывод в консоль:

Вывод браузера: Теперь, если мы откроем http: // localhost: 5000 / в вашем браузере, мы увидим следующее:

Мы только что создали базовое приложение Node.js.

Развертывание приложения Node.js

Шаг 3. Размещение приложения Node.js на GitHub: создайте новый репозиторий на GitHub, щелкнув на вкладке «Новый репозиторий». GitHub создаст репозиторий, а также даст некоторые инструкции по клонированию проекта.

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

 git init
git add. 
git commit -m «первая фиксация»
git push - установить исходный мастер восходящего потока
git удаленное добавление источника https://github.com/pallavisharma26/DemoApp
git push - установить исходный мастер восходящего потока
  • Теперь, если вы откроете GitHub и обновите репозиторий, вы должны увидеть код, который вы недавно добавили.

Шаг 4. Развертывание приложения Node.js в Heroku

  • Создайте бесплатную учетную запись на Heroku
  • После завершения всех процессов войдите в свою учетную запись.
  • Щелкните « Создать новое приложение ».
  • Откройте вкладку «Развертывание» и перейдите к разделу «Метод развертывания» вкладки.
  • Выберите GitHub в качестве метода. Будет отображена опция «Подключиться к GitHub», где мы добавляем репозиторий GitHub. Если вы делаете это в первый раз, Heroku запросит разрешение на доступ к вашей учетной записи GitHub, которую вы должны разрешить. Здесь вы можете найти свой репозиторий GitHub и нажать « Подключиться» для создания соединения.
  • После этого появится раздел «Развертывание», где вы можете выбрать их и развернуть или «Развертывание вручную», нажмите « Включить автоматическое развертывание».

    Теперь мы должны сообщить Heroku, что наше приложение является приложением NodeJS.
  • Откройте вкладку «Настройки», прокрутите вниз и нажмите «Добавить пакет сборки» .
  • Выберите NodeJS из опций и нажмите Сохранить изменения . Теперь вернитесь на вкладку «Развертывание» и нажмите « Развернуть ветвь» внизу.
  • Heroku возьмет код и разместит его. Откройте вкладку Activity и там вы увидите прогресс:
  • Теперь откройте прокрутку вкладки «Настройки» и найдите «Домен». Мы можем увидеть URL-адрес, если скопируем и запустим его в браузере, мы увидим наше развернутое приложение .

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

РЕКОМЕНДУЕМЫЕ СТАТЬИ