Área de cliente
NodeJS•15 de diciembre de 2025• 24 vistas

Cómo implementar una aplicación web Node.js en OuiPanel

Cómo implementar una aplicación web Node.js en OuiPanel

Cómo implementar una aplicación web Node.js en OuiPanel

Tiempo estimado: 15 minutos
Dificultad: Intermedia ⭐⭐
Tipo de servidor: Node.js

📋 Introducción

Esta guía explica cómo alojar una aplicación web Node.js (sitio web, API REST, panel de control, etc.) en OuiPanel con un nombre de dominio personalizado y HTTPS automático.

Qué puedes alojar

Tipo de aplicación Ejemplos
🌐 Sitio web Sitio de presentación, blog, cartera
🔌 API REST Backend para aplicación móvil/web
📊 Panel de control Panel de administración, interfaz de gestión
🛒 Aplicación web E-commerce, SaaS, herramienta en línea

Qué necesitas

Requisitos Descripción
📁 Una aplicación Node.js Tu código fuente funcional
💻 Un servidor Node.js Adquirido en OuiHeberg
🌐 Un nombre de dominio (Opcional) Para acceder mediante una URL personalizada

📁 Paso 1: Preparar los Archivos de la Aplicación

Structura de archivos

Tu aplicación debe tener esta estructura:

📁 MiApp/
├── 📄 index.js           ← Archivo principal (o app.js, server.js...)
├── 📄 package.json       ← Dependencias npm
├── 📄 .env               ← Variables de entorno (creado en el servidor)
├── 📁 public/            ← (Opcional) Archivos estáticos (CSS, JS, imágenes)
├── 📁 views/             ← (Opcional) Plantillas (EJS, Pug, Handlebars)
└── 📁 routes/            ← (Opcional) Rutas de la aplicación

Archivo package.json

Crea un archivo package.json con tus dependencias:

{
  "name": "mi-aplicacion-web",
  "version": "1.0.0",
  "description": "Mi aplicación web Node.js",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "dotenv": "^16.3.1"
  }
}

💡 Ajusta "main": "index.js" según el nombre de tu archivo principal (app.js, server.js, etc.).

Archivo principal (index.js)

Aquí tienes un ejemplo de una aplicación Express.js configurada para OuiPanel:

// Cargar las variables de entorno desde .env
require('dotenv').config();

const express = require('express');
const app = express();

// Puerto: utiliza SERVER_PORT (OuiPanel) o PORT (.env) o 3000 por defecto
const PORT = process.env.SERVER_PORT || process.env.PORT || 3000;

// Middleware para analizar JSON
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Servir archivos estáticos (CSS, JS, imágenes)
app.use(express.static('public'));

// Ruta principal
app.get('/', (req, res) => {
    res.send(`
        <!DOCTYPE html>
        <html lang="es">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Mi Aplicación</title>
            <style>
                body { font-family: Arial, sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; }
                h1 { color: #333; }
                .status { background: #d4edda; padding: 15px; border-radius: 5px; color: #155724; }
            </style>
        </head>
        <body>
            <h1>🚀 Mi Aplicación Node.js</h1>
            <div>
                ✅ ¡La aplicación funciona correctamente!
            </div>
            <p>Servidor iniciado en el puerto ${PORT}</p>
        </body>
        </html>
    `);
});

// Ruta de ejemplo de API
app.get('/api/status', (req, res) => {
    res.json({
        status: 'online',
        message: 'API funcional',
        timestamp: new Date().toISOString()
    });
});

// Ruta de API con parámetro
app.get('/api/hello/:name', (req, res) => {
    res.json({
        message: `¡Hola ${req.params.name}!`
    });
});

// Iniciar el servidor en 0.0.0.0 (importante para OuiPanel)
app.listen(PORT, '0.0.0.0', () => {
    console.log(`✅ Servidor iniciado en http://0.0.0.0:${PORT}`);
    console.log(`📅 ${new Date().toLocaleString('es-ES')}`);
});

⚠️ IMPORTANTE: El servidor debe escuchar en 0.0.0.0 (todas las interfaces), no en localhost o 127.0.0.1.

Ejemplo con plantillas EJS

Si estás utilizando plantillas EJS:

package.json:

{
  "name": "mi-aplicacion-web",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "ejs": "^3.1.9",
    "dotenv": "^16.3.1"
  }
}

index.js:

require('dotenv').config();

const express = require('express');
const app = express();
const PORT = process.env.SERVER_PORT || process.env.PORT || 3000;

// Configuración EJS
app.set('view engine', 'ejs');
app.set('views', './views');

// Archivos estáticos
app.use(express.static('public'));

// Ruta principal
app.get('/', (req, res) => {
    res.render('index', { 
        title: 'Mi Aplicación',
        message: '¡Bienvenido a mi sitio!'
    });
});

app.listen(PORT, '0.0.0.0', () => {
    console.log(`✅ Servidor iniciado en el puerto ${PORT}`);
});

