Hosting estático con S3 y CloudFront paso a paso

¿Querés alojar tu sitio web estático de forma eficiente, económica y con excelente rendimiento? Configurar un hosting estático con Amazon S3 y CloudFront puede ser la solución ideal. En esta guía paso a paso, te mostramos cómo implementarlo y optimizarlo para tus necesidades.

🗂️ ¿Qué es un hosting estático con S3 y CloudFront?

Amazon S3 (Simple Storage Service) es un servicio de almacenamiento en la nube escalable y seguro, ideal para alojar archivos estáticos como HTML, CSS, JavaScript e imágenes. Por su parte, CloudFront es una red de distribución de contenido (CDN) que acelera la entrega de estos archivos aprovechando una red global de servidores edge.

Juntos, S3 y CloudFront ofrecen un hosting estático que combina bajo costo, alta disponibilidad y gran rendimiento. Además, son perfectos para proyectos de startups o empresas que buscan escalar sin complicaciones.

🛠️ Configuración inicial: Creá tu bucket S3

El primer paso es configurar tu bucket en S3, que será el contenedor de tus archivos estáticos.

1. Accedé a la consola de AWS: Iniciá sesión y dirigite al servicio S3.
2. Creá un bucket:
   • Hacé clic en “Create bucket”.
   • Elegí un nombre único para tu bucket. Por ejemplo, mi-sitio-estatico.
   • Seleccioná la región más cercana a tu público objetivo.
3. Configurá las propiedades del bucket:
   • Desactivá “Block all public access” para permitir que los archivos sean públicos.
   • Activá el versionado si querés mantener un historial de cambios en tus archivos.
4. Subí tus archivos:
   • Arrastrá y soltá los archivos de tu sitio web en el bucket.
   • Asegurate de que el archivo index.html esté incluido, ya que será tu página principal.

🌍 Hacelo público: Configuración de permisos en S3

Para que tu sitio esté disponible públicamente, necesitás ajustar los permisos del bucket:

1. Ir a la pestaña “Permissions” de tu bucket.
2. En “Bucket Policy”, pegá la siguiente política, adaptándola al nombre de tu bucket:

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "PublicReadGetObject",
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::mi-sitio-estatico/*"
           }
       ]
   }

3. Guardá los cambios y verificá que podés acceder a tus archivos desde el navegador.

🔄 Configurá tu bucket como sitio web

Ahora vas a habilitar la funcionalidad de hosting web estático:

1. En la pestaña “Properties” del bucket, buscá la sección “Static website hosting”.
2. Seleccioná “Enable” y configurá los archivos de inicio y error (generalmente index.html y error.html).
3. AWS te proporcionará una URL del tipo http://mi-sitio-estatico.s3-website-us-east-1.amazonaws.com. Podés usar esta URL, pero vamos a mejorarla con CloudFront.

🚀 Acelerá tu sitio con CloudFront

CloudFront mejora la velocidad y la experiencia del usuario al distribuir tu contenido en servidores cercanos a tus visitantes.

1. Creá una nueva distribución:
   • En la consola de CloudFront, hacé clic en “Create Distribution”.
   • Elegí “Web” como tipo de distribución.
2. Configurá el origen:
   • En “Origin Domain Name”, seleccioná tu bucket de S3.
   • Activá “Origin Access Control (OAC)” para que solo CloudFront pueda acceder a tu bucket.
3. Configurá las opciones de distribución:
   • Activá el almacenamiento en caché para mejorar el rendimiento.
   • Configurá un certificado SSL para habilitar HTTPS (podés usar AWS Certificate Manager para crear uno gratuito).
4. Guardá y desplegá:
   • Una vez configurado, CloudFront generará una URL única para tu distribución. Podrás usarla como dirección principal del sitio.

🌐 Vinculá tu dominio personalizado

Para usar tu dominio (p. ej., www.mi-sitio.com), seguí estos pasos:

1. Configura un CNAME en tu proveedor de DNS:
   • Apuntá el subdominio deseado (como www) al nombre de dominio proporcionado por CloudFront.
2. Agregá el dominio en CloudFront:
   • En la configuración de tu distribución, añadí el dominio personalizado en “Alternate Domain Names (CNAMEs)”.
3. Configurá HTTPS:
   • Asociá el certificado SSL de tu dominio en CloudFront para habilitar conexiones seguras.

📈 Optimización y mejores prácticas

1. Usá compresión GZIP o Brotli: Asegurate de que tu contenido esté comprimido para reducir tiempos de carga.
2. Configurá tiempos de caché apropiados: Ajustá los headers Cache-Control para equilibrar rendimiento y actualizaciones.
3. Monitoreo y alertas: Utilizá Amazon CloudWatch para monitorear el tráfico y la latencia de tu sitio.
4. Automatizá despliegues: Integrá tu CI/CD con S3 para mantener tu sitio actualizado de forma automática.

❓ Preguntas frecuentes

¿Puedo usar S3 y CloudFront para un sitio dinámico?
No, esta solución está diseñada para sitios estáticos. Para sitios dinámicos, considerá servicios como AWS Amplify o Elastic Beanstalk.

¿Cuánto cuesta alojar un sitio estático en S3 y CloudFront?
El costo depende del tamaño de los archivos y la cantidad de tráfico. Como referencia, podés alojar un sitio pequeño por menos de 1 USD al mes.

¿Es obligatorio usar un dominio personalizado con CloudFront?
No, pero es altamente recomendable para brindar una experiencia profesional a tus usuarios.

🚀 Conclusión

Configurar un hosting estático con S3 y CloudFront no solo es sencillo, sino también una solución poderosa para entregar contenido de forma rápida, segura y escalable. Al seguir esta guía, podés tener tu sitio en línea en poco tiempo, con costos optimizados y un rendimiento superior.

En Xygen, ayudamos a empresas y startups a implementar soluciones robustas en la nube, integrando tecnologías como la inteligencia artificial para maximizar resultados. Si querés llevar tu proyecto al próximo nivel, estamos para acompañarte en cada paso del camino.