MERN Stack

La pila MERN es un stack de servidor web muy común en desaarrollo web moderno, consiste en MongoDB + EXpress.js + React.js + Node.js vamos a ver como hacer un despliegue de servidor con este stack.

Guía: https://www.mongodb.com/resources/languages/mern-stack-tutorial

¿Qué es la pila MERN?

La pila MERN es un marco de desarrollo web que consta de MongoDB, Express, React.js y Node.js. Es una de varias variantes de la pila MEAN.

Cuando usas la pila MERN, trabajas con React para implementar la capa de presentación, Express y Node.js para formar la capa intermedia o de aplicación, y MongoDB para crear la capa de base de datos.

En este tutorial de la pila MERN, utilizaremos estas cuatro tecnologías para desarrollar una aplicación básica capaz de registrar la información de los empleados y mostrarla usando el frontend React.

¿Qué es realmente cada componente?

MongoDB: Base de datos NoSQL, scucha en el puerto 27017 por defecto.

Express: Es un framework minimalista de Node.js que gestiona las peticiones HTTP. Piénsalo como el "Apache/Nginx" pero a nivel de aplicación JavaScript. Express crea un servidor HTTP que escucha en un puerto (ej: 3000, 5000).

React (con Vite): Es el frontend. Vite es una herramienta de build que:

• En desarrollo: Levanta un servidor de desarrollo (puerto 5173 por defecto)

• En producción: Genera archivos estáticos HTML/CSS/JS que necesitas servir

Node.js: El runtime de JavaScript en el servidor. Es como tener PHP instalado, pero para JavaScript.

Arquitectura de despliegue típica

Internet
    ↓
Cloudflare Tunnel / Nginx (Puerto 80/443)
    ↓
├─→ Frontend (Archivos estáticos React) - Servidos por Nginx
    ↓
├─→ Backend API (Express/Node.js) - Puerto 3000
    ↓
└─→ MongoDB - Puerto 27017 (solo acceso local)

Cloudflare no esta optimizado para servir archivos estáticos del frontend por lo que la opción más viable en estos casos es usar: Nginx + Cloudflare Tunnel más recomendado para producción:

• Nginx sirve el frontend (archivos estáticos)

• Nginx hace proxy al backend (Express API)

• Cloudflare Tunnel apunta a Nginx

Ventajas de esta configuración:

• Frontend y Backend en el mismo dominio (sin problemas CORS)

• Nginx optimizado para servir archivos estáticos

• Node.js solo maneja la lógica de API

• MongoDB protegida (solo acceso local)

• PM2 mantiene Node.js vivo y con autoarranque

• Cloudflare proporciona SSL y seguridad adicional

Diagrama de flujo de datos

Para esta implementación usaremos un proyecto guiado de listado y uso de tareas que seguirá este diagrama de flujo:

[Usuario] → [Navegador en localhost:5173]
                    ↓
            [React Frontend]
                    ↓
        fetch('http://localhost:3000/tareas')
                    ↓
            [Express Backend] → [MongoDB]
                    ↓
        JSON Response ← Datos de tareas
                    ↓
    [React actualiza la UI]

Vamos a ver como implementarlo esto paso a paso:

---

Guia de despliegue

Para el entorno usaremos una máquina virtual ubuntu desktop 22.04 con visualcode instalado.

1. Instalación de Componentes Base

Actualizar el sistema

sudo apt update && sudo apt upgrade -y

Instalar Node.js (v20 LTS recomendado)

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
node --version  # Verificar instalación
npm --version

Instalar MongoDB

# Importar clave GPG de MongoDB
curl -fsSL https://www.mongodb.org/static/pgp/server-7.0.asc | \
   sudo gpg -o /usr/share/keyrings/mongodb-server-7.0.gpg --dearmor

# Añadir repositorio
echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-7.0.gpg ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/7.0 multiverse" | \
   sudo tee /etc/apt/sources.list.d/mongodb-org-7.0.list

