# Configurar Aplicación Completa: API + Frontend

## 📊 Arquitectura Actual

```
┌─────────────────┐
│   Nginx (80)    │  ← Sirve archivos estáticos (HTML, CSS, JS)
└────────┬────────┘
         │
         ├─── /api/* ────→ ┌──────────────────┐
         │                 │  Node.js (3000)  │  ← API (PM2)
         │                 │  parking-api     │
         │                 └──────────────────┘
         │
         └─── /*.html, /*.css, /*.js ────→ public/ (directo)
```

## ✅ Estado Actual

- ✅ **API**: Corriendo con PM2 (`parking-api` en puerto 3000)
- ❓ **Frontend**: Necesita Nginx configurado

## 🔧 Configurar Nginx para el Frontend

### Paso 1: Crear configuración de Nginx

Crea el archivo `/etc/nginx/sites-available/parking`:

```bash
sudo nano /etc/nginx/sites-available/parking
```

Pega esta configuración (ajusta la ruta según tu servidor):

```nginx
server {
    listen 80;
    server_name tu-dominio.com;  # O tu IP del servidor
    
    # Tamaño máximo para uploads
    client_max_body_size 10M;
    
    # Ruta a los archivos estáticos
    root /var/www/PARKING/public;  # ⚠️ AJUSTA ESTA RUTA
    index index.html;
    
    # Archivos estáticos (HTML, CSS, JS, imágenes)
    location ~* \.(html|css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1d;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }
    
    # Páginas HTML principales
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # Admin y login
    location ~ ^/(admin|login)\.html$ {
        try_files $uri =404;
    }
    
    # API endpoints - Proxy a Node.js (PM2)
    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        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;
        
        # Timeouts para operaciones largas
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }
    
    # Archivos de datos y uploads - también van a Node.js
    location /data/ {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
    }
    
    # Logs
    access_log /var/log/nginx/parking_access.log;
    error_log /var/log/nginx/parking_error.log;
}
```

### Paso 2: Habilitar el sitio

```bash
# Crear enlace simbólico
sudo ln -s /etc/nginx/sites-available/parking /etc/nginx/sites-enabled/

# Verificar configuración
sudo nginx -t

# Si todo está bien, recargar Nginx
sudo systemctl reload nginx
```

### Paso 3: Verificar permisos

```bash
# Asegurar que Nginx puede leer los archivos
sudo chown -R www-data:www-data /var/www/PARKING/public
sudo chmod -R 755 /var/www/PARKING/public
```

## 🔍 Verificación

### 1. Verificar que Nginx está corriendo

```bash
sudo systemctl status nginx
```

### 2. Verificar que la API responde

```bash
curl http://localhost:3000/api/health
# Debe responder: {"ok":true}
```

### 3. Verificar que Nginx sirve el frontend

```bash
# Desde el servidor
curl http://localhost/index.html

# O desde el navegador
# http://tu-dominio.com o http://tu-ip
```

### 4. Verificar que las APIs funcionan a través de Nginx

```bash
curl http://localhost/api/health
# Debe responder: {"ok":true}
```

## 🚀 Acceso a la Aplicación

Una vez configurado:

- **Frontend (Cliente)**: `http://tu-dominio.com/` o `http://tu-ip/`
- **Admin**: `http://tu-dominio.com/admin.html`
- **Login**: `http://tu-dominio.com/login.html`
- **API**: `http://tu-dominio.com/api/health`

## 🔄 Alternativa: Usar Node.js para Todo (Sin Nginx)

Si prefieres que Node.js sirva también los archivos estáticos (más simple, menos optimizado):

### Opción: Usar `src/index.js` en lugar de `src/index-optimized.js`

1. **Modificar `ecosystem.config.cjs`:**

```javascript
module.exports = {
  apps: [{
    name: 'parking-api',
    script: 'src/index.js',  // Cambiar a index.js
    // ... resto de la configuración
  }]
}
```

2. **Reiniciar PM2:**

```bash
pm2 restart parking-api --update-env
```

Con esta opción, Node.js sirve tanto la API como los archivos estáticos en el puerto 3000.

## 📝 Resumen

- **Con Nginx (Recomendado)**: 
  - Nginx (puerto 80) → Frontend + Proxy API
  - Node.js (puerto 3000) → Solo API
  
- **Sin Nginx (Simple)**:
  - Node.js (puerto 3000) → Frontend + API

¿Qué opción prefieres configurar?