¿Cómo utilizo CloudFront para actuar como servidor de un sitio web estático alojado en Amazon S3?

Última actualización: 14-09-2021

Quiero alojar un sitio web estático en un bucket de Amazon Simple Storage Service (Amazon S3). Después, quiero servir mi sitio web a través de una distribución de Amazon CloudFront. ¿Cómo puedo hacer esto?

Descripción breve

Para ofrecer servicios a un sitio web estático alojado en Amazon S3, puede implementar una distribución de CloudFront mediante una de estas configuraciones:

  • Utilizar un punto de enlace de la API de REST como origen, con acceso restringido por una identidad de acceso de origen (OAI)
  • Utilizar un punto de enlace de un sitio web como origen, con acceso anónimo (público) permitido
  • Utilizar un punto de enlace de sitio web como origen, con acceso restringido por un encabezado Referer
  • Usar AWS CloudFormation para implementar un punto de enlace de la API de REST como origen, con acceso restringido por una OAI y un dominio personalizado que apunte a CloudFront

Para obtener más información sobre los dos tipos de puntos de enlace, consulte Diferencias clave entre un punto de enlace de sitio web y un punto de enlace de API de REST.

Resolución

Siga los pasos para configurar una distribución de CloudFront con el tipo de punto de enlace de S3 que desee utilizar como origen:

Utilizar un punto de enlace de la API de REST como origen, con acceso restringido por una OAI

  1. Utilice la consola de Amazon S3 para crear un bucket y cargar los archivos del sitio web.
    Nota: no es necesario habilitar el alojamiento de sitios web estáticos en el bucket para esta configuración. Esta configuración utiliza el punto de enlace de la API de REST del bucket en lugar del punto de enlace del sitio web de la característica de alojamiento de sitios web estáticos.
  2. Cree una distribución web de CloudFront. Además de la configuración de distribución que necesita para su caso de uso, ingrese lo siguiente:
    Para el dominio de origen, seleccione el bucket que creó.
    Para el acceso al bucket de S3, seleccione Sí, usar OAI (el bucket puede restringir el acceso solo a CloudFront).
    En Identidad de acceso de origen, seleccione Crear nueva OAI. A continuación, ingrese el nombre de la OAI y elija Crear.
    En Política de bucket, seleccione Sí, actualizar la política de bucket.
  3. Utilizar SSL (HTTPS) para el sitio web es una práctica recomendada. Para usar un dominio personalizado con HTTPS, seleccione Certificado SSL personalizado. Puede elegir Solicitar certificado para solicitar un nuevo certificado. Si no usa un dominio personalizado, puede seguir usando HTTPS con el nombre de dominio cloudfront.net para su distribución.
    Importante: si ingresó nombres de dominio alternativos (CNAME) para su distribución, los CNAME deben coincidir con el certificado SSL que seleccione. Para solucionar problemas relacionados con el certificado SSL, consulte ¿Cómo puedo solucionar problemas relacionados con el uso de un certificado SSL personalizado para mi distribución de CloudFront?
  4. Elija Crear distribución.
  5. Actualice los registros DNS del dominio para que el CNAME de su sitio web apunte al nombre de dominio de su distribución de CloudFront. Puede encontrar el nombre de dominio de su distribución en la consola de CloudFront en un formato similar a d1234abcd.cloudfront.net.
  6. Espere a que se propaguen los cambios de DNS y que venzan las entradas de DNS anteriores.
    Nota: el tiempo de vencimiento de los valores DNS anteriores depende del valor TTL establecido en la zona alojada y de si el solucionador local utiliza esos valores TTL.

Utilizar un punto de enlace de un sitio web como origen, con acceso anónimo (público) permitido

Esta configuración permite el acceso público de lectura en el bucket de su sitio web. Para obtener más información, consulte Configuración de permisos de acceso a sitios web.

Nota: cuando utiliza el punto de enlace del sitio web estático de Amazon S3, las conexiones entre CloudFront y Amazon S3 solo están disponibles a través de HTTP. Para utilizar HTTPS para las conexiones entre CloudFront y Amazon S3, configure un punto de enlace de la API de REST de S3 para su origen.

  1. Utilice la consola de Amazon S3 para crear un bucket y habilitar el alojamiento de sitios web estáticos en el bucket.
  2. En el cuadro de diálogo Alojamiento de sitios web estáticos, copie el punto de enlace de su bucket sin el http:// inicial. El formato es similar a DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com. Necesita el punto de enlace en este formato para un paso posterior.
  3. Agregue una política de bucket que permita el acceso público de lectura al bucket que creó.
    Nota: para esta configuración, la configuración de bloqueo de acceso público del bucket de S3 debe estar desactivada. Si su caso de uso requiere que se habilite la configuración de bloqueo de acceso público, utilice el punto de enlace de la API de REST como origen y restrinja el acceso mediante una identidad de acceso de origen (OAI).
  4. Cree una distribución web de CloudFront. Además de la configuración de distribución que necesita para su caso de uso, ingrese lo siguiente:
    Para el dominio de origen, ingrese punto de enlace que copió en el paso 2.
    Nota: no seleccione el bucket de la lista desplegable. La lista desplegable incluye solo los puntos de enlace de la API de REST del bucket de S3 que no se utilizan en esta configuración.
  5. Utilizar SSL (HTTPS) para el sitio web es una práctica recomendada. Para usar un dominio personalizado con HTTPS, seleccione Certificado SSL personalizado. Puede elegir Solicitar certificado para solicitar un nuevo certificado. Si no usa un dominio personalizado, puede seguir usando HTTPS con el nombre de dominio cloudfront.net para su distribución.
    Importante: si ingresó nombres de dominio alternativos (CNAME) para su distribución, los CNAME deben coincidir con el certificado SSL que seleccione. Para solucionar problemas relacionados con el certificado SSL, consulte ¿Cómo puedo solucionar problemas relacionados con el uso de un certificado SSL personalizado para mi distribución de CloudFront?
  6. Elija Crear distribución.
  7. Actualice los registros DNS del dominio para que el CNAME de su sitio web apunte al nombre de dominio de su distribución de CloudFront. Puede encontrar el nombre de dominio de su distribución en la consola de CloudFront en un formato similar a d1234abcd.cloudfront.net.
  8. Espere a que se propaguen los cambios de DNS y que venzan las entradas de DNS anteriores.
    Nota: el tiempo de vencimiento de los valores DNS anteriores depende del valor TTL establecido en la zona alojada y de si el solucionador local utiliza esos valores TTL.

