Implementación de una aplicación Node.js en Heroku

Heroku nos permite implementar, escalar y hacer públicas las aplicaciones en la web fácilmente. En este artículo, crearemos una aplicación Node/Express y la implementaremos en Heroku.

Introducción

Existen numerosos servicios de hospedaje gratuitos disponibles para que sus aplicaciones Node.js estén listas y funcionando públicamente. Uno de estos servicios es Heroku, que le permite implementar, administrar y escalar sus aplicaciones en la web.

En este artículo, crearemos una aplicación simple de Node y Express.js que acorta los enlaces dados y la implementaremos en Heroku.

Crear un acortador de URL de Node.js

Para facilitar el proceso de desarrollo, utilizaremos Expresar, que es un marco web ligero que es flexible y fácilmente personalizable. Express viene con un generador de aplicaciones, pero comenzaremos desde cero.

Crear el directorio del proyecto

Introduzcamos cd en el espacio de trabajo y creemos un nuevo directorio para el proyecto:

1
$ mkdir url-shortener

Inicializando npm {#inicializando npm}

A continuación, inicialicemos npm, y con eso, comencemos nuestro proyecto:

1
$ npm init

npm init hará una serie de preguntas (nombre del paquete, versión, descripción, etc.). En aras de la simplicidad, omitámoslos todos presionando [RETURN]{.kbd} para cada indicación. Node luego generará un archivo package.json y lo imprimirá en la terminal:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  "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",
}

Los campos en package.json (nombre del paquete, descripción, autor, etc.) se pueden actualizar en cualquier momento para que no tenga que preocuparse demasiado por eso.

Lo que hemos agregado aquí manualmente es "start": "node app.js". Esto será extremadamente importante más adelante, cuando implementemos la aplicación en Heroku.

Heroku necesita saber cómo ejecutar nuestra aplicación, y esto generalmente se hace a través de un Procfile. Dado que nuestra aplicación es tan simple, un Procfile sería excesivo, y es suficiente simplemente definir que nuestra aplicación debe ejecutarse simplemente ejecutando el comando node app.js.

Instalando Express

Con eso fuera del camino, estamos listos para instalar Express:

1
$ npm install express --save

Creación de un servidor de nodo

