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

Última actualización: 03/11/2022

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 conexión de la API de REST como origen, con acceso restringido por un control de acceso de origen (OAC) o identidad de acceso de origen (OAI)
  Nota: Se recomienda utilizar el control de acceso de origen (OAC) para restringir el acceso. La identidad de acceso de origen (OAI) es un método heredado para este proceso.
• Utilizar un punto de conexión de un sitio web como origen, con acceso anónimo (público) permitido
• Utilizar un punto de conexión de sitio web como origen, con acceso restringido por un encabezado Referer
• Utilizar CloudFormation para implementar un punto de conexión de sitio web estático como origen y un dominio personalizado que apunta a CloudFront

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

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

1. Utilice la consola de Amazon S3 para crear un bucket y cargar los archivos del sitio web.
   Nota: no es necesario activar el alojamiento de sitios web estáticos en el bucket para esta configuración. Esta configuración utiliza el punto de conexión de la API de REST del bucket en lugar del punto de conexión 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, restrinja el acceso al origen de Amazon S3 mediante uno de los siguientes métodos. Se recomienda utilizar OAC. El uso de OAI es una configuración heredada.
   
   Al crear la distribución, utilice la siguiente configuración para restringir el acceso mediante OAC:
   Ingrese el nombre de su bucket de Amazon S3 en el campo Origin Domain (Dominio de origen).
   En Origin access (Origen de acceso), seleccione Origin access control settings (recommended) (Ajustes de control de origen de acceso [recomendado]).
   En la lista desplegable Origin access control (Control de origen de acceso), seleccione el nombre del OAC y elija Create control setting (Crear configuración de control).
   En el cuadro de diálogo, asigne un nombre a la configuración de control. Se recomienda dejar la configuración predeterminada Sign requests (recommended) (Firmar solicitudes [recomendado]). A continuación, elija Create (Crear).
   CloudFront le proporciona la declaración de política de modo que pueda conceder permiso al OAC para acceder a su bucket de Amazon S3 después de crear la distribución. Seleccione Copy Policy (Copiar política) y pegue la política en la configuración de su política de bucket de S3.
   
   o
   
   Al crear la distribución, utilice la siguiente configuración para restringir el acceso mediante una OAI:
   Ingrese el nombre de su bucket de Amazon S3 en el campo Origin Domain (Dominio de origen).
   En Origin access (Origen de acceso), seleccione Legacy access identities (Identidades de acceso heredadas).
   En la lista desplegable Origin access identity (Identidad de acceso de origen), seleccione el nombre de la identidad de acceso de origen. A continuación, seleccione Create new OAI (Crear nueva identidad de acceso de origen).
   En el cuadro de diálogo, asigne un nombre a su nueva identidad de acceso de origen y seleccione Create (Crear).
   En Bucket policy (Política de bucket), seleccione Yes, update the bucket policy (Sí, actualizar la política de bucket).
3. Al crear su distribución, es una práctica recomendada utilizar SSL (HTTPS) para su sitio web. 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. 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.
5. Espere a que se propaguen los cambios de DNS y que venzan las entradas de DNS anteriores.
   Nota: El tiempo que tardará en caducar los valores DNS anteriores depende del valor TTL que esté configurado en la zona alojada. También depende de si la resolución local usa esos valores de TTL.

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 conexión de la API de REST de S3 para su origen.

1. Utilice la consola de Amazon S3 para crear un bucket y activar 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 conexión 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 la configuración de bloqueo del acceso público esté activada, utilice el punto de conexión de la API de REST como origen. A continuación, restrinja el acceso mediante un control de acceso de origen (OAC) o 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 conexión de la API de REST del bucket de S3 que no se utilizan en esta configuración.
5. Al crear su distribución, es una práctica recomendada utilizar SSL (HTTPS) para su sitio web. 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. 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.
7. Espere a que se propaguen los cambios de DNS y que venzan las entradas de DNS anteriores.
   Nota: El tiempo que tardará en caducar los valores DNS anteriores depende del valor TTL que esté configurado en la zona alojada. También depende de si la resolución local usa esos valores de TTL.

Esta configuración restringe el acceso al configurar un encabezado de referencia personalizado en la distribución. A continuación, utiliza una política de bucket para permitir el acceso únicamente 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 conexión de la API de REST de S3 para su origen.

1. Utilice la consola de Amazon S3 para crear un bucket y activar 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 conexión 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 conexión 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. Al crear su distribución, es una práctica recomendada utilizar SSL (HTTPS) para su sitio web. 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. 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 la configuración de bloqueo de acceso público esté activada, utilice el punto de conexión de la API de REST como origen. Luego, restrinja el acceso con un control de acceso de origen (OAC) o 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.
6. 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.
7. Espere a que se propaguen los cambios de DNS y que venzan las entradas de DNS anteriores.
   Nota: El tiempo que tardará en caducar los valores DNS anteriores depende del valor TTL que esté configurado en la zona alojada. También depende de si la resolución local usa esos valores de TTL.

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)
• Utilizar las políticas de encabezados de respuesta de CloudFront para agregar encabezados de seguridad a cada respuesta del servidor

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