GUIA 4 - Configurar Múltiples Proyectos en un VPS con Nginx

Guía Completa: Configurar Múltiples Proyectos en un VPS con Nginx

Estructura de Carpetas Recomendada

/var/www/
├── ERP-Sistemas/
│   ├── DEMO/
│   │   ├── FRONT/       # React/Vite
│   │   └── BACK/        # Express
│   ├── ABELSAC/
│   │   ├── FRONT/       # React/Vite 
│   │   └── BACK/        # Express
│   ├── NUEVA_EMPRESA/   # Ejemplo para expansión
│   │   ├── FRONT/
│   │   └── BACK/

Pro Tip: Mantén esta estructura consistente para todos los clientes. Usa nombres cortos sin espacios.

Configuración Maestra de Nginx

Archivo: /etc/nginx/sites-available/ERP-Sistemas

Configuración Base

server {
    listen 80;
    server_name [IP];

    # Redirección para assets (incluyendo imágenes)
    location ~ ^/(assets|images)/(.*)$ {
        rewrite ^/(assets|images)/(.*)$ /demo/$1/$2 last;
    }

    location /demo {
        alias /var/www/ERP-Sistemas/Demo/ERP_Frontend/dist;
        try_files $uri $uri/ /demo/index.html;
        index index.html;

        # Configuración para todos los archivos estáticos
        location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff2|ttf|json)$ {
            expires 1y;
            add_header Cache-Control "public";
            access_log off;
        }
    }

    location /demo-api/ {
        proxy_pass http://127.0.0.1:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Explicación Detallada:

• location /demo: Sirve los archivos estáticos del frontend construido
• sub_filter: Reescribe rutas en HTML/CSS/JS para que apunten a /demo/
• location /demo-api: Redirige API calls al backend correspondiente
• rewrite: Elimina el prefijo /demo-api antes de pasar al backend

Pasos de Implementación

Instalar Nginx en tu VPS (Ubuntu/Debian)

# Actualizar paquetes del sistema
sudo apt update

# Instalar Nginx
sudo apt install nginx -y

# Verificar que Nginx esté activo
sudo systemctl status nginx

Primera Configuración

1. Habilitar Nginx al inicio del sistema:

   sudo systemctl enable nginx

2. Abrir puertos HTTP/HTTPS en el firewall:

   sudo ufw allow 80/tcp   # HTTP
   sudo ufw allow 443/tcp  # HTTPS
   sudo ufw allow 22/tcp #SSH (acceso remoto, esencial para administrar el VPS).
   sudo ufw allow 1433/tcp #Microsoft SQL Server (asegúrate de que es necesario exponer este puerto públicamente).
   sudo ufw allow 6379/tcp # para redis
   sudo ufw enable

3. Verificar acceso temporal:

   http://[TU-IP]

   Deberías ver la página de bienvenida de Nginx.
4. Crear archivo de configuración:

   sudo nano /etc/nginx/sites-available/empresas

5. Habilitar el sitio:

   sudo ln -s /etc/nginx/sites-available/empresas /etc/nginx/sites-enabled/
   sudo nginx -t  # Verificar sintaxis
   sudo systemctl restart nginx

Para Cada Nueva Empresa

1. Agregar bloque a Nginx:

   Editar el archivo de configuración y añadir:

       # ===== NUEVA_EMPRESA =====
       location /nuevaempresa {
           alias /var/www/EMPRESAS/NUEVA_EMPRESA/FRONT/dist;
           try_files $uri $uri/ /nuevaempresa/index.html;
           sub_filter 'src="/' 'src="/nuevaempresa/';
           sub_filter 'href="/' 'href="/nuevaempresa/';
       }
   
       location /nuevaempresa-api {
           proxy_pass http://localhost:3002/api;  # Usar nuevo puerto
           rewrite ^/nuevaempresa-api/(.*) /api/$1 break;
       }

2. Reiniciar Nginx:

   sudo nginx -t && sudo systemctl restart nginx

3. Configurar .env del frontend:

   VITE_API_BASE_URL=/nuevaempresa-api
   VITE_BASE_PATH=/nuevaempresa

Solución de Problemas Comunes

Error	Solución
404 en recursos estáticos	Verificar que alias apunte a /dist y permisos de carpeta
502 Bad Gateway	Verificar que el backend esté corriendo con pm2 list
Problemas de CORS	Asegurar que Express tenga: app.use(cors({ origin: ['http://tu_ip'] }))

 # 1. Propietario (www-data)
sudo chown -R www-data:www-data /var/www/ERP-Sistemas

# 2. Permisos para directorios (755) y archivos (644)
sudo find /var/www/ERP-Sistemas -type d -exec chmod 755 {} \;
sudo find /var/www/ERP-Sistemas -type f -exec chmod 644 {} \;


#si no funciona 

sudo chmod -R 755 /var/www/ERP-Sistemas

# 3. Reiniciar Nginx
sudo systemctl restart nginx