# PRACTICA: Nginx como proxy ### Escenario Real: TechStore S.L. > TechStore es una tienda online de productos tecnológicos que necesita dos entornos: **desarrollo** (para pruebas del equipo) y **producción** (acceso público). El objetivo es configurar Nginx en máquinas virtuales para enrutar tráfico según parámetros y virtual hosts, simulando infraestructura empresarial. * **Dominios**: `techstore.local` (sitio principal), `admin.techstore.local` (panel administración) En esta práctica nginx actuará como **intermediario inteligente** entre los clientes (navegadores) y los servidores backend (VM2). Recibe todas las peticiones HTTP en el puerto 80 y decide a qué backend reenviarlas según reglas configuradas. * Los clientes solo conocerán la IP del gateway (MV2 - 10.0.0.10) * Nginx reenviará peticiones a backends internos. * Oculta la arquitectura real y protege servidores backend ``` Cliente (navegador) ↓ Solicita: techstore.local/?env=dev [VM1 Nginx - Proxy Inverso] ↓ Analiza parámetro ?env=dev ↓ Traduce a: http://192.168.56.11:8080 [VM2 Backend - Puerto 8080] ↓ Responde con HTML desarrollo [VM1 Nginx] ↓ Reenvía respuesta al cliente Cliente ve contenido sin saber origen real ```

El cliente nunca accede directamente a VM2, siempre pasa por el proxy Nginx en VM1, que además añade headers como `X-Real-IP` y `X-Forwarded-For` para que los backends sepan la IP original del cliente. *** ## Paso 1: Crear VMs en VirtualBox 1. Crea **VM1 - Nginx Gateway**: * Red NAT con IP estática: 10.0.0.10/24 2. Crea **VM2 - Backend Servers**: * Red NAT con IP estática: 10.0.0.11/24 {% hint style="info" %} Para configurar las IP estáticas recuerda editar `/etc/netplan/*.yaml` ```yaml network: version: 2 ethernets: enp0s3: addresses: [10.0.0.10/24] nameservers: addresses: [8.8.8.8, 8.8.4.4] ``` Aplicar: `sudo netplan apply` {% endhint %} Verifica conectividad con `ping` desde VM1 y viceversa. *** ## Paso 2: Configuración Backend (VM2) ### 2.1 Instalar Nginx y Node.js ```bash sudo apt update && sudo apt upgrade -y sudo apt install -y nginx nodejs npm sudo systemctl enable nginx ``` En esta máquina configuraremos dos webs diferentes con dos sites diferentes. Un site sera el de "development" y el otro sera de "production". Adicionalmente le añadiremos un panel de administración por lo que repetiremos el mismo proceso tres veces: ### 2.2 Crear Aplicación TechStore - Entorno Desarrollo ```bash sudo mkdir -p /var/www/techstore-dev sudo chown -R $USER:$USER /var/www/techstore-dev nano /var/www/techstore-dev/index.html ```

Contenido de la web (Entorno dev):

```html TechStore - Desarrollo

🛒 TechStore S.L.

ENTORNO DE DESARROLLO

Backend Server: 10.0.0.11:8080

💻 Laptop Dell XPS

€1299 [TEST PRICE]

🖱️ Ratón Logitech

€45 [BETA]

Version: 2.1.0-dev | Build: 2026-02-09

```

### 2.3 Crear Aplicación TechStore - Entorno Producción ```bash sudo mkdir -p /var/www/techstore-prod sudo chown -R $USER:$USER /var/www/techstore-prod nano /var/www/techstore-prod/index.html ```

Contenido de la web (Entorno Prod):

```html TechStore - Tienda Oficial

🛒 TechStore S.L.

PRODUCCIÓN

Servidor Oficial - Alta Disponibilidad

💻 Laptop Dell XPS 15

€1499

🖱️ Ratón Logitech MX Master

€89

```

### 2.4 Crear Panel de Administración ```bash sudo mkdir -p /var/www/admin-panel sudo chown -R $USER:$USER /var/www/admin-panel nano /var/www/admin-panel/index.html ```

Contenido HTML (Admin):

```html Panel Admin - TechStore

⚙️ PANEL DE ADMINISTRACIÓN

> Sistema de gestión TechStore

> Servidor: backend-servers (10.0.0.11:9090)

Métrica	Valor
Pedidos Hoy	47
Usuarios Activos	1.203
Stock Crítico	3 productos

> Acceso permitido desde Nginx Gateway

```

