AWS S3 + CloudFront + Route53 Guía Completa de Implementación en Entorno de Producción

📅 2026-01-31

✅Primera Parte: Preparación Previa

Lista de Verificación de Preparación

  • Cuenta de AWS (con método de pago activado)
  • Nombre de dominio propio (por ejemplo: example.com)
  • Archivos del sitio web preparados (HTML/CSS/JS)
  • Navegador abierto en la consola de AWS (console.aws.amazon.com)

Comprensión de Conceptos Clave

  • Bucket de S3: Contenedor para almacenar archivos del sitio web
  • CloudFront: CDN global, acelera la distribución de contenido
  • Route53: Servicio de resolución DNS, asocia dominios
  • ACM: Servicio de certificado SSL/TLS gratuito
  • OAC: Origin Access Control, garantiza que solo CloudFront acceda a S3

💾Segunda Parte: Creación y Configuración del Bucket de S3

1Crear un Bucket de S3

Ruta: Página de inicio de la consola de AWS → S3 → Buckets → Crear bucket

Pasos Detallados

  1. Inicia sesión en la consola de AWS
  2. En el cuadro de búsqueda superior, ingresa S3 → Haz clic para entrar al servicio S3
  3. En la barra lateral izquierda, haz clic en "Buckets"
  4. Haz clic en el botón "Crear bucket" (azul)

Rellenar el Formulario

┌─ Nombre del bucket │ Ingresa: example-com-website │ ✓ Único globalmente │ ✓ Solo letras minúsculas, números, guiones │ ✓ No puede comenzar con "xn--" │ ├─ Región │ Selecciona: us-east-1 (o la región más cercana) │ 💡 Se recomienda us-east-1 para reducir costos de CloudFront │ ├─ Propiedad del objeto │ Selecciona: ACL deshabilitado │ ├─ Configuración de bloqueo de acceso público │ ✓ Mantén todo marcado (controlará el acceso a través de CloudFront más adelante) │ ├─ Control de versiones │ ○ Deshabilitado (opcional, se recomienda para reducir costos) │ ├─ Cifrado del lado del servidor │ ○ Usar claves administradas por Amazon S3 (SSE-S3) │ └─ Botón Crear Haz clic en "Crear bucket"
✅ Indicador de Éxito: El nuevo bucket aparece en la lista de buckets con estado ✓

2Habilitar Alojamiento de Sitio Web Estático

Ruta: Bucket de S3 → Propiedades → Editar alojamiento de sitio web estático

Pasos Detallados

  1. Haz clic en el nombre del bucket que acabas de crear (example-com-website)
  2. Haz clic en la pestaña "Propiedades" (quinta desde la derecha)
  3. Desplázate hacia abajo para encontrar el área de "Alojamiento de sitio web estático"
  4. Haz clic en el botón "Editar"

Elementos de Configuración

┌─ Alojamiento de sitio web estático │ ○ Habilitar ← Debes seleccionar esta opción │ ├─ Tipo de alojamiento │ ○ Alojar un sitio web ← Selecciona esta opción (no selecciones redireccionamiento de solicitudes) │ ├─ Documento de índice │ Ingresa: index.html │ Descripción: Archivo que se devuelve cuando el usuario accede a / │ ├─ Documento de error │ Ingresa: error.html │ Descripción: Archivo que se devuelve cuando ocurren errores 404/403 │ └─ Guardar cambios → Haz clic en el botón "Guardar"
✅ Verificación Exitosa:
  • La página muestra "✓ Actualización completada"
  • Bajo "Alojamiento de sitio web estático" se muestra "Habilitado"
  • Verás una URL de punto de acceso del sitio web

3Subir Archivos del Sitio Web

Ruta: Bucket de S3 → Objetos → Subir

Ejemplo de Estructura de Archivos

my-website/ ├── index.html ← Requerido ├── error.html ← Requerido ├── css/ │ └── style.css ├── js/ │ └── app.js ├── images/ │ └── logo.png └── about.html

