Cómo alojar un sitio web sin servidor con AWS CloudFront y S3

Si desea ejecutar un sitio web en AWS, ¡es posible que ni siquiera necesite un servidor! CloudFront CDN AWS ​​​​puede servir contenido web estático directamente desde un depósito S3, lo que le permite pagar solo por las solicitudes y los datos transferidos (que incluso pueden ser gratuitos).

¿Cómo funciona el alojamiento sin servidor?

«Sin servidor» es el concepto de ejecutar aplicaciones sin administrar usted mismo servidores Linux dedicados, generalmente a través de una solución de plataforma como servicio, como AWS App Runner o Lambda Functions. Si bien puede ejecutar una aplicación normal como NGINX en una máquina virtual EC2, generalmente puede servir la misma aplicación sin ejecutar servidores.

Esta solución sin servidor en particular utiliza el Servicio de almacenamiento simple (S3) de AWS para alojar contenido estático para el sitio web, en lugar de servirlo usted mismo desde un servidor NGINX. «Estático» simplemente significa que está sirviendo archivos en lugar de crear páginas que incluyen tanto sitios web HTML + CSS simples como aplicaciones web JavaScript completas del lado del cliente. En particular, esto no incluye marcos de alojamiento del lado del servidor como WordPress (PHP), Ruby on Rails y ASP.NET, pero muchos sitios web solo tendrán contenido estático.

La ventaja de esta solución es que no depende de sus propios servidores: S3 siempre responderá a las solicitudes, por lo que tantas personas como desee pueden acceder a su sitio. Antes de S3, puede usar CloudFront, una solución de red de entrega de contenido (CDN) de AWS. CloudFront utiliza cientos de cachés perimetrales, todos almacenados en caché para usted en S3, lo que aumenta la latencia y el rendimiento al mismo tiempo que reduce los costos.

En esta configuración de red, todo lo que maneja las solicitudes de los usuarios es completamente sin servidor. Los servidores de CloudFront son administrados por AWS y automáticamente almacenan en caché el contenido y dirigen a los usuarios a un punto final que es solo un depósito S3.

Si necesita ejecutar algún tipo de back-end o API para conectar su aplicación web, probablemente pueda usar otras herramientas sin servidor como Lambda Functions para hacerlo. Esta configuración es incluso mejor porque las solicitudes de API y S3 se escalarán por separado.

Si desea obtener más información sobre el uso de API Gateway como front-end para las funciones de Lambda, puede leer nuestra guía sobre cómo configurarlo.

Si bien es simple, en realidad es una buena configuración de nivel empresarial para alojar contenido estático en AWS. Será robusto, altamente escalable e incluso se puede usar con la implementación automática de CodePipeline para actualizar su sitio a partir de archivos de origen.

¿Cuanto cuesta?

Debido a que el alojamiento sin servidor se escala exactamente a medida que lo usa, solo paga por lo que usa. Esto puede ahorrarle mucho dinero en servidores que, de lo contrario, estarían en su mayoría inactivos. Por lo general, pagará un poco más por hora de procesador que si lo hiciera usted mismo, pero esto generalmente se equilibra con el hecho de que está pagando lo justo por el uso exacto.

Sin embargo, hay una buena posibilidad de que sea gratis. La capa Siempre gratuita de AWS incluye 100 GB de ancho de banda y un terabyte completo de ancho de banda de CloudFront. En comparación, la mayoría de los otros niveles gratuitos de los servicios de alojamiento de sitios estáticos (como Github Pages y Firebase) le darán alrededor de 10 GB.

1 TB de ancho de banda gratis es sin duda muy bueno, ya que significa que la mayoría de los sitios web que no sirven toneladas de contenido tendrán un gran búfer antes de que se les cobren cantidades significativas.

Sin embargo, aún se le cobrará por las solicitudes de S3 que se sumarán, y si su sitio almacena cientos de GB de contenido, es posible que también vea tarifas altas por esto. Sin embargo, el uso efectivo del almacenamiento en caché de CloudFront cuando sea posible puede reducir la cantidad de solicitudes al origen (S3) requeridas, y la mayoría de los sitios serán bastante pequeños.

Configurar un sitio web estático de S3 Bucket

Para comenzar, vaya a la consola de administración de S3 y cree un depósito nuevo.  Debe deshabilitar «Bloquear acceso público» para que sea visible. AWS advierte que esta es una mala idea, excepto en casos de uso como el alojamiento de sitios web estáticos. Ya que eso es exactamente lo que estamos haciendo, puede ignorarlo, pero definitivamente no desea cargar los secretos en la papelera; todo será legible.

Simplemente elimina el bloque en él; también deberá permitir explícitamente la lectura pública a través de la política de papelera en la sección Permisos. Asegúrese de reemplazar el nombre del recurso aquí con el depósito correcto.

{

«Versión»:»2012-10-17″,

Declaración:[

{

«Sid»:»PublicReadGetObject»,

«Efecto»: «Permitir»,

«Principal»: «*»,

«Acción»:[«s3:ObtenerObjeto»],

«resource»:[«arn:aws:s3:::example-bucket/*»]

}

]

}

A continuación, deberá cargar su contenido. Puede arrastrar y soltar, pero si desea transferir manualmente la carpeta completa, puede usar la CLI de AWS para sincronizar su depósito S3 con su directorio local. También puede configurar este depósito como el resultado de una implementación de CodePipeline que puede crear sus artefactos desde el repositorio de origen.

Usaremos la API de S3 y cargaremos la create-react-app plantilla base. Después de la sincronización, verá index.html en el S3.

aws s3 sync. s3://bucket-name

Antes de que esté listo, deberá ir a Propiedades del carrito, desplazarse hacia abajo para encontrar Alojamiento web estático y activarlo. Deberá configurar un índice y un documento de error, y aquí también es donde puede escribir las reglas de redirección.

Después de eso, verá el punto final del sitio web en las propiedades.

Conexión de CDN de CloudFront

CloudFront tiene muchas opciones, pero la configuración predeterminada funciona bien para un sitio web simple de S3, por lo que configurarlo es bastante fácil. Vaya a la consola de CloudFront  y cree una nueva distribución.

Puede modificar la configuración de la memoria caché, pero el comportamiento predeterminado debería adaptarse a la mayoría de las personas.

Deberá conectar su propio dominio, y esto incluye generar un certificado SSL que se puede administrar mediante AWS Certificate Manager (ACM). Puede hacer clic en este botón para solicitar un certificado, lo que puede demorar un tiempo en validar el DNS si no está utilizando AWS Route 53 DNS.

Por supuesto, también deberá configurar DNS con un registro CNAME que apunte al punto final de CloudFront.

Después de configurar el certificado y el DNS, cree una distribución y espere unos 15 minutos para que CloudFront la implemente. Una vez hecho esto, puede visitar el punto final de CloudFront o su dominio personalizado y ver cómo su sitio está siendo atendido desde el depósito S3.