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 de 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).

Índice de contenidos
  1. ¿Cómo funciona el alojamiento sin servidor?
  2. ¿Cuánto cuesta este?
  3. Configuración de un sitio web estático de S3 Bucket
  4. Conexión de una CDN de CloudFront

¿Cómo funciona el alojamiento sin servidor?

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

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

El beneficio de esta solución es que no depende de sus propios servidores: S3 siempre responderá a las solicitudes, por lo que puede tener tantas personas como desee accediendo a su sitio. Frente a S3, puede utilizar CloudFront, la solución de red de entrega de contenido (CDN) de AWS. CloudFront ejecuta cientos de cachés perimetrales, que solicitan todos los cachés a S3 por usted, lo que aumenta la latencia y el rendimiento, y 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 ejecutados por AWS y automáticamente almacenarán en caché el contenido y enrutarán a los usuarios al punto final, que es simplemente un depósito S3.

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

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

A pesar de lo simple que es, en realidad es una buena configuración de nivel empresarial para alojar contenido estático en AWS. Será confiable, escalará perfectamente e incluso se puede usar con una implementación automática de CodePipeline para actualizar su sitio desde sus archivos de origen.

RELACIONADO: Cómo usar API Gateway de AWS como interfaz para funciones de Lambda

RELACIONADO: Cómo configurar una canalización de implementación automatizada para un sitio web de S3

¿Cuánto cuesta este?

Debido a que el alojamiento sin servidor escala exactamente con el uso, solo paga por lo que usa. Esto puede ahorrarle mucho dinero en servidores que, de lo contrario, estarían en su mayoría inactivos. En general, pagará un poco más por hora de CPU en comparación con hacerlo usted mismo, pero esto generalmente se equilibra con el hecho de que se le cobra de manera justa por el uso exacto.

Sin embargo, hay una buena posibilidad de que esto solo sea libre. El "nivel siempre gratuito" de AWS incluye 100 GB de ancho de banda y un terabyte completo de ancho de banda de CloudFront. A modo de 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, también puede ver cargos altos por eso. Sin embargo, hacer un uso efectivo del almacenamiento en caché de CloudFront cuando sea posible puede reducir la cantidad de solicitudes requeridas para el origen (S3), y la mayoría de los sitios serán bastante pequeños.

Configuración de un sitio web estático de S3 Bucket

Para comenzar, diríjase a S3 Management Console y cree un nuevo depósito. 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. Debido a que eso es exactamente lo que estamos haciendo, puede ignorar esto, pero definitivamente no querrá cargar secretos en el cubo; todo será legible.

Esto simplemente elimina el bloqueo; también deberá permitir explícitamente las lecturas públicas con una política de depósito, en "Permisos". Asegúrese de reemplazar el nombre del recurso aquí con el depósito correcto.

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

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

RELACIONADO: Cómo instalar y configurar la CLI de AWS

Usaremos la API de S3 y subiremos una básica create-react-app modelo. Una vez sincronizado, verá el index.html en el depósito S3.

aws s3 sync . s3://bucket-name

Antes de que esté listo, deberá ir a las propiedades del depósito, desplazarse hasta la parte inferior para encontrar "Alojamiento web estático" y encenderlo. Deberá configurar el índice y el documento de error, y también puede escribir reglas de redirección aquí.

Una vez hecho esto, verá el punto final del sitio web en las propiedades.


Conexión de una CDN de CloudFront

CloudFront tiene muchas opciones, pero la configuración predeterminada funcionará bien para un sitio web simple de S3, por lo que su configuración es bastante fácil. Dirígete a la consola de CloudFront y crea una nueva distribución.

Puede configurar los ajustes para el caché, pero el comportamiento predeterminado debería estar bien para la mayoría de las personas.

Deberá conectar su dominio personalizado, y esto implica crear un certificado SSL que se administra a través de AWS Certificate Manager (ACM). Puede hacer clic en este botón para solicitar un certificado, lo que puede llevar un tiempo para verificar el DNS si no está utilizando el DNS de Route 53 de AWS.

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

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

prueba de sitio web s3

Descubre más contenido

Subir Change privacy settings