# Instalar MongoDB
sudo apt update
sudo apt install -y mongodb-org

# Iniciar y habilitar MongoDB
sudo systemctl start mongod
sudo systemctl enable mongod
sudo systemctl status mongod

Instalar Nginx

sudo apt install -y nginx
sudo systemctl start nginx
sudo systemctl enable nginx

Instalar PM2

Este paquete se instala globalmente y nos va a servir para mantener Node.js ejecutándose:

sudo npm install -g pm2

2. Estructura de Directorios Recomendada

/var/www/
└── mi-app-mern/
    ├── frontend/          # Build de React (archivos estáticos)
    │   └── dist/
    └── backend/           # Aplicación Node.js/Express
        ├── server.js
        ├── package.json
        └── node_modules/

Crear estructura:

sudo mkdir -p /var/www/mi-app-mern/{frontend,backend}
sudo chown -R $USER:$USER /var/www/mi-app-mern

3. Configuración de MongoDB

Para mongoDB puedes hacerlo por terminal o usar aplicaciones gráficas como compass, crearemos un usuario admin y otro para la aplicación.

mongosh

# Dentro de mongosh:
use admin
db.createUser({
  user: "admindb",
  pwd: "Passw0rd",
  roles: ["root"]
})

use mi_aplicacion
db.createUser({
  user: "app_user",
  pwd: "Passw0rdApp",
  roles: [{role: "readWrite", db: "mi_aplicacion"}]
})

exit

Puedes ver los usuarios con:

mongosh -u admindb -p P@ssw0rd --authenticationDatabase admin

# Ver bases de datos
show dbs

# Cambiar a admin para ver todos los usuarios
use admin
db.getUsers()

# Ver usuarios de tu app específica
use mi_aplicacion
db.getUsers()

# Salir
exit

Podemos además, habilitar autenticación (opcional pero recomendado)

# Habilitar auth
sudo sed -i "s/#security:/security:\n  authorization: enabled/" /etc/mongod.conf
sudo systemctl restart mongod

Para el testeo puedes probar con:

# MongoDB
sudo systemctl status mongod
mongosh -u app_user -p Passw0rdApp --authenticationDatabase mi_aplicacion

---

4. Despliegue de aplicación

Para el despliegue de la aplicación vamos a hacer uso de una app de ejemplo que he creado, tienes la explicación de la app en el siguiente enlace, además esta subida a Github para su despliegue óptimo:

cd /var/www
git clone https://github.com/aviladotgibert/MERN_example.git
cd MERN_example

Backend

Vamos ahora sí, con la instalación de dependencias:

cd /var/www/mi-app-mern/backend
npm install

Vamos a copiar el contenido de las variables de entorno:

cp ../.env.example .env  # Variables seguras

Ahora iniciamos el proyecto con PM2

pm2 start server.js --name "backend-api"
pm2 save
pm2 startup  # Seguir instrucciones para autoarranque

Aquí te dirá algo como:

Simplemente ejecuta ese comando. Ahora, para verificar el estado puedes:

pm2 status

Y puedes probar con:

pm2 logs backend-api  # Para ver logs
curl http://localhost:3000/health  # Endpoint de prueba

# Debe responder:
# {"status":"OK","timestamp":"...","database":"connected"}

Frontend

Ahora vamos a construir el frontend:

cd /var/www/mi-app-mern/frontend
npm install

Elegimos el entorno de desarrollo para las variables:

cp .env.example .env
#Y editamos el archivo:
nano frontend/.env

• Ahora descomenta el que quieras usar, te recomiendo tirar directamente al de producción.

Construimos ahora sí la app:

npm run build

Y vamos a dar los permisos necesarios:

sudo chown -R www-data:www-data dist/
sudo chmod -R 755 dist/

App frontend testing

Si quieres probar el frontend por separado puedes probar en entorno de test:

.env:

VITE_API_URL=http://localhost:3000

Ejecutar:

# Terminal 1 - Backend
cd backend
npm start