Utilizar un punto de enlace de sitio web como origen, con acceso restringido por un encabezado Referer

Esta configuración restringe el acceso mediante la configuración de un encabezado Referer personalizado en la distribución y, a continuación, utiliza una política de bucket para permitir el acceso solo a las solicitudes con el encabezado Referer personalizado.

Importante: asegúrese de evaluar si el acceso permitido por esta configuración cumple los requisitos de su caso de uso.

Nota: cuando utiliza el punto de enlace del sitio web estático de Amazon S3, las conexiones entre CloudFront y Amazon S3 solo están disponibles a través de HTTP. Para utilizar HTTPS para las conexiones entre CloudFront y Amazon S3, configure un punto de enlace de la API de REST de S3 para su origen.

  1. Utilice la consola de Amazon S3 para crear un bucket y habilitar el alojamiento de sitios web estáticos en el bucket.
  2. En el cuadro de diálogo Alojamiento de sitios web estáticos, copie el punto de enlace de su bucket sin el http:// inicial. El formato es similar a DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com. Necesita el punto de enlace en este formato para un paso posterior.
  3. Cree una distribución web de CloudFront. Además de la configuración de distribución que necesita para su caso de uso, ingrese lo siguiente:
    Para el dominio de origen, ingrese punto de enlace que copió en el paso 2. Nota: no seleccione el bucket de la lista desplegable. La lista desplegable incluye solo los puntos de enlace de la API de REST del bucket de S3 que no se utilizan en esta configuración.
    En Agregar encabezado personalizado, seleccione Agregar encabezado.
    En Nombre de encabezado, escriba Referer.
    En Valor, ingrese un valor de encabezado de cliente que quiera reenviar al origen (bucket de S3). Para restringir el acceso al origen, ingrese un valor aleatorio o secreto que solo usted conozca.
  4. Utilizar SSL (HTTPS) para el sitio web es una práctica recomendada. Para usar un dominio personalizado con HTTPS, seleccione Certificado SSL personalizado. Puede elegir Solicitar certificado para solicitar un nuevo certificado. Si no usa un dominio personalizado, puede seguir usando HTTPS con el nombre de dominio cloudfront.net para su distribución.
    Importante: si ingresó nombres de dominio alternativos (CNAME) para su distribución, los CNAME deben coincidir con el certificado SSL que seleccione. Para solucionar problemas relacionados con el certificado SSL, consulte ¿Cómo puedo solucionar problemas relacionados con el uso de un certificado SSL personalizado para mi distribución de CloudFront?
  5. Elija Crear distribución.
  6. Abra el bucket de su sitio web desde la consola de Amazon S3. A continuación, agregue una política de bucket que permita s3:GetObject con la condición de que la solicitud incluya el encabezado Referer personalizado que especificó en el paso 3. Para esta configuración, se debe desactivar la configuración de bloqueo de acceso público del bucket de S3. (Amazon S3 considera pública una política de bucket que concede acceso anónimo restringido por un encabezado Referer). Si su caso de uso requiere que se habilite la configuración de bloqueo de acceso público, utilice el punto de enlace de la API de REST como origen, con acceso restringido por una identidad de acceso de origen (OAI)
    Nota: para bloquear el acceso de cualquier solicitud que no incluya el encabezado Referer personalizado, use una declaración de denegación explícita en la política de bucket.
  7. Actualice los registros DNS del dominio para que el CNAME de su sitio web apunte al nombre de dominio de su distribución de CloudFront. Puede encontrar el nombre de dominio de su distribución en la consola de CloudFront en un formato similar a d1234abcd.cloudfront.net.
  8. Espere a que se propaguen los cambios de DNS y que venzan las entradas de DNS anteriores.
    Nota: el tiempo de vencimiento de los valores DNS anteriores depende del valor TTL establecido en la zona alojada y de si el solucionador local utiliza esos valores TTL.

Usar CloudFormation para implementar un punto de enlace de la API de REST como origen, con acceso restringido por una OAI y un dominio personalizado que apunta a CloudFront

Con esta solución, el sitio web:

  • Se implementa con CloudFormation
  • Se aloja en Amazon S3
  • CloudFront lo distribuye
  • Utiliza un certificado SSL/TLS de AWS Certificate Manager (ACM)
  • Utiliza Lambda@Edge para agregar encabezados de seguridad a cada respuesta del servidor

Para obtener instrucciones sobre cómo implementar esta solución, consulte Sitio web estático seguro de Amazon CloudFront en el sitio web de GitHub.