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

I

Introducción

Existen numerosos servicios de alojamiento gratuitos disponibles para poner en funcionamiento sus aplicaciones Node.js 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 Node y Express.js simple que acorta los enlaces dados y la implementaremos en Heroku.

Creación de un acortador de URL de Node.js

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

Crear el directorio del proyecto

Vamos cd en el espacio de trabajo y cree un nuevo directorio para el proyecto:

$ mkdir url-shortener

Inicializando npm

A continuación, inicialicemos npm, y con ello, ponemos en marcha nuestro proyecto:

$ npm init

npm init hará una serie de preguntas (nombre del paquete, versión, descripción, etc.). En aras de la simplicidad, omitamos todos estos presionando RETORNO para cada mensaje. El node generará un package.json archivo e imprimirlo en el terminal:

{
  "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 puede actualizar en cualquier momento para que no tenga que preocuparse demasiado por ello.

Lo que hemos agregado aquí manualmente es el "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 basta con definir simplemente que nuestra aplicación debe ejecutarse simplemente ejecutando el node app.js mando.

Instalación de Express

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

$ npm install express --save

Construyendo un servidor de node

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

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

app.get("https://Pharos.sh.com/", function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

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

La aplicación en este punto es realmente solo el modelo estándar requerido para configurarla, con un solo controlador de ruta que devuelve una página HTML en el puerto 3000.

Sigamos adelante y definamos la página, que aceptará una URL que queremos acortar. Solo consistirá en un encabezado y un formulario simple que acepta la URL:

<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:

$ node app.js

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

$ npm start

Y navegando hacia http://localhost:3000:

Manejo de envío de formularios

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

Para tomar la URL de la solicitud enviada a través del formulario, usaremos el analizador corporal módulo y extraerlo del cuerpo de la solicitud, así que sigamos adelante y require también y configurarlo para su uso:

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 adelante y creemos otro controlador de solicitudes que empaque la URL del cuerpo y la envíe de vuelta a través de la respuesta:

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 esto, podemos usar el acortador de URL de node módulo. Vamos a instalarlo a través de npm:

$ npm install node-url-shortener --save

Luego requiera el paquete en la aplicación:

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

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

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

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

los urlShortner tiene un short() método 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().

Iniciemos la aplicación y probémosla:

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

Implementar en Heroku

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 signup.heroku.com y crea uno.

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 proporciona instrucciones de instalación en El centro de desarrollo.

Empujando a Heroku

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

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

$ git init

Ahora, estamos listos para agregar y confirmar todos los archivos del proyecto. Aunque, antes de hacer eso, agregaremos un .gitignore archivo porque no queremos el node_modules directorio para ser comprometido. Npm debe generarlo en el momento de la implementación en lugar de comprometerse con el control de origen.

En tus .gitignore archivo, simplemente agregue:

node_modules

Con eso fuera del camino, podemos agregar y confirmar:

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

Una vez que el proyecto está comprometido, necesitamos crear una aplicación Heroku que corresponda a nuestra aplicación 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 [email protected]
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 simple, solo sigue las instrucciones.

Una vez completado, Heroku devuelve el nombre y la URL de la aplicación recién creada (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 aún no es nuestra aplicación de acortador de URL, simplemente una aplicación pública de Heroku en la que implementaremos la nuestra.

Implementar la aplicación

En el anterior heroku create comando, 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:

$ 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:

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

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

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

Implementando la aplicación nuevamente y actualizando la página, ¡todo funciona bien!

Conclusión

Existen numerosos servicios de alojamiento gratuitos disponibles para poner en funcionamiento 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 node-url-shortener módulo. Luego, preparamos esa aplicación para su implementación y finalmente la pusimos en funcionamiento en Heroku.

 

About the author

Ramiro de la Vega

Bienvenido a Pharos.sh

Soy Ramiro de la Vega, Estadounidense con raíces Españolas. Empecé a programar hace casi 20 años cuando era muy jovencito.

Espero que en mi web encuentres la inspiración y ayuda que necesitas para adentrarte en el fantástico mundo de la programación y conseguir tus objetivos por difíciles que sean.

Add comment

Sobre mi

Últimos Post

Etiquetas

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con tus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad