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
Índice Exploratorio
Desde estos enlaces puedes saltar directamente a la parte del tutorial que más te interese:
- Glosario de Términos
- Configuración de las herramientas necesarias
- Instalación de Node.js
- Subir aplicación Javascript a Hosting Compartido
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:
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:
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
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.
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:
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://configuroweb.com/tag/premium/',
base: ''
},
{
nombre: 'premium-2',
direccion: 'https://configuroweb.com/tag/premium/page/2/',
base: ''
},
{
nombre: 'premium-3',
direccion: 'https://configuroweb.com/tag/premium/page/3/',
base: ''
},
{
nombre: 'premium-4',
direccion: 'https://configuroweb.com/tag/premium/page/4/',
base: ''
},
{
nombre: 'premium-5',
direccion: 'https://configuroweb.com/tag/premium/page/5/',
base: ''
},
{
nombre: 'gratis',
direccion: 'https://configuroweb.com/tag/gratis/',
base: ''
},
{
nombre: 'gratis',
direccion: 'https://configuroweb.com/tag/gratis/',
base: ''
},
{
nombre: 'gratis-2',
direccion: 'https://configuroweb.com/tag/gratis/page/2/',
base: ''
},
{
nombre: 'gratis-3',
direccion: 'https://configuroweb.com/tag/gratis/page/3/',
base: ''
},
{
nombre: 'gratis-4',
direccion: 'https://configuroweb.com/tag/gratis/page/4/',
base: ''
},
{
nombre: 'gratis-5',
direccion: 'https://configuroweb.com/tag/gratis/page/5/',
base: ''
},
{
nombre: 'gratis-6',
direccion: 'https://configuroweb.com/tag/gratis/page/6/',
base: ''
},
{
nombre: 'gratis-7',
direccion: 'https://configuroweb.com/tag/gratis/page/7/',
base: ''
},
{
nombre: 'gratis-8',
direccion: 'https://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.
