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

    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.

     

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *