Día 20: Alojamiento de sitios web estáticos en S3

2 minute read

🚀 Día 20: Tu sitio web en la nube por centavos

¿Sabías que no necesitas un servidor EC2 para alojar una página web? Si tu sitio es estático (HTML, CSS, JavaScript, imágenes), puedes usar Amazon S3 para servirlo al mundo. Es la forma más barata, escalable y sencilla de desplegar un portafolio o una landing page.

¿Qué es un sitio web estático en S3?

Sin servidores: No hay sistema operativo que parchear ni servidores que gestionar.
Escalabilidad infinita: S3 maneja desde 1 hasta millones de visitas sin configurar nada.
Costo mínimo: Solo pagas por el almacenamiento y la transferencia de datos (centavos al mes).
Nota importante: Solo sirve para contenido estático. Si necesitas base de datos en el servidor (como PHP o Python), necesitarás otros servicios, aunque puedes usar APIs con JavaScript.

🛠️ El Código (CloudFormation)

Para que un bucket funcione como sitio web, necesitamos activar la configuración de hosting y, por primera vez en esta serie, permitir el acceso de lectura público para que cualquier persona en internet pueda ver tu página.

1. Bucket configurado como sitio web

WebsiteBucket:
  Type: AWS::S3::Bucket
  Properties:
    BucketName: !Sub "mi-web-estatica-${AWS::AccountId}"
    # Configuramos el archivo principal y el de error
    WebsiteConfiguration:
      IndexDocument: index.html
      ErrorDocument: error.html
    # Para una web pública, quitamos los bloqueos que usamos antes
    PublicAccessBlockConfiguration:
      BlockPublicAcls: false
      BlockPublicPolicy: false
      IgnorePublicAcls: false
      RestrictPublicBuckets: false

# 2. Permitir que TODO EL MUNDO lea los archivos
WebsiteBucketPolicy:
  Type: AWS::S3::BucketPolicy
  Properties:
    Bucket: !Ref WebsiteBucket
    PolicyDocument:
      Version: '2012-10-17'
      Statement:
        - Sid: PublicReadForGetBucketObjects
          Effect: Allow
          Principal: '*'
          Action: 's3:GetObject'
          Resource: !Sub 'arn:aws:s3:::${WebsiteBucket}/*'

📚 Conceptos Nuevos Explicados

1. WebsiteConfiguration

Le indica a S3 que este bucket no es solo para guardar archivos, sino que debe comportarse como un servidor web. El IndexDocument es la página que se cargará por defecto cuando alguien entre a tu URL.

2. S3 Website Endpoint

Al activar esta función, AWS te dará una URL especial (distinta a la de los objetos normales). El formato suele ser: http://mi-web-estatica.s3-website-us-east-1.amazonaws.com/.

3. Acceso Público (Lectura)

A diferencia de los días anteriores, aquí sí queremos acceso público. La política s3:GetObject aplicada al Principal * permite que cualquier navegador pueda descargar y mostrar tu HTML.

🚀 Cómo Desplegarlo

Crea el stack de CloudFormation:

  aws cloudformation deploy \
 --stack-name S3-Web-Estatica \
 --template-file 20-s3-web.yaml

Sube un archivo llamado index.html básico:
```
 <h1>¡Hola Mundo!</h1>
```

Súbelo usando la CLI:

  aws s3 cp index.html s3://tu-nombre-de-bucket/

📈 Cómo probar tu nueva web

Ve a la consola de S3 → Entra en tu bucket.
Ve a la pestaña Properties (Propiedades).
Baja hasta el final a la sección Static website hosting.
Haz clic en el enlace que aparece debajo de Bucket website endpoint.
¡Deberías ver tu mensaje de “Hola Mundo” en el navegador!

📂 Código Adjunto

Puedes descargar el template de CloudFormation y un ejemplo de index.html aquí: Ver archivo en GitHub

🎥 Video Tutorial

Mira el proceso paso a paso en video:

💡 Próximos pasos

Día 21: Replicación entre regiones y seguridad con cifrado (KMS): Aprende a copiar tus archivos automáticamente a otro país por seguridad y a cifrarlos con llaves maestras.

Rodrigo Salgado