Subir aplicación Node.js a Hosting Compartido

En el tutorial a continuación aprenderemos a subir una aplicación Node.js a un hosting compartido. El proceso lo abordaremos desde Visual Studio Code para que sea lo más claro posible.

Actualmente la mayoría de proveedores de hosting compartido no tienen incluido Node.js, pero es perfectamente posible instalar desde ssh, node para luego utilizar el poder de npm y de ese modo desplegar tu aplicación efectivamente.

Video Explicativo

Subir aplicación Node.js a Hosting Compartido

Índice Exploratorio

Desde estos enlaces puedes saltar directamente a la parte del tutorial que más te interese:

Glosario de Términos Utilizado en el Tutorial donde se explica como Subir aplicación Node.js a Hosting Compartido

¿Qué es ssh?

ssh es un protocolo de acceso remoto que facilita el proceso de acceso y control remoto a servidores desde una consola de comandos.

¿Qué es Node.js?

Node.js entorno de ejecución de JavaScript orientado a eventos asíncronos, Node. js funge como un servidor en código Javascript, que permite crear aplicaciones escalables con eventos asíncronos.

¿Qué es NPM?

NPM corresponde a las siglas de Node Package Manager, es el manejador de paquetes por defecto de JavaScript, para instalar las librerías con comandos desde la terminal de manera sencilla, efectiva y escalable.

¿Qué es un Hosting Compartido?

Es un conjunto de maquinas virtuales, con páginas web alojadas a un solo servidor físico, estás páginas comparten los recursos entre sí, como la RAM y su capacidad de procesamiento.

El hosting compartido normalmente es la opción más popular y económica de tener tu propia página web.

¿Qué es FTP?

Es un sistema de transferencia de archivos, que permite subir aplicaciones a un servidor de manera remota. Los archivos se pueden subir de carpeta a carpeta, desde un entorno visual. A diferencia de ssh, donde el proceso se realiza desde consola, aunque cabe agregar que el protocolo ssh es más seguro.

¿Qué es Git?

Es el sistema de Control de Versiones más popular del mundo, está herramienta está diseñada para ayudar a los equipos de desarrollo a gestionar los cambios que se van realizando en el código fuente de las aplicaciones que se desarrollan.

¿Qué es Git Bash?

Git Bash es una aplicación diseñada para Microsoft Windows que permite ejecutar Git desde la línea de comandos. Este terminal permite ejecutar Bash, SSH, SCP entre otras utilidades muy populares de Unix compiladas efectivamente para Windows.

Si deseas sabes más sobre los comandos más importantes de Git Bash, puedes ver el siguiente tutorial:

Cómo utilizar la Terminal

Configuración de las herramientas necesarias para el despliegue de una aplicación Javascript en un Hosting Compartido

A continuación, se van a mostrar y configurar las herramientas necesarias, para el funcionamiento correcto de la aplicación a desplegar.

Aplicación a Desplegar en el Servidor

En esta publicación vamos a instalar una aplicación de Wep Scraping, que se publicó previamente en este blog y que puedes encontrar en al siguiente enlace:

Herramienta Web Scraping en Javascript

Instalación y Descarga de Visual Studio Code

Para que el tutorial sea lo más sencillo y accesible posible se va a trabajar con Visual Studio Code, el editor de código más popular del mundo, puedes descargarlo e instalarlo en el siguiente enlace, no se va a hacer mayor énfasis en este proceso por su sencillez:

https://code.visualstudio.com/

Instalación y Descarga de Git

Se recomienda realizar la descarga e instalación de Git, para utilizar el terminal embebido en Visual Studio Code, Git Bash. En el siguiente enlace puedes descargar la aplicación e instalarla con todos los parámetros por defecto:

https://git-scm.com/

Configuración de Visual Studio Code para el acceso remoto al servidor

Desde visual Studio Code, se debe habilitar el acceso FTP y el acceso SSH desde el terminal de Git Bash, a continuación se muestra el proceso para conectarse a un servidor FTP desde Visual Studio Code:

Conéctarse al servidor FTP/SFTP usando Visual Studio Code y la extensión SFTP

Conéctarse al servidor FTP/SFTP usando Visual Studio Code y la extensión SFTP

Conectarse a un servidor por SSH desde Visual Studio Code

Además de la conexión FTP, es necesaria la conexión SSH, para instalar Node.js y las librerías necesarias para subir una aplicación Node.js a un Hosting Compartido, a continuación se muestra el proceso de conexión por SSH a un hosting compartido, en este caso, Hostinger.

Conectarse a un servidor por SSH desde Visual Studio Code

Instalación de Node.js en un hosting compartido

Para realizar la instalación de Node.js es necesario llevar el paso a paso previo hasta aquí. Si se realiza la configuración necesaria tal como se lleva el tutorial podrás realizar el proceso desde Visual Studio Code, con unas cuantas líneas de código.

Desde el terminal, cuando hayas accedido a tu servidor con ssh, desde la carpeta public_html donde vas a tener los diferentes proyectos, copia y pega el siguiente código:

wget -qO- https://cdn.rawgit.com/creationix/nvm/master/install.sh | bash

Con el siguiente mandas configurar node a nivel global

export NVM_DIR="$HOME/.nvm"

