Proyecto 3 – Portfolio estático en Amazon S3

← Volver a Proyectos Cloud

Este portfolio está formado por varias páginas HTML muy sencillas. Lo interesante del proyecto no es el frontend, sino cómo lo he desplegado y publicado usando servicios de Amazon Web Services.

Tecnologías / servicios: HTML, CSS, Amazon S3 (Static Website Hosting), (opcional: Amazon CloudFront, dominio propio, Certificate Manager).

1. Qué problema quería resolver en Cloud

Después de hacer varios mini–proyectos en AWS, necesitaba una forma simple de publicarlos y explicarlos sin montar un backend ni servidores adicionales. La solución era un sitio estático: solo HTML y CSS, pero desplegado de forma profesional en la nube.

El objetivo Cloud es practicar el ciclo completo: desarrollo local → despliegue en AWS → acceso público con URL estable.

2. Arquitectura en AWS

A nivel de arquitectura, este proyecto es un frontend estático servido desde Amazon S3, con opción de evolucionar a CloudFront + dominio propio.

2.1 Bucket S3 con Static Website Hosting

Con esto, S3 me da una URL de sitio web del estilo: 

http://pablo-cloud-portfolio.s3-website-eu-west-1.amazonaws.com

2.2 Seguridad y acceso público controlado

Como necesito que cualquiera pueda ver el portfolio, pero solo en modo lectura, configuro:

Ejemplo de política (simplificada):

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadForWebsite",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::pablo-cloud-portfolio/*"
    }
  ]
}

De esta forma el bucket sigue siendo gestionado por mí, pero los objetos estáticos se pueden leer desde Internet como si fuesen archivos de un hosting tradicional.

2.3 (Opcional) CloudFront + dominio propio + HTTPS

El diseño del proyecto está pensado para poder crecer hacia una arquitectura más completa:

Ahora mismo la versión mínima funciona con la URL de S3, pero la arquitectura Cloud ya está pensada para dar el siguiente paso sin tocar el código.

3. Flujo de despliegue en la nube

Aunque el código sea muy sencillo (ficheros HTML y CSS), he seguido un flujo de despliegue típico en Cloud:

  1. Desarrollo local
    Trabajo en local con los ficheros HTML/CSS (portada, lista de proyectos, detalle de cada proyecto, about, contacto).
  2. Empaquetado mínimo
    Una vez que todo se ve bien en el navegador local, agrupo los ficheros en una carpeta lista para subir a S3.
  3. Subida al bucket S3
    Desde la consola de AWS (o con CLI) subo los ficheros al bucket pablo-cloud-portfolio, sobrescribiendo la versión anterior si estoy desplegando cambios.
  4. Prueba en la URL de S3
    Abro la URL del sitio estático de S3 y verifico:
    • Que el index.html carga correctamente.
    • Que la navegación entre páginas funciona con rutas relativas.
    • Que no hay errores 403/404 por permisos o nombres de archivo.
  5. Preparado para CI/CD
    Este flujo ahora es manual, pero está preparado para automatizarlo con: GitHub Actions o AWS CodePipeline que desplieguen al bucket en cada push.

4. Cómo interactúa un usuario (vista Cloud)

Desde el punto de vista de la infraestructura Cloud, la interacción es:

  1. El usuario escribe la URL del portfolio (endpoint de S3 o dominio propio).
  2. La petición llega al servicio de Static Website Hosting de S3, que sirve el fichero index.html almacenado como objeto en el bucket.
  3. Cuando navega a otra sección (proyectos, detalle del EC2, serverless, etc.), el navegador solicita otros ficheros HTML/CSS al mismo bucket S3.
  4. No hay servidores que mantener, ni procesos que reiniciar: S3 solo responde con archivos estáticos de forma altamente disponible.
  5. Si más adelante añado CloudFront, las peticiones pasarán por la CDN, mejorando latencia y añadiendo HTTPS sin cambiar nada en el código del sitio.

5. Lecciones Cloud del proyecto

← Volver a Proyectos Cloud