Despliegue de una aplicación NodeJS en un hosting con cPanel

Vamos a explicar cómo realizar un proceso de despliegue de una aplicación básica sobre el runtime de Javascript NodeJS en un hosting NodeJS con cPanel, levantando un pequeño servidor a modo de ejemplo con el framework HTTP de Express.js capaz de procesar peticiones y respuestas básicas y servir ficheros estáticos. Después explicaremos cómo desplegar la aplicación que hemos desarrollado en cPanel.

Creación de un proyecto básico de NodeJS + Express.js

Lo primero, vamos a crear un proyecto de NodeJS desde cero, los requisitos mínimos para poder crear nuestro setup de desarrollo para crear nuestra aplicación NodeJS, es contar con el runtime de javascript de NodeJS y NPM (El gestor de paquetes de Node) y cualquier IDE o editor de código, en este caso utilizaremos Visual Studio Code.

Puedes encontrar los enlaces para descargar e instalar todo el software necesario a continuación:

• NodeJS y NPM: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

• Visual Studio Code: https://code.visualstudio.com/

Una vez instalado todo lo necesario, vamos a crear un proyecto de NodeJS. Para ello, abrimos una terminal en nuestra máquina local. Estas instrucciones y comandos funcionan de la misma manera en sistemas operativos Unix (MacOs o Linux) que en sistemas Windows.

●     Creamos una nueva carpeta con "mkdir [nombre_carpeta]".

●     Nos movemos a dicha carpeta con "cd [nombre_carpeta]".

●     Inicializamos el proyecto con "npm init".

$ mkdir node_app
$ cd node_app
$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (node_app)
version: (1.0.0)
description: Node and express example
entry point: (index.js) main.js
test command:
git repository:
keywords:
author: Enrique Sánchez Vicente
license: (ISC)
About to write to /Users/kike/Desktop/node_app/package.json:

{
  "name": "node_app",
  "version": "1.0.0",
  "description": "Node and express example",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Enrique Sánchez Vicente",
  "license": "ISC"
}

Is this OK? (yes)

Si abrimos el proyecto en Visual Studio Code seleccionando el directorio que acabamos de crear, deberíamos ver algo así:

En este punto, nuestra carpeta solo contiene el fichero package.json. Este es el fichero que contiene algunos datos sobre nuestro proyecto y sus dependencias.

Opcionalmente, para utilizar la sintaxis de ES modules en vez de CommonJS en nuestro código Javascript, vamos a declarar la entrada ”type”: “module” en nuestro fichero package.json. Esta sintaxis nos va a permitir utilizar instrucciones import o export para utilizar el sistema de módulos más moderno y recomendable en NodeJS aunque no es imprescindible. Esta sintaxis es compatible desde la versión 14 de NodeJS en adelante.

{
 "name": "node_app",
 "version": "1.0.0",
 "type": "module", // Añadir esta línea
 "description": "Node and express example",
 "main": "main.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "Enrique Sánchez Vicente",
 "license": "ISC",
 "dependencies": {
   "express": "^4.21.2"
 }
}

Para instalar el framework Express.js simplemente tenemos que ejecutar el siguiente comando en nuestra terminal.

Nota: En este punto podríamos utilizar la terminal integrada en Visual Studio Code o continuar trabajando con cualquier otra terminal.

$ npm install express

added 69 packages, and audited 70 packages in 2s

14 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

Una vez instalado el paquete de Express.js, podemos observar que se ha creado en nuestro fichero package.json una nueva clave que almacena la dependencia y la versión mínima requerida para la instalación de las dependencias de nuestra aplicación. También podemos observar cómo se ha creado la carpeta node_modules. Este directorio almacena los paquetes de las dependencias de nuestra aplicación.

Ahora vamos a crear el código de nuestra aplicación NodeJS, para esto vamos a crear un nuevo archivo de código fuente Javascript. Pulsamos el botón indicado en la imagen y creamos un fichero llamado main.js.