Con Express instalado, crearé una aplicación muy simple en un archivo llamado app.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
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}!`));

En este punto, la aplicación en realidad solo es necesaria para configurarla, con un solo controlador de ruta que devuelve una página HTML en el puerto 3000.

Avancemos y definamos la página, que aceptará una URL que queremos acortar. Solo constará de un encabezado y un formulario simple que acepta la URL:

1
2
3
4
5
6
<h1>URL Shortener</h1>

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

Podemos probar si la aplicación está funcionando bien ejecutando:

1
$ node app.js

Ya que agregamos el comando "start" : "node app.js" a nuestro archivo package.json, también podemos ejecutarlo usando un comando NPM:

1
$ npm start

Y navegando a http://localhost:3000:

application homepage

Gestión del envío de formularios

Si bien la página se muestra correctamente, no hay lógica para manejar la solicitud POST enviada a través del formulario en el extremo /url.

Para obtener la URL de la solicitud enviada a través del formulario, utilizaremos el módulo analizador de cuerpo y la extraeremos del cuerpo de la solicitud, así que sigamos adelante y ‘requerir’ también y configurarlo para su uso:

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

Una vez hecho esto, podemos extraer el cuerpo de la solicitud a través de req.body, así que sigamos y hagamos otro controlador de solicitudes que empaquete la URL del cuerpo y la envíe de vuelta a través de la respuesta:

1
2
3
4
5
app.post('/url', function(req, res) {
    const url = req.body.url;

    res.send(url);
});

Esto todavía no es lo que queremos, ya que estamos recuperando la URL completa y no la versión abreviada.

Acortando la URL

Lo único que queda por hacer para que nuestra aplicación Node esté completa es acortar la URL antes de devolverla. Para ello podemos utilizar el módulo acortador de URL de nodo. Vamos a instalarlo a través de npm:

1
$ npm install node-url-shortener --save

Luego requiere el paquete en la aplicación:

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

Y, por último, agreguemos otro bloque de código que acorte la URL antes de devolverla:

1
2
3
4
5
6
7
app.post('/url', function(req, res) {
    const url = req.body.url;

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

El urlShortner tiene un método short() que acepta dos parámetros: la URL original y una función de devolución de llamada. La URL acortada se pasa a la función de devolución de llamada y luego a res.send().

Vamos a iniciar la aplicación y probarla:

input url

Después de ingresar una URL, somos recibidos con:

url shortener result

Despliegue en Heroku

Registrarse en Heroku e instalar la CLI {#registrarse en heroku e instalar la CLI}

Ahora que se ha creado la aplicación, es hora de pensar en Heroku. Si no tiene una cuenta, diríjase a registro.heroku.com y cree una.

Una vez que tenga una cuenta, lo siguiente que debe hacer es instalar las herramientas CLI de Heroku, que se utilizan para la implementación. Heroku brinda instrucciones de instalación en El Centro de desarrollo.

Empujando a Heroku {#empujando a Heroku}

La implementación en Heroku funciona a través de Git. Es muy simple una vez que entiendes cómo funciona. En esencia, puede implementar en Heroku presionando en un repositorio remoto, al igual que presionando en GitHub.

Debido a que este es un proyecto nuevo, Git debe inicializarse:

1
$ git init

Ahora, estamos listos para agregar y confirmar todos los archivos del proyecto. Sin embargo, antes de hacer eso, agregaremos un archivo .gitignore porque no queremos que se confirme el directorio node_modules. Debe ser generado por npm en el momento de la implementación en lugar de comprometerse con el control de código fuente.

En su archivo .gitignore, simplemente agregue:

1
node_modules

Con eso fuera del camino, podemos agregar y confirmar:

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

Una vez que se confirma el proyecto, debemos crear una aplicación Heroku que se corresponda con nuestra aplicación Node:

1
2
3
4
5
6
7
8
9
$ 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 [correo electrónico protegido]
Creating app... done,  nameful-wolf-12818
https://nameful-wolf-12818.herokuapp.com/ | https://git.heroku.com/nameful-wolf-12818.git

Si es la primera vez que usa la CLI, Heroku le pedirá que inicie sesión a través del navegador. El proceso es muy sencillo, solo sigue las instrucciones.

Una vez completado, Heroku devuelve el nombre y la URL de la aplicación recién creados (el nombre de su aplicación será diferente al mío). Si navega hasta la URL, verá una página de bienvenida de Heroku.

Esta todavía no es nuestra aplicación para acortar URL, simplemente una aplicación pública de Heroku en la que implementaremos la nuestra.

Implementación de la aplicación {#implementación de la aplicación}

En el comando heroku create anterior, se habrá agregado un nuevo control remoto a su repositorio de Git, lo que le permitirá implementar en Heroku con un comando simple como este:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
$ 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

Dado que la aplicación se implementó con éxito, podemos continuar e iniciarla:

deployed application on heroku

Sin embargo, encontraremos un problema debido a la falta de coincidencia en los puertos. En nuestra aplicación, codificamos que usa el puerto ‘3000’, pero Heroku funciona en un puerto diferente y este conflicto bloquea nuestra aplicación.

Para que la aplicación funcione tanto localmente como en Heroku, cambiaremos el puerto para que sea ya sea 3000 o process.env.PORT, que establece Heroku:

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

Al implementar la aplicación nuevamente y actualizar la página, ¡todo funciona bien!

heroku deployed application homepage

heroku deployed application result page

Conclusión

Existen numerosos servicios de alojamiento gratuitos disponibles para poner en marcha sus aplicaciones públicamente. Uno de estos servicios es Heroku, que le permite implementar, administrar y escalar sus aplicaciones en la web.

Hemos creado una aplicación Node and Express simple que acorta las URL proporcionadas a través del módulo node-url-shortener. Luego preparamos esa aplicación para su implementación y finalmente la pusimos en funcionamiento en Heroku. ento en Heroku.