views/index.ejs:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

📤 Paso 2: Subir los Archivos a OuiPanel

Mediante el Administrador de Archivos

  1. Conéctate a OuiPanel
  2. Selecciona tu servidor Node.js
  3. En el menú lateral, haz clic en Administrador de archivos

Imagen

  1. Elimina los archivos predeterminados (si los hay)
  2. Haz clic en Subir (Upload)
  3. Sube tus archivos:
    • index.js (o app.js, server.js...)
    • package.json
    • Tus carpetas (public/, views/, routes/...) si es necesario

Imagen

⚠️ No subas: El archivo .env se creará directamente en el servidor (más seguro).

Mediante SFTP (Recomendado para varios archivos)

  1. Conéctate por SFTP con FileZilla
  2. Arrastra y suelta todo el contenido de tu carpeta de aplicación
  3. Verifica que todos los archivos se hayan subido correctamente

📖 Consulta la guía "Acceso SFTP con FileZilla" para obtener instrucciones detalladas.

🔑 Paso 3: Crear el Archivo .env

Cree un archivo .env para almacenar de forma segura sus variables de entorno.

Crear el archivo .env

  1. En el Administrador de archivos, haga clic en Nuevo archivo
  2. Nómbrelo .env (con el punto delante)
  3. Agregue sus variables:
# Configuración de la aplicación
PORT=3000
NODE_ENV=production

# Base de datos (si es necesario)
DATABASE_URL=mysql://user:password@host:3306/database

# Claves API (ejemplos)
API_KEY=your_api_key
SECRET_KEY=your_secret_key

Imagen

  1. Haga clic en Crear o Guardar

💡 Consejo: La variable SERVER_PORT se proporciona automáticamente por OuiPanel. Úsela preferiblemente en su código.

Estructura final en el servidor

📁 Raíz del servidor/
├── 📄 .env               ← Variables de entorno
├── 📄 index.js           ← Su código
├── 📄 package.json       ← Dependencias
├── 📁 public/            ← Archivos estáticos
├── 📁 views/             ← Plantillas
└── 📁 node_modules/      ← (creado automáticamente)

⚙️ Paso 4: Configurar el Archivo de Inicio

OuiPanel necesita saber qué archivo ejecutar al inicio.

Acceder a los parámetros

  1. En el menú lateral, haga clic en Configuración
  2. Haga clic en Parámetros del servidor

Imagen

Configurar el archivo a ejecutar

Localice el campo Archivo a ejecutar (o Main File / Startup File):

Imagen

Su archivo principal Valor a colocar
index.js index.js
app.js app.js
server.js server.js
src/index.js src/index.js

⚠️ Importante: El nombre debe coincidir exactamente con su archivo (distingue mayúsculas y minúsculas).

🚀 Paso 5: Iniciar la Aplicación

Iniciar el servidor

  1. En el menú lateral, haga clic en Consola
  2. Haga clic en Iniciar

Instalación automática de dependencias

En el primer inicio, el servidor ejecuta automáticamente npm install:

> npm install
added 62 packages in 4s

> node index.js
✅ Servidor iniciado en http://0.0.0.0:25639
📅 15/12/2025 14:30:00