# Terminal 2 - Frontend
cd frontend-tareas
npm run dev -- --host

Acceso: http://localhost:5173

---

5. Configuración de Nginx

Creamos la configuración del sitio con un virtualhost:

sudo nano /etc/nginx/sites-available/mi-app-mern

Cuyo contenido sea:

server {
    listen 80;
    server_name 192.168.1.137 _;

    root /var/www/mi-app-mern/frontend/dist;
    index index.html;

    # Mostrar assets específicos
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;  # IMPORTANTE: NO fallback para assets
        access_log off;
    }

    # Location principal (SPA)
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Backend
    location /api/ {
        proxy_pass http://localhost:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

Y activamos el sitio pasandolo a sites-enabled con un enlace simbólico:

sudo ln -s /etc/nginx/sites-available/mi-app-mern /etc/nginx/sites-enabled/
sudo nginx -t  # Verificar sintaxis
sudo systemctl reload nginx

Para verificar, tan sencillo como:

# Nginx
sudo systemctl status nginx
curl http://localhost

Aqui me he quedado!!!!!

---

EXTRAS OPCIONALES

1- Configuración de Cloudflare Tunnel

Este paso es opcional si lo que se quiere es funcionar en testing, si se quiere usar un dominio entonces optaremos con esto aconectarlo directamente a nginx:

# Instalar cloudflared
wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
sudo dpkg -i cloudflared-linux-amd64.deb

# Autenticar
cloudflared tunnel login

# Crear túnel
cloudflared tunnel create mi-app-tunnel

Ahora quédate con el UUID que te ha dado (el que estan en el .json creado) y crea un archivo nuevo:

# Crear archivo de configuración
nano ~/.cloudflared/config.yml

Contenido de config.yml:

tunnel: <TUNNEL-UUID>
credentials-file: /home/usuario/.cloudflared/<TUNNEL-UUID>.json

ingress:
  - hostname: tu-dominio.com
    service: http://localhost:80
  - service: http_status:404

Ejecutar túnel:

cloudflared tunnel run mi-app-tunnel

Comprobamos:

# Cloudflare Tunnel
sudo systemctl status cloudflared  # Si lo configuraste como servicio

---

2- Flujo de Actualización

Como la aplicación no tiene por que ser estática, aquí va un flujo de actualización para seguir los estándares de CI/CD:

1. Actualizar Backend

cd /var/www/mi-app-mern/backend
git pull  # o subir archivos nuevos
npm install  # si hay nuevas dependencias
pm2 restart backend-api

2. Actualizar Frontend

cd /var/www/mi-app-mern/frontend
npm run build
# Los archivos ya están en dist/, Nginx los servirá automáticamente

---

RESUMEN: Comandos Útiles para Gestión

# PM2
pm2 list                    # Ver procesos
pm2 restart backend-api     # Reiniciar aplicación
pm2 logs backend-api        # Ver logs en tiempo real
pm2 monit                   # Monitor de recursos

# Nginx
sudo nginx -t               # Verificar configuración
sudo systemctl reload nginx # Recargar configuración
sudo systemctl restart nginx # Reiniciar servicio

# MongoDB
mongosh                     # Conectar a MongoDB
sudo systemctl restart mongod

# Desarrollo frontend
npm run dev           # Iniciar servidor de desarrollo
npm run build         # Construir para producción
npm run preview       # Preview del build de producción

# Gestión de dependencias
npm install           # Instalar todas las dependencias
npm update           # Actualizar dependencias
npm list             # Ver dependencias instaladas

# Limpieza
rm -rf node_modules dist  # Limpiar todo
npm install              # Reinstalar

# Sistema
sudo netstat -tlnp          # Ver puertos en uso
htop                        # Monitor de recursos

Tienes algunos Logs útiles que te pueden servir para debugging:

# Backend
pm2 logs backend-api

# Nginx
sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log

# MongoDB
sudo tail -f /var/log/mongodb/mongod.log

# Cloudflare
cloudflared tunnel info mi-app-tunnel