¿Cómo puedo utilizar CloudFront para ofrecer un sitio web estático alojado en Amazon S3?

Breve descripción

Para ofrecer un sitio web estático alojado en Amazon S3, utilice una de las siguientes configuraciones para implementar una distribución de CloudFront:

• Utilización de un punto de enlace de la API de REST como origen y restricción del acceso con un control de acceso de origen (OAC) o una 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.
• Utilización de un punto de enlace de sitio web como origen con acceso anónimo (público) permitido
• Utilización de un punto de enlace de sitio web como origen con acceso restringido mediante un encabezado Referer
• Utilización de AWS CloudFormation para desplegar un punto de enlace de sitio web estático como origen y un dominio personalizado que apunte a CloudFront

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

Solución

Para configurar una distribución de CloudFront con el tipo de punto de enlace de S3 que quiere usar como origen, complete los siguientes pasos:

Uso de un punto de enlace de la API de REST como origen y restricción del acceso con un OAC u OAI (heredada)

1.    Utilice la consola de Amazon S3 para crear un bucket y cargar los archivos del sitio web.

Nota: No necesita activar 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 para su caso de uso, complete los pasos de una de las siguientes secciones para restringir el acceso al origen de Amazon S3. Se recomienda utilizar el OAC, ya que la OAI es una opción heredada.

OAC

Cuando cree la distribución, introduzca el nombre del bucket de Amazon S3 en el campo Origin Domain.

En Origin acces, seleccione Origin access control settings (recommended).

En la lista desplegable Origin access control, seleccione el nombre del OAC y elija Create control setting.

En el cuadro de diálogo, asigne el nombre **.** a la configuración de control. Se recomienda conservar la opción predeterminada Sign requests (recommended). A continuación, seleccione Crear.

CloudFront le proporciona la instrucción de la política para conceder permiso a OAC a fin de acceder al bucket de Amazon S3 después de crear la distribución. Seleccione Copiar política y pegue la política en la configuración de su política de bucket de S3.

OAI

Cuando cree la distribución, introduzca el nombre del bucket de Amazon S3 en el campo Origin Domain.

En Origin access, seleccione Legacy access identities.

En la lista desplegable Origin access identity, seleccione el nombre de la identidad de acceso de origen. A continuación, elija Create new OAI.

En el cuadro de diálogo, asigne un nombre a la nueva identidad de acceso de origen y elija Crear.

En Política del bucket, seleccione Yes, update the bucket policy.

3.    Al crear la distribución, se recomienda utilizar SSL (HTTPS) para el sitio web. Para usar un dominio personalizado con HTTPS, seleccione Certificado SSL personalizado. Elija Solicitar certificado para solicitar un certificado nuevo. Si no utiliza un dominio personalizado, puede seguir usando HTTPS con el nombre de dominio cloudfront.net para su distribución.
Importante: Si introduce Nombres de dominio alternativos (CNAME) para la distribución, los CNAME deben coincidir con el certificado SSL que seleccione. Para solucionar problemas con el certificado SSL, consulte How can I troubleshoot issues with using a custom SSL certificate for my CloudFront distribution?

4.    Actualice los registros DNS del dominio para que el dominio del sitio web apunte a CloudFront. Encontrará el nombre de dominio de la distribución en la consola de CloudFront. El nombre de dominio tiene un aspecto similar al del siguiente ejemplo: d1234abcd.cloudfront.net.

5.    Espere a que los cambios de DNS se propaguen y a que las entradas de DNS anteriores caduquen.
Nota: El tiempo de caducidad de los valores de DNS anteriores depende del valor TTL establecido en la zona alojada. También depende de si el solucionador local utiliza esos valores TTL.

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

Esta configuración permite el acceso público de lectura al bucket del sitio web. Para obtener más información, consulte Configurar permisos para el acceso a sitios web.
Nota: Si utiliza el punto de enlace del sitio web estático de Amazon S3, las conexiones entre CloudFront y Amazon S3 solo estarán disponibles a través de HTTP. Si desea usar HTTPS para las conexiones entre CloudFront y Amazon S3, configure un punto de enlace de la API de REST de S3 para el 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 Static website hosting, copie el Punto de enlace del bucket sin escribir http:// al principio. El formato es similar a DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com. Necesitará el punto de enlace en este formato en un paso posterior.
3. Añada una política de bucket que permita el acceso público de lectura al bucket que ha creado.
   Nota: Para esta configuración, debe desactivar la configuración de bloqueo de acceso público del bucket de S3. Si su caso de uso requiere la activación de la configuración de bloqueo de acceso público, utilice el punto de enlace 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 para su caso de uso, complete los siguientes pasos:
   En Origin domain, introduzca el punto de enlace que copió en el paso anterior.
   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 utiliza en esta configuración.