Ya cuando se haya realizado este proceso efectivamente debes poner el siguiente comando:

[ -s "$NVM_DIR/nvm.sh" ] & \. "$NVM_DIR/nvm.sh"

Posteriormente pones el siguiente comando y presionas enter:

[ -s "$NVM_DIR/bash_completion" ] & \. "$NVM_DIR/bash_completion"

Por último con el siguiente comando instalas ya node correctamente

nvm install node 
nvm install 16

Posterior a la instalación de node, ya serviran los comando npm de instalación de las librerías necesarias sin problema.

Subir aplicación Web Scraping en Javascript a un Hosting Compartido

En este punto se deben casi los mismos procedimientos de la aplicación Web Scraping, relacionada en el vídeo a continuación:

Cómo construir una herramienta Web Scrapring con Javascript

A continuación se muestran los códigos necesarios para realizar el despliegue de aplicación Node.js a un Hosting, lo primero es inicializar npm, con el siguiente comando:

npm init

Instalación de cheerio

npm i cheerio

Instalación de Express js

npm i express

Instalación de Axios

npm i axios

Instalación de Nodemon

npm i nodemon

Creación del archivo index.js desde ssh

lo primero es llegar al proyecto con el comando cd para solo instalar node js en la ubicación donde corresponda, después debemos crear un archivo, llamado index.js con el comando touch, como se ve en el código a continuación:

touch index.js

Edición del archivo index.js

Luego de creado el archivo, desde el explorador PDF de Visual Studio Code, se busca este archivo, que si no aparece al comienzo se refresca la conexión para que muestre el documento.

Al visualizar el documento, presionamos clic derecho y elegimos la opción Edit in Local para luego pegar el código a continuación:

Código aplicación de Web Scraping

La aplicación será algo diferente de la Web Scraping relacionada anteriormente, con el código a continuación se recorre totalmente este blog, buscando la palabra clave, PHP, la aplicación imprime en formato json, las publicaciones relacionadas con esta palabra clave, en el apartado gratis y en el aparato premium del blog.

const PORT = 8000
const express = require('express')
const axios = require('axios')
const cheerio = require('cheerio')
const app = express()

const blogs = [
    {
        nombre: 'premium',
        direccion: 'https://www.configuroweb.com/tag/premium/',
        base: ''
    },
    {
        nombre: 'premium-2',
        direccion: 'https://www.configuroweb.com/tag/premium/page/2/',
        base: ''
    },
    {
        nombre: 'premium-3',
        direccion: 'https://www.configuroweb.com/tag/premium/page/3/',
        base: ''
    },
    {
        nombre: 'premium-4',
        direccion: 'https://www.configuroweb.com/tag/premium/page/4/',
        base: ''
    },
    {
        nombre: 'premium-5',
        direccion: 'https://www.configuroweb.com/tag/premium/page/5/',
        base: ''
    },
    {
        nombre: 'gratis',
        direccion: 'https://www.configuroweb.com/tag/gratis/',
        base: ''
    },
    {
        nombre: 'gratis',
        direccion: 'https://www.configuroweb.com/tag/gratis/',
        base: ''
    },
    {
        nombre: 'gratis-2',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/2/',
        base: ''
    },
    {
        nombre: 'gratis-3',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/3/',
        base: ''
    },
    {
        nombre: 'gratis-4',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/4/',
        base: ''
    },
    {
        nombre: 'gratis-5',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/5/',
        base: ''
    },
    {
        nombre: 'gratis-6',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/6/',
        base: ''
    },
    {
        nombre: 'gratis-7',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/7/',
        base: ''
    },
    {
        nombre: 'gratis-8',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/8/',
        base: ''
    },
    
]

const articles = []

blogs.forEach(blog => {
    axios.get(blog.direccion)
        .then(response => {
            const html = response.data
            const $ = cheerio.load(html)

            $('a:contains("PHP")', html).each(function () {
                const titulo = $(this).text()
                const url = $(this).attr('href')

                articles.push({
                    titulo,
                    url: blog.base + url,
                    ruta: blog.nombre
                })
            })

        })
})

app.get('/proyecto-api', (req, res) => {
    res.json('Publicaciones ConfiguroWeb')
})

app.get('/proyecto-api/post', (req, res) => {
    res.json(articles)
})

app.get('/proyecto-api/post/:blogId', (req, res) => {
    const blogId = req.params.blogId

    const blogDireccion = blogs.filter(blog => blog.nombre == blogId)[0].direccion
    const blogBase = blogs.filter(blog => blog.nombre == blogId)[0].base


    axios.get(blogDireccion)
        .then(response => {
            const html = response.data
            const $ = cheerio.load(html)
            const specificArticles = []

            $('a:contains("PHP")', html).each(function () {
                const titulo = $(this).text()
                const url = $(this).attr('href')
                specificArticles.push({
                    titulo,
                    url: blogBase + url,
                    ruta: blogId
                })
            })
            res.json(specificArticles)
        }).catch(err => console.log(err))
})

app.listen(PORT, () => console.log(`Corriendo desde el puertoo ${PORT}`))

Ya en este punto tu aplicación debe estar plenamente funcional, quedo al pendiente de cualquier duda.