Método de Subida

Método A: Arrastrar y Soltar
Arrastra la carpeta del sitio web al área de subida, soporta subida recursiva de subcarpetas

Método B: Seleccionar Haciendo Clic
Haz clic en "Agregar archivo" o "Agregar carpeta" y selecciona archivos uno a uno
✅ Verificación de Subida:
  • Observa que el progreso de subida llega al 100%
  • Después de regresar al bucket, ves la lista de todos los archivos

🔐Tercera Parte: Crear Origin Access Control (OAC)

4Crear OAC

Ruta: CloudFront → Seguridad → Origin Access

Pasos Detallados

  1. En el cuadro de búsqueda superior, ingresa CloudFront → Entra al servicio CloudFront
  2. En la barra lateral izquierda, expande el menú "Seguridad"
  3. Haz clic en "Origin Access"
  4. Haz clic en el botón "Crear Origin Access Control"

Rellenar el Formulario

┌─ Nombre del Origin Access Control │ Ingresa: s3-website-oac │ Descripción: Para facilitar la identificación, personalizable │ ├─ Tipo de origen │ ✓ S3 ← Debes seleccionar S3 │ ├─ Descripción (opcional) │ Ingresa: Para sitio web estático de example.com │ └─ Botón Crear Haz clic en "Crear"
✅ Indicador de Éxito:
  • El OAC recién creado aparece en la página
  • Copia el ID de OAC mostrado (por ejemplo: E127EXAMPLE51Z)
⚠️ Nota Importante: Recuerda el ID de OAC, lo necesitarás para la configuración posterior

⚡Cuarta Parte: Crear Distribución de CloudFront

5Crear Distribución de CloudFront

Ruta: CloudFront → Distribuciones → Crear distribución

Configuración de Origen - Parte de Origin

┌─ Dominio de Origin │ Haz clic en el cuadro de entrada → Selecciona el bucket de S3 en el desplegable │ Debe mostrar: example-com-website.s3.us-east-1.amazonaws.com │ ⚠️ No selecciones el punto de acceso s3-website, selecciona la URL de S3 estándar │ ├─ Acceso de Origin │ ○ Configuración de Origin Access Control ← Selecciona esta opción │ ├─ Control de Acceso de Origen │ Haz clic en el desplegable → Selecciona el "s3-website-oac" que creaste anteriormente │ └─ Protocolo cuando S3 es el origen ○ Solo HTTPS ← Se recomienda seleccionar (más seguro)

Configuración de Comportamiento de Caché Predeterminado

┌─ Política de protocolo del espectador │ ○ Redirigir HTTP a HTTPS ← Selecciona esta opción │ Descripción: Redirige automáticamente HTTP a HTTPS │ ├─ Métodos HTTP permitidos │ ✓ GET, HEAD (mantén el predeterminado) │ ├─ Política de caché y política de solicitud de origen │ Política de caché: Haz clic en desplegable → Selecciona "CachingOptimized" │ Política de solicitud de origen: Haz clic en desplegable → Selecciona "S3Origin" │ └─ Comprimir objetos ✓ Habilitar ← Puede reducir costos de datos

Configuración de Distribución

┌─ Habilitar esta distribución │ ✓ Debe estar marcado │ ├─ Nombres de dominio alternativos (CNAME) │ ⚠️ No completes por ahora, configura después │ ├─ Objeto raíz predeterminado │ Ingresa: index.html │ Descripción: Archivo que se devuelve cuando se accede a / │ ├─ IPv6 │ ✓ Habilitar (ya es el predeterminado) │ └─ Crear distribución Haz clic en el botón "Crear distribución"
⏳ Esperar: La implementación de la distribución tarda 5-10 minutos, el estado cambia de "En progreso" a "Implementado"

6Copiar Nombre de Dominio de CloudFront

