21.12.2019 в 06:34

Развертывание приложения 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 задаст ряд вопросов (название пакета, версия, описание и т. д.). Для простоты давайте пропустим все это, нажав Enter для каждой подсказки. Затем 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:

npm install express --save

Построение Node сервера

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

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}!`));

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

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

URL Shortener

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

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-shorttener. Давайте установим его через 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 и создайте ее.

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

Отправка в Heroku

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

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

git init

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

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

.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, что позволит вам выполнить развертывание в 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, мы изменим порт, и добавим process.env.PORT: