Francisco Escobar

Posted on Jul 15

🚀 Construyendo tu Primera Aplicación Web Multi-Tier en AWS

#aws #cloudcomputing #devops #tutorial

📋 Tabla de Contenidos

Introducción
Arquitectura del Proyecto
Requisitos Previos
Etapa 1: Configuración de la Base de Datos (RDS)
Etapa 2: Configuración del Backend (EC2 + Auto Scaling + ALB)
Etapa 3: Configuración del Frontend (S3 + CloudFront)
Etapa 4: Pruebas y Optimización
Costos Estimados
Buenas Prácticas
Conclusión

🎯 Introducción

Una aplicación web multi-tier (multi-capa) es una arquitectura que separa la aplicación en diferentes capas independientes. En este proyecto aprenderás a construir una aplicación completa usando los servicios principales de AWS.

¿Por qué Multi-Tier?

Escalabilidad: Cada capa puede escalar independientemente
Mantenibilidad: Fácil de actualizar y mantener
Seguridad: Mejor aislamiento entre capas
Disponibilidad: Mayor resistencia a fallos

🏗️ Arquitectura del Proyecto

Internet → CloudFront → S3 (Frontend)
                ↓
         Application Load Balancer
                ↓
    Auto Scaling Group (EC2 instances)
                ↓
           RDS Database

Componentes Principales:

Frontend: S3 + CloudFront para contenido estático
Backend: EC2 con Auto Scaling y Load Balancer
Base de Datos: RDS con réplicas de lectura
Balanceador: Application Load Balancer (ALB)

📋 Requisitos Previos

1. Cuenta AWS

Crear cuenta gratuita en aws.amazon.com
Activar AWS Free Tier (12 meses gratuitos)

2. Herramientas Necesarias

AWS CLI: Para comandos desde terminal
Editor de código: VS Code, Sublime, etc.
Navegador web: Para acceder a AWS Console

3. Conocimientos Básicos

HTML/CSS/JavaScript básico
Conceptos de redes (IP, DNS, HTTP)
Línea de comandos básica

🗄️ Etapa 1: Configuración de la Base de Datos (RDS)

Paso 1.1: Crear VPC y Subnets

# 1. Acceder a AWS Console
# 2. Ir a VPC Service
# 3. Crear nueva VPC

Configuración VPC:

Nombre: multi-tier-vpc
CIDR: 10.0.0.0/16
Subnets:
- Subnet Pública 1: 10.0.1.0/24 (us-east-1a)
- Subnet Pública 2: 10.0.2.0/24 (us-east-1b)
- Subnet Privada 1: 10.0.3.0/24 (us-east-1a)
- Subnet Privada 2: 10.0.4.0/24 (us-east-1b)

Paso 1.2: Crear Security Groups

Security Group para RDS:

Nombre: rds-security-group
Reglas de entrada:
- Tipo: MySQL/Aurora
- Puerto: 3306
- Origen: Security Group del EC2

Paso 1.3: Crear RDS Database

Ir a RDS en AWS Console
Click en "Create Database"
Configuración:
- Engine: MySQL 8.0
- Template: Free tier
- DB Instance: db.t3.micro
- Storage: 20 GB SSD
- DB Name: multitierdb
- Username: admin
- Password: TuPasswordSegura123!
Configuración de Red:
- VPC: multi-tier-vpc
- Subnet Group: Crear nuevo con subnets privadas
- Security Group: rds-security-group
- Public Access: No

Paso 1.4: Crear Read Replica

# Después de crear la DB principal
1. Seleccionar la database
2. Actions → Create read replica
3. Configuración:
   - Instance: db.t3.micro
   - Region: Same region
   - AZ: Diferente a la principal

🖥️ Etapa 2: Configuración del Backend (EC2 + Auto Scaling + ALB)

Paso 2.1: Crear Security Groups para EC2

Security Group para EC2:

Nombre: ec2-security-group
Reglas de entrada:
- HTTP (80) desde ALB Security Group
- HTTPS (443) desde ALB Security Group
- SSH (22) desde tu IP

Security Group para ALB:

Nombre: alb-security-group
Reglas de entrada:
- HTTP (80) desde 0.0.0.0/0
- HTTPS (443) desde 0.0.0.0/0

Paso 2.2: Crear Launch Template

Ir a EC2 → Launch Templates
Click "Create Launch Template"
Configuración:
- Name: multi-tier-template
- AMI: Amazon Linux 2
- Instance Type: t2.micro
- Security Group: ec2-security-group
- User Data:

#!/bin/bash
yum update -y
yum install -y httpd php php-mysql
systemctl start httpd
systemctl enable httpd

# Crear aplicación PHP simple
cat > /var/www/html/index.php << 'EOF'
<?php
$servername = "TU_RDS_ENDPOINT";
$username = "admin";
$password = "TuPasswordSegura123!";
$dbname = "multitierdb";

try {
    $pdo = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    echo "<h1>¡Aplicación Multi-Tier Funcionando!</h1>";
    echo "<p>Conexión a base de datos: ✅ Exitosa</p>";
    echo "<p>Servidor: " . gethostname() . "</p>";
    echo "<p>Timestamp: " . date('Y-m-d H:i:s') . "</p>";

} catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
}
?>
EOF

systemctl restart httpd

Paso 2.3: Crear Application Load Balancer

Ir a EC2 → Load Balancers
Create Load Balancer → Application Load Balancer
Configuración:
- Name: multi-tier-alb
- Scheme: Internet-facing
- IP Address: IPv4
- VPC: multi-tier-vpc
- Subnets: Seleccionar subnets públicas
- Security Group: alb-security-group
Target Group:
- Name: multi-tier-targets
- Protocol: HTTP
- Port: 80
- Health Check: /index.php

Paso 2.4: Crear Auto Scaling Group

Ir a EC2 → Auto Scaling Groups
Create Auto Scaling Group
Configuración:
- Name: multi-tier-asg
- Launch Template: multi-tier-template
- VPC: multi-tier-vpc
- Subnets: Subnets privadas
- Load Balancer: Attach to existing → multi-tier-alb
- Target Group: multi-tier-targets
Scaling Policies:
- Desired: 2
- Minimum: 1
- Maximum: 4
- Scaling Policy: Target tracking → CPU 70%

🎨 Etapa 3: Configuración del Frontend (S3 + CloudFront)

Paso 3.1: Crear S3 Bucket

Ir a S3 en AWS Console
Create Bucket
Configuración:
- Name: multi-tier-frontend-[random-numbers]
- Region: us-east-1
- Block Public Access: Desactivar
- Static Website Hosting: Activar

Paso 3.2: Crear Contenido Frontend

index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Tier App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .container {
            background: rgba(255,255,255,0.1);
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        }
        button {
            background: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background: #45a049;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            background: rgba(255,255,255,0.1);
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 Aplicación Multi-Tier en AWS</h1>
        <p>Esta aplicación demuestra una arquitectura de 3 capas:</p>
        <ul>
            <li>Frontend: S3 + CloudFront (estás aquí)</li>
            <li>Backend: EC2 + Auto Scaling + ALB</li>
            <li>Database: RDS MySQL con Read Replicas</li>
        </ul>

        <button onclick="testBackend()">Probar Conexión Backend</button>
        <div id="result"></div>
    </div>

    <script>
        async function testBackend() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = 'Conectando...';

            try {
                const response = await fetch('http://TU_ALB_DNS_NAME/index.php');
                const data = await response.text();
                resultDiv.innerHTML = `<h3>Respuesta del Backend:</h3>${data}`;
            } catch (error) {
                resultDiv.innerHTML = `<h3>Error:</h3><p style="color: #ff6b6b;">${error.message}</p>`;
            }
        }
    </script>
</body>
</html>

Paso 3.3: Configurar CloudFront

Ir a CloudFront
Create Distribution
Configuración:
- Origin Domain: Tu S3 bucket endpoint
- Origin Path: Vacío
- Default Root Object: index.html
- Cache Behavior: Redirect HTTP to HTTPS
- Price Class: Use All Edge Locations

🧪 Etapa 4: Pruebas y Optimización

Paso 4.1: Verificar Conectividad

# 1. Probar RDS
mysql -h TU_RDS_ENDPOINT -u admin -p

# 2. Probar EC2
curl http://TU_ALB_DNS_NAME/index.php

# 3. Probar S3
curl https://TU_CLOUDFRONT_URL

Paso 4.2: Monitoreo

CloudWatch Dashboards:
- CPU utilization de EC2
- Latencia de ALB
- Conexiones a RDS
- Requests de CloudFront
Alertas:
- CPU > 80%
- Latencia ALB > 500ms
- Errores HTTP > 10

Paso 4.3: Optimizaciones

Para RDS:

Habilitar automated backups
Configurar maintenance window
Monitorear slow queries

Para EC2:

Usar AMI optimizada
Configurar logs en CloudWatch
Implementar health checks

Para S3/CloudFront:

Configurar GZIP compression
Optimizar TTL de cache
Usar S3 Transfer Acceleration

💰 Costos Estimados

Free Tier (12 meses):

EC2: 750 horas/mes t2.micro
RDS: 750 horas/mes db.t2.micro
S3: 5GB almacenamiento
CloudFront: 50GB transferencia

Después del Free Tier:

EC2 (2 t2.micro): ~$20/mes
RDS (db.t3.micro): ~$15/mes
ALB: ~$20/mes
S3: ~$1/mes
CloudFront: ~$5/mes

Total estimado: ~$61/mes

🛡️ Buenas Prácticas

Seguridad:

Nunca exponer RDS públicamente
Usar IAM roles en lugar de keys
Configurar Security Groups restrictivos
Activar AWS CloudTrail
Usar HTTPS en todas las comunicaciones

Rendimiento:

Implementar caching en múltiples niveles
Usar Connection Pooling para RDS
Optimizar queries de base de datos
Configurar Auto Scaling adecuadamente

Disponibilidad:

Usar múltiples AZs
Implementar health checks
Configurar automated backups
Tener un plan de disaster recovery

🎉 Conclusión

¡Felicitaciones! Has construido tu primera aplicación web multi-tier en AWS. Has aprendido:

Arquitectura de 3 capas separadas y escalables
Servicios clave de AWS: EC2, RDS, S3, CloudFront, ALB
Auto Scaling para manejar carga variable
Seguridad con Security Groups y VPC
Monitoreo con CloudWatch

Próximos Pasos:

Implementar CI/CD con AWS CodePipeline
Agregar contenedores con ECS/EKS
Implementar caching con ElastiCache
Usar Infrastructure as Code con CloudFormation

Recursos Adicionales:

¿Te gustó este tutorial? ¡Déjame saber en los comentarios qué proyecto de AWS te gustaría ver siguiente!

DEV Community