En este nuevo fichero podemos declarar un servidor Express básico que escuche peticiones GET en la ruta /node-express. Aquí estamos invocando al método send() del objeto res (abreviación de response) para enviar texto en crudo al cliente como respuesta a una petición.

Vamos a crear la aplicación Express.js para escuchar peticiones siempre desde una ruta concreta, en este caso /node-express a modo de ruta raíz de nuestra aplicación para más tarde desplegar la aplicación sobre esa misma ruta en nuestro hosting cPanel.

Una vez tenemos declaradas las rutas de nuestra aplicación, podemos declarar un puerto para que el servidor Express comience a escuchar peticiones HTTP que lleguen a nuestra máquina por dicho puerto. En este caso vamos a utilizar el puerto 80, este suele ser el estándar para el protocolo HTTP.

import express from "express";

const server = express();

server.get("/node-express", (req, res) => {
 res.send(
   "El servidor Node + Express está funcionando correctamente en cPanel"
 );
});

server.listen(80, () => {
 console.log("Listening on port 80");
});

Para probar que nuestra aplicación funciona, podemos ejecutarla en local por medio de una terminal con el siguiente comando:

node main.js

Si todo ha salido correctamente, se debería ver algo así en la terminal y accediendo a la dirección http://localhost/node-express en un navegador, debería aparecer el texto de las respuestas que hemos programado para dicha ruta. Para apagar el servidor, puedes posicionarte en la terminal y pulsar Control + C.

Si ves que tu aplicación responde el texto que has definido en esa ruta, enhorabuena, funciona correctamente. Si no es así, repasa todos los pasos anteriores o busca tu error concreto en un buscador para encontrar el problema.

¿Cómo servir ficheros estáticos con tu hosting NodeJS?

La mayoría de aplicaciones web, necesitan servir ficheros estáticos como assets, imágenes o documentos o recursos de código para el frontend como código Javascript o CSS. Para conseguir servir estos ficheros existen muchas formas de hacerlo dependiendo del framework o la herramienta de bundler que se use en cada proyecto para buildear el código del frontend y los assets de la aplicación.

Existen muchas herramientas de este estilo como Vite o Webpack y en cada caso la integración con Express.JS para servir los recursos y ficheros estáticos puede variar. En nuestro caso, para hacerlo simple, no vamos a utilizar una herramienta de building o bundler ya que no estamos utilizando ninguna de estas herramientas para desarrollar nuestra aplicación. Entonces vamos a servir ficheros estáticos en crudo. Por ejemplo, un fichero de código Javascript, un fichero de código CSS y una imagen.

Vamos a crear una carpeta llamada resources en la raíz de nuestro proyecto.

Para indicarle al framework que debe servir los ficheros que estén en esa carpeta, tendremos que añadir la siguiente instrucción a nuestro código.

import express from "express";

const server = express();

// Indicamos de esta manera una ruta que se enlaza a la carpeta resources
server.use("/node-express/static", express.static("resources"));

server.get("/node-express", (req, res) => {
 res.send(
   "El servidor Node + Express está funcionando correctamente en cPanel"
 );
});

server.listen(80, () => {
 console.log("Listening on port 80");
});

De esta manera, estamos indicando a Express que en la ruta "/node-express/static" se deben servir los ficheros estáticos de la carpeta resources.

Vamos a servir un código HTML sencillo en la ruta de nuestra aplicación para utilizar recursos estáticos y comprobar que se sirven correctamente.

import express from "express";


const server = express();


server.use("/node-express/static", express.static("resources"));


server.get("/node-express", (req, res) => {
 res.send(`
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Ejemplo Node + Express</title>
      <link rel="stylesheet" href="/node-express/static/styles.css">
    </head>
    <body>
      <div>
        <h1>Aplicación Node + Express</h1>
        <img src="/node-express/static/image.webp">
        <p id="description"></p>
      </div>
      <script type="module" src="/node-express/static/script.js"></script>
    </body>
  </html>
   `);
});