5. Al crear la distribución, se recomienda utilizar SSL (HTTPS) para el sitio web. Para usar un dominio personalizado con HTTPS, seleccione Certificado SSL personalizado. Elija Solicitar certificado para solicitar un certificado nuevo. Si no utiliza un dominio personalizado, puede seguir usando HTTPS con el nombre de dominio cloudfront.net para la distribución.
   Importante: Si introduce Nombres de dominio alternativos (CNAME) para la distribución, los CNAME deben coincidir con el certificado SSL que seleccione. Para solucionar problemas con el certificado SSL, consulte How can I troubleshoot issues with using a custom SSL certificate for my CloudFront distribution?
6. Actualice los registros DNS del dominio para que el dominio del sitio web apunte a CloudFront. Encontrará el nombre de dominio de la distribución en la consola de CloudFront. El formato del nombre de dominio tiene un aspecto similar al del siguiente ejemplo: d1234abcd.cloudfront.net.
7. Espere a que los cambios de DNS se propaguen y a que las entradas de DNS anteriores caduquen.
   Nota: El tiempo de caducidad de los valores de DNS anteriores depende del valor TTL establecido en la zona alojada. También depende de si el solucionador local utiliza esos valores TTL.

Utilización de un punto de enlace de sitio web como origen con acceso restringido mediante un encabezado Referer

Importante: Compruebe si el acceso que esta configuración permite cumple los requisitos de su caso de uso.

Esta configuración establece un encabezado Referer personalizado en la distribución para restringir el acceso. A continuación, utiliza una política de bucket para permitir el acceso únicamente a las solicitudes con el encabezado Referer personalizado.

Nota: Si utiliza el punto de enlace del sitio web estático de Amazon S3, las conexiones entre CloudFront y Amazon S3 solo estarán disponibles a través de HTTP. Si desea usar HTTPS para las conexiones entre CloudFront y Amazon S3, configure un punto de enlace de la API de REST de S3 para el 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 Static website hosting, copie el Punto de enlace del bucket sin escribir http:// al principio. El formato es similar a DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com. Necesitará el punto de enlace en este formato en un paso posterior.
3. Cree una distribución web de CloudFront. Además de la configuración de distribución para su caso de uso, complete los siguientes pasos:
   En Origin domain, introduzca el punto de enlace que copió en el paso anterior.
   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 esta configuración no utiliza.
   En Add custom header, seleccione Agregar encabezado.
   En Nombre del encabezado, introduzca Referer.
   En Valor, introduzca el valor de encabezado de cliente que desee reenviar al origen (bucket de S3). Para restringir el acceso al origen, introduzca un valor aleatorio o secreto que solo usted conozca.
4. Al crear la distribución, se recomienda utilizar SSL (HTTPS) para el sitio web. Para usar un dominio personalizado con HTTPS, seleccione Certificado SSL personalizado. Elija Solicitar certificado para solicitar un certificado nuevo. Si no utiliza un dominio personalizado, puede seguir usando HTTPS con el nombre de dominio cloudfront.net para su distribución.
   Importante: Si introduce Nombres de dominio alternativos (CNAME) para la distribución, los CNAME deben coincidir con el certificado SSL que seleccione. Para solucionar problemas con el certificado SSL, consulte How can I troubleshoot issues with using a custom SSL certificate for my CloudFront distribution?
5. Abra el bucket del sitio web desde la consola de Amazon S3. A continuación, añada 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, 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 Referer. Si su caso de uso requiere la activación de la configuración de bloqueo de acceso público, utilice el punto de enlace de la API de REST como origen. A continuación, restrinja el acceso con un control de acceso de origen (OAC) o una identidad de acceso de origen (OAI).
   Nota: Para bloquear el acceso a cualquier solicitud que no incluya el encabezado Referer personalizado, use una instrucción de denegación explícita en la política de bucket.
6. Actualice los registros DNS del dominio para que el dominio del sitio web apunte a CloudFront. Encontrará el nombre de dominio de la distribución en la consola de CloudFront. El nombre del dominio es similar al siguiente ejemplo: d1234abcd.cloudfront.net.
7. Espere a que los cambios de DNS se propaguen y a que las entradas de DNS anteriores caduquen.
   Nota: El tiempo de caducidad de los valores de DNS anteriores depende del valor TTL establecido en la zona alojada. También depende de si el solucionador local utiliza esos valores TTL.

Uso de CloudFormation para desplegar un punto de enlace de sitio web estático como origen y un dominio personalizado que apunte a CloudFront

Esta solución utiliza la siguiente configuración para el sitio web:

• Despliega el sitio web con CloudFormation
• Aloja el sitio web en Amazon S3
• Distribuye el sitio web con CloudFront
• Utiliza un certificado SSL/TLS de AWS Certificate Manager (ACM)
• Utiliza las políticas de encabezados de respuesta de CloudFront para añadir encabezados de seguridad a cada respuesta del servidor

Si desea obtener instrucciones para desplegar esta solución, consulte Amazon CloudFront Secure Static Website en el sitio web de GitHub.

Información relacionada

Getting started with a secure static website

Email validation

DNS validation

Using alternate domain names and HTTPS