[Imagen

Captura de pantalla realizada con la configuración EJS

Probar la aplicación

  1. Tomar nota del puerto mostrado en la consola (ej: 25639)
  2. Obtener la IP de su servidor en la Vista Global
  3. Acceder a http://IP:PUERTO en su navegador

Ejemplo: http://51.77.xxx.xxx:25639

ImagenImagen

💡 Para un acceso más sencillo con un nombre de dominio y HTTPS, configure el Proxy Manager (siguiente paso).

🌐 Paso 6: Configurar un Nombre de Dominio (Proxy Manager)

Para acceder a su aplicación a través de una URL limpia con HTTPS (ej: https://monapp.com), utilice el Proxy Manager.

Requisitos previos

  • ✅ Un nombre de dominio que posea
  • ✅ Acceso a la zona DNS de su dominio

Configurar el DNS

  1. En OuiPanel → Proxy Manager, tome nota de la IP del Proxy
  2. En su registrador (OVH, Cloudflare, etc.), cree un registro DNS:
Tipo Nombre Valor
A @ o app IP del Proxy

Agregar el dominio en OuiPanel

  1. En el menú lateral, haga clic en Proxy Manager
  2. Haga clic en Agregar
  3. Rellene:
Campo Valor
Nombre de dominio monapp.com o app.mondomaine.fr
Puerto El puerto de su aplicación (ej: 25639)
SSL ✅ Activado

Imagen


Imagen


Imagen


Imagen

  1. Haga clic en Crear la redirección

Resultado

Su aplicación ahora es accesible a través de:

  • ✅ https://monapp.com (con HTTPS automático)
  • ✅ Certificado SSL gratuito (Let's Encrypt)

📖 Consulte la guía "Configurar un Nombre de Dominio con el Proxy Manager" para más detalles.

🔧 Solución de Problemas

La aplicación no se inicia

❌ Error ✅ Solución
No se puede encontrar el módulo 'express' Verifique package.json y reinicie
No se puede encontrar el módulo 'dotenv' Agregue dotenv en package.json
Error: No se puede encontrar el módulo './index.js' Archivo de inicio incorrecto configurado
Error de sintaxis Error en su código JavaScript

La aplicación se inicia pero no es accesible

❌ Causa ✅ Solución
Escucha en localhost Cambie a 0.0.0.0
Puerto incorrecto Utilice process.env.SERVER_PORT
Cortafuegos El puerto debe ser el asignado por OuiPanel

Verifique su código:

// ❌ INCORRECTO - escucha solo en local
app.listen(3000, 'localhost', () => {});
app.listen(3000, '127.0.0.1', () => {});

// ✅ CORRECTO - escucha en todas las interfaces
app.listen(PORT, '0.0.0.0', () => {});

Error 502 Bad Gateway (Proxy Manager)

❌ Causa ✅ Solución
Aplicación no iniciada Inicie el servidor en OuiPanel
Puerto incorrecto en Proxy Manager Verifique el puerto configurado
Aplicación bloqueada Consulte la Consola

La aplicación se bloquea al iniciar

❌ Causa ✅ Solución
Variable de entorno faltante Verifique el archivo .env
Error de sintaxis Corrija el código
Paquete faltante Verifique package.json

Agregar manejo de errores:

// Gestionar errores no capturados
process.on('uncaughtException', (error) => {
    console.error('Error no capturado:', error);
});

process.on('unhandledRejection', (error) => {
    console.error('Promesa rechazada:', error);
});

npm install falla

❌ Error ✅ Solución
package.json not found Verifique que el archivo esté en la raíz
ERESOLVE unable to resolve Actualice las versiones en package.json

🔒 Seguridad

Archivo .env

✅ Por hacer ❌ No hacer
Crear el .env en el servidor Subir el .env desde su PC
Agregar .env al .gitignore Hacer commit del .env en GitHub
Usar variables para secretos Poner las claves API en el código

Archivo .gitignore recomendado:

# Variables de entorno
.env
.env.local
.env.production

# Módulos de Node
node_modules/

Mejores prácticas de seguridad

const helmet = require('helmet');  // Seguridad HTTP
const rateLimit = require('express-rate-limit');  // Anti-DDoS

// Agregar en package.json: "helmet": "^7.1.0", "express-rate-limit": "^7.1.5"

app.use(helmet());

const limiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15 minutos
    max: 100 // 100 solicitudes máximas por IP
});
app.use(limiter);

💡 Buenas Prácticas

Rendimiento

  • ✅ Utilice NODE_ENV=production en producción
  • ✅ Active la compresión con compression
  • ✅ Guarde en caché los archivos estáticos
const compression = require('compression');
app.use(compression());

// Caché de archivos estáticos (1 día)
app.use(express.static('public', { maxAge: '1d' }));

Estructura avanzada

Para una aplicación más compleja:

📁 MiApp/
├── 📄 index.js              ← Punto de entrada
├── 📄 package.json
├── 📄 .env
├── 📁 config/
│   └── 📄 database.js       ← Configuración BD
├── 📁 routes/
│   ├── 📄 index.js          ← Rutas principales
│   ├── 📄 api.js            ← Rutas API
│   └── 📄 auth.js           ← Rutas de autenticación
├── 📁 controllers/
│   └── 📄 userController.js
├── 📁 models/
│   └── 📄 User.js
├── 📁 middleware/
│   └── 📄 auth.js
├── 📁 public/
│   ├── 📁 css/
│   ├── 📁 js/
│   └── 📁 images/
└── 📁 views/
    ├── 📄 index.ejs
    └── 📄 layout.ejs

📦 Frameworks Soportados

OuiPanel soporta todos los frameworks de Node.js:

Framework Descripción
Express.js Framework minimalista (utilizado en esta guía)
Fastify Alternativa rápida a Express
Koa Framework ligero por el equipo de Express
NestJS Framework TypeScript estructurado
Next.js Framework React con SSR
Nuxt.js Framework Vue.js con SSR

💡 El principio sigue siendo el mismo: escuchar en 0.0.0.0 con el puerto proporcionado por OuiPanel.

📝 Resumen

1. Preparar los archivos (index.js + package.json con dotenv)
2. Asegurarse de que el servidor escuche en 0.0.0.0:PUERTO
3. Subir los archivos a OuiPanel (sin el .env)
4. Crear el archivo .env en el servidor
5. Configurar el archivo de inicio (index.js, app.js...)
6. Iniciar el servidor
7. Probar a través de http://IP:PUERTO
8. (Opcional) Configurar el Proxy Manager para un dominio con HTTPS
Volver a la documentación