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 *