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

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

Существует множество бесплатных хостинг-сервисов, позволяющих публично развернуть и запустить ваши приложения Node.js. Одной из таких служб является Heroku, которая позволяет развертывать, управлять и масштабировать ваши приложения в Интернете.

В этой статье мы создадим простое приложение на Node и Express.js, которое сокращает заданные ссылки, и развернем его на Heroku.

Создание Node.js URL Shortener

Чтобы упростить процесс разработки, мы будем использовать Express, который представляет собой легкий веб-фреймворк, гибкий и легко настраиваемый. Express поставляется с генератором приложений, но мы начнем с нуля.

Создание каталога проекта

Давайте зайдем в рабочую область и создадим новый каталог для проекта:

$ mkdir url-shortener

Инициализация npm

Далее давайте инициализируем npm, а вместе с ним запустим наш проект:

$ npm init

npm init задаст ряд вопросов (название пакета, версия, описание и т.д.). Для простоты давайте пропустим все эти вопросы, нажимая RETURN для каждого запроса. Затем Node создаст файл package.json и выведет его в терминал:

{
  "name": "url-shortener",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

Поля в package.json (название пакета, описание, автор и т.д.) могут быть обновлены в любое время, поэтому вам не нужно слишком беспокоиться об этом.

Что мы добавили здесь вручную, так это “start”: “node app.js”. Это будет очень важно позже, когда мы развернем приложение на Heroku.

Heroku необходимо знать, как запустить наше приложение, а это обычно делается с помощью Procfile. Поскольку наше приложение настолько простое, Procfile был бы излишним, и достаточно просто определить, что наше приложение должно быть запущено простым выполнением команды node app.js.

Установка Express

После этого мы готовы к установке Express:

$ npm install express --save

Создание сервера Node

Установив Express, я создам очень простое приложение в файле под названием app.js:

const express = require('express');
const app = express();
const path = require('path');
const port = 3000;

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(port, () => console.log(`url-shortener listening on port ${port}!`));

На данный момент приложение представляет собой только экспресс-шаблон, необходимый для его настройки, с единственным обработчиком маршрута, который возвращает HTML-страницу на порт 3000.

Давайте определим страницу, которая будет принимать URL, который мы хотим сократить. Она будет состоять только из заголовка и простой формы, которая принимает URL:

<h1>URL Shortener</h1>

<form method="POST" action="/url">
  <input type="text" name="url" />
  <input type="submit" />
</form>

Мы можем проверить, работает ли приложение нормально, выполнив команду:

$ node app.js

Поскольку мы добавили команду “start” : “node app.js” в наш файл package.json, мы также можем запустить его с помощью команды npm:

$ npm start

И перейдите на сайт http://localhost:3000:

Обработка отправки формы

Пока страница отображается правильно, нет логики для обработки POST-запроса, отправленного через форму на конечную точку /url.

Для извлечения URL из запроса, отправленного через форму, мы будем использовать модуль body-parser и извлекать его из тела запроса, поэтому давайте require его и настроим для использования:

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.urlencoded());

После этого мы можем извлечь тело запроса через req.body, поэтому давайте сделаем еще один обработчик запроса, который упакует URL из тела и отправит его обратно через ответ:

app.post('/url', function(req, res) {
    const url = req.body.url;

    res.send(url);
});

Это все еще не то, что мы хотим, поскольку мы получаем обратно весь URL, а не его сокращенную версию.

Сокращение URL

Единственное, что осталось сделать, чтобы наше приложение Node было завершено, – это сократить URL перед отправкой обратно. Для этого мы можем использовать модуль node-url-shortener. Давайте установим его через npm:

$ npm install node-url-shortener --save

Затем включите пакет в приложение:

const urlShortener = require('node-url-shortener');

И, наконец, добавим еще один блок кода, который сокращает URL перед отправкой обратно:

app.post('/url', function(req, res) {
    const url = req.body.url;

    urlShortener.short(url, function(err, shortUrl){
        res.send(shortUrl);
    });
});

urlShortner имеет метод short(), который принимает два параметра: исходный URL и функцию обратного вызова. Сокращенный URL передается в функцию обратного вызова, а затем в res.send().

Давайте запустим приложение и протестируем его:

После ввода URL мы получаем сообщение:

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

Регистрация на Heroku и установка CLI

Теперь, когда приложение создано, пришло время подумать о Heroku. Если у вас нет учетной записи, перейдите на сайт signup.heroku.com и создайте ее.

После того как вы зарегистрируетесь, вам нужно будет установить инструменты Heroku CLI, которые используются для развертывания. Heroku предоставляет инструкции по установке в The Dev Center.

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

Развертывание на Heroku осуществляется через Git. Это очень просто, как только вы поймете, как это работает. По сути, вы можете развернуть проект на Heroku путем отправки в удаленное хранилище, точно так же, как и на GitHub.

Поскольку это новый проект, Git должен быть инициализирован:

$ git init

Теперь мы готовы добавить и зафиксировать все файлы проекта. Однако перед этим мы добавим файл .gitignore, потому что мы не хотим, чтобы каталог node_modules был зафиксирован. Он должен быть сгенерирован npm при развертывании, а не зафиксирован в системе управления исходным кодом.

В файле .gitignore просто добавьте:

node_modules

После этого мы можем добавить и зафиксировать:

$ git add .
$ git commit -m 'initial commit'

После фиксации проекта нам нужно создать приложение Heroku, которое будет соответствовать нашему приложению Node:

$ heroku create
Creating app... !
 ▸    Invalid credentials provided.
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/browser/abcd1234-b6a7-4df4-bb42-0eaf987d0637
Logging in... done
Logged in as example@gmail.com
Creating app... done, ⬢ nameful-wolf-12818
https://nameful-wolf-12818.herokuapp.com/ | https://git.heroku.com/nameful-wolf-12818.git

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

После завершения Heroku вернет вам имя и URL вновь созданного приложения (имя вашего приложения будет отличаться от моего). Если вы перейдете по URL, то увидите страницу приветствия Heroku.

Это все еще не наше приложение-укоротитель URL, а просто публичное приложение Heroku, на котором мы развернем наше собственное.

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

В предыдущей команде heroku create в ваш Git-репозиторий будет добавлен новый remote, что позволит вам развернуть приложение на Heroku с помощью простой команды, например, такой:

$ git push heroku master
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 4 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 326 bytes | 326.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0)
...
...
...
remote: Verifying deploy... done.
To https://git.heroku.com/nameful-wolf-12818.git
   5cb9118..dd0bacd  master -> master

Поскольку приложение успешно развернуто, мы можем приступить к его запуску:

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

Чтобы приложение работало как локально, так и на Heroku, мы изменим порт на 3000 или на process.env.PORT, который установлен Heroku:

const port = process.env.PORT || 3000;

Если развернуть приложение снова и обновить страницу, все работает отлично!

Заключение

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

Мы создали простое приложение Node и Express, которое сокращает предоставленные URL-адреса с помощью модуля node-url-shortener. Затем мы подготовили это приложение к развертыванию и, наконец, запустили его на Heroku.

Оригинал: “https://stackabuse.com/deploying-a-node-js-app-to-heroku/”