Ruta: CloudFront → Distribuciones → Detalles de Distribución

  1. Después de crear la distribución, haz clic en el ID de distribución
  2. En la pestaña "Detalles de Distribución" visualiza la siguiente información
  3. Copia el nombre de dominio de la distribución (d111111abcd.cloudfront.net)
Nombre de dominio de distribución: d111111abcd.cloudfront.net ↑ Copia este elemento (para usar después) ID de distribución: E1234ABCD

7Aplicar Política del Bucket de S3

Ruta: S3 → Bucket → Permisos → Política del Bucket

Pasos de Operación

  1. Vuelve al servicio S3
  2. Selecciona el bucket del sitio web (example-com-website)
  3. Haz clic en la pestaña "Permisos"
  4. Desplázate hacia abajo para encontrar "Política del Bucket" y haz clic en "Editar"
  5. Pega el siguiente JSON en el cuadro de edición

JSON de Política del Bucket (requiere modificación)

{ "Version": "2012-10-17", "Statement": [ { "Sid": "AllowCloudFrontOAC", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::example-com-website/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/E1234ABCD" } } } ] }
⚠️ Tres Elementos que Debes Modificar:
  • example-com-website → Reemplaza con el nombre de tu bucket
  • 123456789012 → Reemplaza con tu ID de cuenta de AWS
  • E1234ABCD → Reemplaza con tu ID de distribución de CloudFront
✅ Completado: Haz clic en "Guardar cambios"

🔒Quinta Parte: Solicitar Certificado ACM

8Solicitar Certificado SSL/TLS

Ruta: ACM (AWS Certificate Manager) → Certificados → Solicitar certificado

Nota Importante

⚠️ La Región es Muy Importante: Asegúrate de que la región sea US East (N. Virginia), CloudFront solo soporta certificados de esta región

Pasos Detallados

  1. En el cuadro de búsqueda superior, ingresa Certificate Manager → Entra al servicio ACM
  2. Asegúrate de que la región sea US East (N. Virginia)
  3. Haz clic en el botón "Solicitar certificado"

Rellenar el Formulario

┌─ Tipo de certificado │ ○ Certificado público ← Debes seleccionar esta opción │ ├─ Agregar nombres de dominio │ Haz clic en "Agregar nombre de dominio" → Ingresa: example.com │ Vuelve a hacer clic → Ingresa: *.example.com │ │ Visualización final: │ ✓ example.com │ ✓ *.example.com │ ├─ Método de validación │ ○ Validación DNS ← Selecciona esta opción (más rápido que Email) │ ├─ Algoritmo de clave │ ○ RSA 2048 (mantén el predeterminado) │ ├─ Etiquetas (opcional) │ Ingresa: website-cert │ └─ Botón Solicitar Haz clic en "Solicitar"

Validación DNS Posterior

Después de solicitar, la página te pedirá validar el dominio:

Pasos:
  1. En el área de "Validación de dominio" verás los registros de validación
  2. Haz clic en el botón "Crear registro de Route53"
  3. AWS agregará automáticamente un registro CNAME en Route53
  4. Espera 5-30 minutos, el estado cambiará a "Emitido"
✅ Completado: El estado del certificado cambiará a "Emitido"

🌐Sexta Parte: Configuración de DNS de Route53

9Crear Zona Alojada de Route53

Ruta: Route53 → Zonas Alojadas → Crear Zona Alojada

Pasos Detallados

  1. En el cuadro de búsqueda superior, ingresa Route53 → Entra al servicio Route53
  2. En la barra lateral izquierda, haz clic en "Zonas Alojadas"
  3. Haz clic en el botón "Crear Zona Alojada"

Rellenar el Formulario

┌─ Nombre de dominio │ Ingresa: example.com │ ⚠️ No incluyas www o http:// │ ├─ Descripción (opcional) │ Ingresa: Alojamiento de sitio web │ ├─ Tipo │ ○ Zona Alojada Pública ← Selecciona esta opción │ └─ Crear Zona Alojada Haz clic en el botón "Crear Zona Alojada"

Registrar Información Importante

ID de Zona Alojada: Z1234567890ABC ↑ Copia y anota este elemento Servidores de Nombres (registros NS): ns-1111.awsdns-22.com ns-2222.awsdns-33.co.uk ns-3333.awsdns-44.org ns-4444.awsdns-55.net ↑ Copia estos 4 registros NS

10Actualizar Configuración de DNS del Registrador de Dominios

Operación en el Registrador de Dominios (como GoDaddy, Namecheap, Aliyun, etc.)

Pasos

  1. Inicia sesión en tu cuenta del registrador de dominios
  2. Encuentra "Gestión de DNS" o "Gestión de Dominios"
  3. Modifica los Servidores de Nombres (registros NS) a los 4 que copiaste arriba
  4. Guarda los cambios
⏳ Propagación de DNS: Puede tardar 1-48 horas, puedes verificar con el siguiente comando:
nslookup example.com # Deberías ver los registros NS de AWS

11Crear Registros de Alias en Route53

Ruta: Route53 → Zonas Alojadas → Crear Registro

Crear Primer Registro (Dominio Raíz)

┌─ Nombre del registro │ Déjalo en blanco (representa el dominio raíz example.com) │ ├─ Tipo de registro │ Haz clic en desplegable → Selecciona "A" │ ├─ Alias │ ✓ Habilitar alias ← Debes marcarlo │ ├─ Seleccionar política de tráfico │ ○ Enrutamiento simple ← Mantén el predeterminado │ ├─ Enrutar tráfico a │ Haz clic en desplegable → Selecciona "Distribución de CloudFront" │ ├─ Seleccionar distribución │ Haz clic en desplegable → Selecciona tu distribución (d111111abcd.cloudfront.net) │ ├─ Evaluar estado de salud del objetivo │ ○ No (mantén el predeterminado) │ └─ Crear registro Haz clic en "Crear registro"

Crear Segundo Registro (Subdominio www)

Repite los pasos anteriores, pero cambia "Nombre del registro" a www, el resto de la configuración es igual.

✅ Completado: Ambos registros deben apuntar a la misma distribución de CloudFront

12Configurar CNAME de CloudFront y Certificado

Ruta: CloudFront → Distribuciones → Editar

Pasos

  1. Vuelve al servicio CloudFront
  2. Selecciona tu distribución (haz clic en ID de distribución)
  3. Haz clic en el botón "Editar"
  4. Encuentra el campo "Nombres de dominio alternativos (CNAME)"
  5. Haz clic en el cuadro de entrada y agrega dos nombres de dominio
Agregar en el cuadro de entrada de nombres de dominio alternativos: example.com www.example.com

Seleccionar Certificado SSL

Desplázate hacia abajo para encontrar "Certificado SSL personalizado" o "Certificado SSL" ┌─ Certificado SSL │ ✓ Certificado SSL personalizado │ ├─ Seleccionar certificado │ Haz clic en desplegable → Selecciona el certificado que solicitaste anteriormente │ Debe mostrar: example.com (y *.example.com) │ └─ Guardar Haz clic en "Guardar cambios"
⏳ Esperar Implementación: El estado de la distribución cambia de "En progreso" a "Implementado" (generalmente 5-10 minutos)

⚙️Séptima Parte: Configurar Política de Caché

13Establecer Caché para Diferentes Tipos de Archivo

Ruta: CloudFront → Distribuciones → Comportamientos → Editar

Este paso se utiliza para optimizar costos y rendimiento. Establece diferentes tiempos de caché para diferentes tipos de archivo.

Configuración de Comportamiento Predeterminado

1. Vuelve a la página de edición de distribución de CloudFront 2. Haz clic en la pestaña "Comportamientos" 3. Selecciona Comportamiento Predeterminado → Haz clic en "Editar" ┌─ Clave de caché y política de solicitud de origen │ Política de caché: CachingOptimized (ya configurado) │ ├─ Encabezados de control de caché de solicitud del espectador │ ✓ Usar encabezado Cache-Control original │ └─ Guardar Haz clic en "Guardar"

Opcional: Crear Comportamiento Separado para HTML

Si necesitas un control más granular, puedes crear reglas de comportamiento diferentes para diferentes tipos de archivo:

Comportamiento de Archivo HTML:
Patrón de ruta: *.html Política de caché: Cache Deshabilitado (no almacenar en caché, obtener lo más reciente cada vez) Política de solicitud de origen: S3Origin
Comportamiento de Archivo JavaScript:
Patrón de ruta: *.js Política de caché: CachingOptimized Compresión: Habilitar

✔️Octava Parte: Prueba y Verificación

14Probar Acceso al Sitio Web

URL de Prueba

Accede en el navegador: https://example.com https://www.example.com https://d111111abcd.cloudfront.net (URL directa de CloudFront)

Indicadores de Éxito

  • ✅ La página se carga normalmente
  • ✅ HTTPS es válido (la barra de direcciones muestra un icono de candado)
  • ✅ La información del certificado es correcta (haz clic en el icono de candado para ver)

Tabla de Solución de Problemas

Problema Causa Solución
Muestra página de error de AWS S3 Política del bucket de S3 no configurada correctamente Verifica el ID de distribución en la política del bucket
Muestra "Access Denied" OAC no aplicado correctamente Confirma que hay OAC en la política del bucket de S3
El nombre de dominio personalizado no funciona DNS de Route53 no ha entrado en vigor Espera propagación de DNS (máximo 48 horas)
Certificado SSL inválido Certificado ACM no implementado en CloudFront Selecciona el certificado correcto en CloudFront
El acceso es lento El caché no está funcionando Verifica la configuración del encabezado Cache-Control

🚀Novena Parte: Optimización de Rendimiento

15Configurar Optimización de Encabezado de Caché

Establecer encabezados Cache-Control apropiados para archivos en S3 puede reducir significativamente los costos y mejorar el rendimiento.

Método A: A través de la Consola de AWS

  1. S3 → Bucket → Objetos
  2. Selecciona archivo → "Acciones de Objeto" → "Editar Metadatos"
  3. Agrega metadatos personalizados (Clave: Cache-Control)

Recomendación de Tiempo de Caché

Tipo de Archivo Valor de Cache-Control Descripción
Archivo HTML public, max-age=300, must-revalidate 5 minutos, debe revalidar
CSS/JS/Imagen public, max-age=31536000, immutable 1 año, requiere nombres de archivo con versión
Respuesta de API public, max-age=0 Sin caché, obtener lo más reciente cada vez

Método B: A través de AWS CLI

# Subir y configurar caché HTML aws s3 cp index.html s3://example-com-website/index.html \ --metadata "Cache-Control=public, max-age=300" # Subir y configurar caché a largo plazo para JS/CSS aws s3 cp app.a1b2c3d4.js s3://example-com-website/ \ --metadata "Cache-Control=public, max-age=31536000, immutable"

16Habilitar Compresión Gzip

Habilitar compresión automática en CloudFront puede reducir el tráfico en 60-70%.

Pasos

  1. CloudFront → Distribuciones → Editar
  2. Encuentra "Comportamiento de Caché Predeterminado"
  3. Marca "Habilitar Compresión" ✓
💰 Ahorro de Costos: Después de habilitar la compresión, los archivos de texto (HTML, CSS, JS) pueden reducir 60-70% del volumen de transferencia

📊Décima Parte: Monitoreo y Control de Costos

17Configurar Alertas de Monitoreo

Monitoreo del Costo de CloudFront

  1. Entra en CloudWatch o Gestión de Costos
  2. Configura alertas presupuestarias
Nombre del presupuesto: Website Monthly Cost Cantidad del presupuesto: $10 (ejemplo) Umbral de alerta: Notificar cuando alcance el 80%

Monitoreo de Indicadores Clave de Rendimiento

Visualiza los siguientes indicadores en la distribución de CloudFront:

  • Número de solicitudes: Total de solicitudes por día
  • Volumen de transferencia de datos: Tamaño del tráfico de salida
  • Tasa de acierto de caché: Debería ser > 90%
  • Tasa de errores: Debería estar cerca de 0%

Tabla de Estimación de Costos (Mensual)

Servicio Costo Descripción
Almacenamiento de S3 $0.23 10GB × $0.023
Solicitudes GET de S3 $0.04 1M ÷ 1000 × $0.0004
Salida de CloudFront Gratis Asignación gratuita de 1TB (100GB usado)
Solicitudes de CloudFront Gratis Asignación gratuita de 10M (1M usado)
Route53 $0.50 Tarifa mensual de zona alojada
Certificado ACM Gratis Gratis para uso interno de AWS
Total $0.77/mes

Preguntas Frecuentes

P1: ¿Cómo actualizar archivos del sitio web?

# Método 1: Usar AWS CLI aws s3 cp ./new-file.html s3://example-com-website/ aws s3 sync ./website-files/ s3://example-com-website/ --delete # Método 2: Usar la consola de AWS # S3 → Bucket → Subir → Seleccionar archivo → Subir

P2: ¿Cómo limpiar el caché de CloudFront?

  1. CloudFront → Distribuciones → Invalidaciones
  2. Crear invalidación → Ingresa ruta /* → Crear
💡 Consejo: Esto eliminará todos los archivos en caché (generalmente entra en vigor en 5 minutos)

P3: ¿Cuál es el flujo de transferencia de datos de S3 + CloudFront?

Usuario → Nodo Perimetral de CloudFront → Bucket de S3 ↓ Devolver contenido en caché (rápido)

P4: ¿Cómo implementar redirección HTTPS?

Ya está configurado en CloudFront:

  • Política de protocolo del espectador: Redirigir HTTP a HTTPS

Todas las solicitudes HTTP se redirigirán automáticamente a HTTPS.

✅Lista de Verificación Resumida

Después de la Implementación, Verifica los Siguientes Elementos

  • Bucket de S3 creado y archivos subidos
  • Alojamiento de sitio web estático habilitado (index.html, error.html)
  • OAC creado
  • Distribución de CloudFront creada e implementada
  • Certificado ACM solicitado y verificado
  • Zona alojada de Route53 creada
  • DNS del registrador de dominios actualizado a NS de Route53
  • Registros de alias (registros A) creados
  • CNAME de CloudFront configurado
  • Certificado ACM aplicado a CloudFront
  • https://example.com accesible normalmente
  • Política de caché optimizada
  • Compresión habilitada
  • Monitoreo de costos configurado

Mantenimiento Posterior

Operación Diaria

  • Verifica regularmente la tasa de acierto de caché de CloudFront (debería ser > 90%)
  • Monitorea el costo mensual
  • Usa el comando aws s3 sync al actualizar contenido del sitio web

Mantenimiento Regular

  • Verifica la fecha de vencimiento del certificado ACM (renovación automática)
  • Verifica si la configuración de DNS de Route53 es correcta
  • Limpia versiones antiguas de objetos S3 (si se habilita el control de versiones)

Optimización de Rendimiento

  • Usa registros en tiempo real de CloudFront para analizar la tasa de acierto de caché
  • Ajusta regularmente la configuración del encabezado Cache-Control
  • Considera usar Lambda@Edge para computación en el borde

🎉 Implementación Completada

Ahora tienes una solución de alojamiento de sitio web estático de nivel de producción y bajo costo

📊 Costo: $0.50 - $5 en promedio mensual
⚡ Rendimiento: Carga global < 500ms
🔒 Seguridad: HTTPS + Protección DDoS
📈 Escalabilidad: Maneja automáticamente el crecimiento del tráfico