### 2.5 Configurar Nginx en VM2 (Puertos Múltiples) Crearemos un server (virtualhost) en nginx de los tres backends cada uno en un puerto diferente: ```bash sudo nano /etc/nginx/sites-available/techstore-backends ``` Cuya configuración será la siguiente: ```nginx # Entorno Desarrollo - Puerto 8080 server { listen 8080; listen [::]:8080; root /var/www/techstore-dev; index index.html; server_name _; location / { try_files $uri $uri/ =404; } } # Entorno Producción - Puerto 8081 server { listen 8081; listen [::]:8081; root /var/www/techstore-prod; index index.html; server_name _; location / { try_files $uri $uri/ =404; } } # Panel Admin - Puerto 9090 server { listen 9090; listen [::]:9090; root /var/www/admin-panel; index index.html; server_name _; location / { try_files $uri $uri/ =404; } } ``` {% hint style="info" %} Nota que lo único que cambia es el puerto y la carpeta donde se encuentra el contenido a desplegar. En esta configuración no ponemos nada de dominios ni URL solamente funcionaremos por puerto (de ahí el tema de gateway nginx). {% endhint %} Activar configuración: ```bash sudo ln -s /etc/nginx/sites-available/techstore-backends /etc/nginx/sites-enabled/ sudo rm /etc/nginx/sites-enabled/default sudo nginx -t sudo systemctl restart nginx ``` Puedes verificar puertos con: `sudo netstat -tlnp | grep nginx` (debe mostrar 8080, 8081, 9090) Instala netstat con sudo apt install netstat. *** ## Paso 3: Configuración Nginx Gateway (VM1) En esta máquina lo que configuraremos será el proxy que reenviará las peticiones al backend según parámetros. Los primeros pasos serán los mismos en ambas máquinas: ### 3.1 Instalar Nginx ```bash sudo apt update && sudo apt install -y nginx sudo systemctl enable nginx ``` ### 3.2 Crear Página de Bienvenida Principal ```bash sudo mkdir -p /var/www/techstore-main sudo chown -R $USER:$USER /var/www/techstore-main nano /var/www/techstore-main/index.html ```

Contenido:

```html TechStore - Bienvenida

🌐 TechStore - Gateway Nginx

Selecciona entorno de acceso:

🟢 Producción 🟡 Desarrollo

Administración: Panel Admin

```

* Nota como podremos pasar de una a otro con los botones tan solo cambiando el parámetro de "`/?env=prod`" del navegador gracias al protocolo HTTP. ### 3.3 Configuración Maestro Nginx con Routing Inteligente Para esto simplemente crearemos otro server (virtualhost) en esta máquina ```bash sudo nano /etc/nginx/sites-available/techstore-gateway ``` Con la siguiente configuración completa: ```nginx # Mapa para traducir parámetro env a puerto backend map $arg_env $backend_port { default 8081; # Por defecto producción "dev" 8080; # Desarrollo "prod" 8081; # Producción explícita } # Sitio Principal - techstore.local server { listen 80; listen [::]:80; server_name techstore.local www.techstore.local; # Logs específicos access_log /var/log/nginx/techstore-access.log; error_log /var/log/nginx/techstore-error.log; # Si viene parámetro ?env, hacer proxy a backend correspondiente location / { if ($arg_env != "") { proxy_pass http://10.0.0.11:$backend_port; break; } # Sin parámetro: mostrar página de bienvenida root /var/www/techstore-main; index index.html; try_files $uri $uri/ =404; } # Headers de seguridad add_header X-Frame-Options "SAMEORIGIN" always; add_header X-Gateway "Nginx-TechStore" always; } # Panel de Administración - admin.techstore.local server { listen 80; listen [::]:80; server_name admin.techstore.local; access_log /var/log/nginx/admin-access.log; error_log /var/log/nginx/admin-error.log; location / { proxy_pass http://192.168.56.11:9090; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` Activar: ```bash sudo ln -s /etc/nginx/sites-available/techstore-gateway /etc/nginx/sites-enabled/ sudo rm /etc/nginx/sites-enabled/default sudo nginx -t sudo systemctl restart nginx ``` *** ## Parte 4: Verificación ### 4.1 Editar Hosts en Linux/Mac Para la verificación podemos usar una máquina virtual ubuntu desktop con mozilla para hacer las verificaciones por dominio. Esta máquina debe estar conectada dentro la misma red NAT. Primero para evitarnos temas de DNS vamos a ir a lo sencillo y vamos a editar el archivo hosts: ```bash sudo nano /etc/hosts ``` Añadir: ``` 10.0.0.10 techstore.local www.techstore.local 10.0.0.10 admin.techstore.local ``` **Ahora desde un navegador en host y deberias comprobar:** | URL | Resultado Esperado | Verificación | | ---------------------------------- | ----------------------------- | --------------------------------- | | `http://techstore.local/` | Página bienvenida con botones | Fondo gris, 2 botones visibles | | `http://techstore.local/?env=prod` | TechStore PRODUCCIÓN (verde) | Precios €1499/€89, botones compra | | `http://techstore.local/?env=dev` | TechStore DESARROLLO (morado) | Badge "DESARROLLO", precios test | | `http://admin.techstore.local/` | Panel admin terminal negro | Tabla métricas, fondo negro/verde | ### 4.3 Pruebas con cURL **En caso que no dispongas suficiente RAM puedes hacer las verificaciones desde la propia maquina VM1 o host con los siguientes comandos:** ```bash # Verificar routing desarrollo curl -s "http://techstore.local/?env=dev" | grep "DESARROLLO" # Verificar routing producción curl -s "http://techstore.local/?env=prod" | grep "PRODUCCIÓN" # Verificar admin curl -s "http://admin.techstore.local/" | grep "ADMINISTRACIÓN" # Test múltiples requests for i in {1..10}; do ENV=$(shuf -e dev prod -n1) echo "Request $i → Env: $ENV" curl -s "http://techstore.local/?env=$ENV" | grep -o "ENTORNO DE [A-Z]*" done ``` ### 4.4 Análisis de Logs **Revisa los logs en VM1 con:** ```bash # Ver accesos en tiempo real sudo tail -f /var/log/nginx/techstore-access.log # Contar requests por parámetro env sudo grep "env=dev" /var/log/nginx/techstore-access.log | wc -l sudo grep "env=prod" /var/log/nginx/techstore-access.log | wc -l # Verificar admin sudo tail /var/log/nginx/admin-access.log ```