server.listen(80, () => {
 console.log("Listening on port 80");
});

Cómo se puede ver, el código que servimos enlaza con una hoja de estilos CSS en la ruta /node-express/static/styles.css una imagen en la ruta /node-express/static/image.webpy un fichero de código Javascript en la ruta /node-express/static/script.js.

Vamos a crear nuestros ficheros dentro de la carpeta resourcesde esta manera:

Nuestro código CSS dará estilos a la etiqueta <h1> del HTML de esta manera:

h1 {
   color:rgb(220, 27, 27);
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Nuestro código Javascript, cogerá el elemento <p> con el id description e insertará texto:

window.onload = () => {
 const description = document.getElementById("description");
 description.innerText = "Este texto fue insertado desde el script.js";
};

Y nuestra imagen puede ser cualquiera mientras se enlace con el mismo nombre del fichero que se quiere servir desde la carpeta resources.

Si volvemos a iniciar el servidor con el siguiente comando:

node main.js

Ahora deberíamos ver que se renderiza nuestro HTML con sus recursos estáticos enlazados.

¿Cómo desplegar la aplicación NodeJS en el hosting?

Ahora en Raiola Networks ofrecemos hosting para NodeJS con una herramienta especialmente diseñada para desplegar aplicaciones NodeJS de forma fácil e intuitiva.

Lo primero que debemos hacer para desplegar nuestra aplicación NodeJS, es comprimir nuestro proyecto en un fichero .zip para subirlo a nuestro hosting NodeJS con cPanel. Para esto podemos utilizar herramientas gratuitas como 7-Zip para Windows o en el caso de MacOS, hacemos clic derecho sobre la carpeta de nuestro proyecto y la opción de “Comprimir” y en caso de Linux podemos utilizar el comando siguiente:

zip -r archive.zip dir_to_zip

Para subir el proyecto comprimido nos tenemos que dirigir a la herramienta de “Administrador de archivos” en el menú de herramientas de cPanel. O subir el archivo por SSH o FTP si tenemos estos protocolos habilitados en nuestro hosting para NodeJS.

Para el ejemplo, utilizaremos la opción del “Administrador de archivos” de la sección “Archivos”. Una vez dentro del administrador, pulsaremos la opción de “Cargar”.

Ahí cargaremos nuestro fichero comprimido .zip y esperaremos a que se complete la subida.

Una vez subido, podremos verlo en nuestra carpeta de usuario de cPanel. Podría tardar unos segundos en aparecer.

Ahora tendremos que descomprimir el proyecto en la carpeta de nuestro usuario, haciendo clic derecho sobre la carpeta y eligiendo la opción de “Extract” o seleccionando el fichero y eligiendo la misma opción en el menú de operaciones de la parte superior.

Aparecerá un menú modal para indicar en qué ruta de nuestro hosting queremos extraer el proyecto. Simplemente, podemos dejar la opción vacía para indicar qué lo queremos en la carpeta de nuestro usuario (es en la misma que nos encontramos posicionados) o podemos indicar la ruta de nuestra preferencia. Haz clic en “Extract Files” y espera a que se descomprima el proyecto.

Una vez descomprimido, deberíamos ver la nueva carpeta entre los archivos de nuestra carpeta de usuario.

Una vez encontremos la carpeta de nuestro proyecto, en mi caso se llama node_app, debemos proceder a borrar las dependencias que instalamos en local en la carpeta node_modules. Esto es así porque más adelante tendremos que instalarlas desde cero y si no borramos la carpeta node_modules de nuestra instalación local, esto causará problemas.

Ahora que ya tenemos nuestro proyecto descomprimido en nuestra carpeta de usuario vamos a proceder a desplegar la aplicación. Para ello tenemos que llegar a la herramienta de despliegue de aplicaciones NodeJS, en el menú de herramientas de nuestro cPanel, vamos a dirigirnos a la sección de “Software” y ahí buscaremos la opción “Setup Node.js App”.

Una vez dentro, buscaremos el botón “Create Application”.

Cuando entremos al menú para crear la aplicación, veremos lo siguiente:

Tenemos el campo “Node.js version”, donde debemos seleccionar la versión de Node de nuestra conveniencia, normalmente la misma versión en la que hemos desarrollado nuestra aplicación en local. En este caso, seleccionaremos la 22.13.1.

El campo “Application mode” sirve para seleccionar entre los modos "desarrollo" o "producción". Ahora será conveniente ponerlo en modo "Development", para que así nuestra aplicación nos pueda informar de errores que se puedan producir. Pero cuando hayamos desplegado correctamente la aplicación, deberíamos cambiar esta opción al modo producción y reiniciar la aplicación.

En el campo “Application root” deberemos indicar la ruta del directorio donde hemos subido nuestra aplicación, siempre partiendo desde el path de nuestro usuario de cPanel. En mi caso el path completo con mi directorio de usuario es "enriquesv/node_app", pero en este campo indico solamente el directorio a partir de la carpeta de mi usuario.

En el campo “Application URL” debemos indicar cuál es la ruta en la que queremos que se sirva nuestra aplicación en nuestro hosting cPanel. Es muy importante que esta ruta coincida con las rutas que hemos declarado en Express en nuestra aplicación. Siempre debemos de configurar nuestras rutas de Express a partir de una misma ruta raíz. En mi caso, esta ruta es /node-express.

En el campo “Application startup file” tenemos que indicar cuál es el fichero en el que se debe de arrancar nuestra aplicación, en nuestro caso es el main.js

También tenemos la posibilidad de añadir o sobrescribir variables de entorno de NodeJS en la sección “Environment variables” para el contexto de ejecución de nuestra aplicación. Estas podrían sobrescribir a las variables del fichero .env de nuestro proyecto en caso de tenerlo o definir unas nuevas. En nuestro caso no necesitamos trabajar con las variables de entorno.

Una vez tengamos todo correctamente establecido, hacemos clic en el botón “Create”. Y cuando se haya creado la aplicación, aparecerá de esta manera:

Tenemos las opciones de parar la ejecución de nuestra aplicación con el botón “Stop App” o de reiniciarla, con el botón “Restart”.

Podemos modificar las mismas opciones que en la creación, por si nos hemos confundido al definir algún campo y reiniciar la aplicación para que se apliquen los cambios.

Para instalar las dependencias NPM de nuestra aplicación, tenemos el botón “Run NPM install”, lo cual ejecutará el comando npm install para instalar las dependencias de nuestra aplicación definidas en el fichero package.json. Es importante haber borrado previamente la carpeta node_modules, de lo contrario no se podrá volver a instalar.

Una vez instaladas las dependencias, podremos ejecutar otros comandos definidos en el package.json para realizar otras tareas que se requieran en nuestro proyecto, como el típico comando npm run build o cualquier otro comando que requiramos para finalizar el despliegue de nuestra aplicación.

La herramienta reconocerá los comandos definidos en el package.json y nos ofrecerá un listado con los comandos de NPM que queramos ejecutar.

En nuestro caso no necesitamos ejecutar ningún comando más. Después de cualquier instalación de dependencias o ejecución de comando o cambio en el código de nuestra aplicación, habría que reiniciarla para que se vuelva a lanzar con los cambios aplicados.

Si todo ha salido correctamente, accediendo a la ruta definida de nuestro hosting NodeJS, deberíamos ver que la aplicación responde correctamente.

Con esto, ya tendrás tu aplicación NodeJS desplegada en un hosting NodeJS de Raiola Networks.
Si necesitas ayuda para poner a funcionar tu hosting con NodeJS en Raiola Networks, puedes contactar con nuestro departamento de soporte técnico desde nuestra área de clientes o mediante teléfono.