¿Cómo optimizo CloudFront para que sirva a mi aplicación de una sola página?

Solución

Nota: En la siguiente resolución, el servidor de origen de ejemplo es un bucket de Amazon Simple Storage (Amazon S3).

Configuración de una comunicación segura entre los visores y CloudFront

Haz lo siguiente:

• Exige HTTPS para la comunicación entre los visores y CloudFront. Configura CloudFront para redirigir automáticamente las solicitudes HTTP a HTTPS o rechazar las solicitudes HTTP.
• Para establecer conexiones seguras con tu nombre de dominio, obtén un certificado SSL/TLS de AWS Certificate Manager (ACM) o de un tercero.
• Elige una política de seguridad con cifrados y protocolos compatibles con las conexiones de los visores.

Restricción del acceso al origen de AWS

Si usas Amazon S3 como tu origen de AWS, restringe el acceso público al bucket de S3.

Nota: Se recomienda usar la configuración de control de acceso de origen (OAC) para proteger tu origen.

Para restringir el acceso a otros orígenes, consulta Restricción del acceso a un origen de AWS.

Resolución de problemas con el enrutamiento en el cliente de SPA

Se produce un error de código de estado HTTP 403 o 404 cuando se navega a una ruta que no sea index.html, por ejemplo, https://example.com/about-us, y, a continuación, se actualiza la página. Los buckets de S3 no tienen una ruta ni un prefijo para /about-us.

Nota: Cuando la política de bucket de OAC no incluye el permiso s3:ListBucket, Amazon S3 devuelve un error 403.

Cuando Amazon S3 devuelve un error 403 o 404, CloudFront envía el archivo index.html que es una ruta válida para el SPA. Para resolver estos problemas, configura una respuesta de error para los errores 403 y 404.

Sigue estos pasos:

1. Abre la consola de CloudFront.
2. En el panel de navegación, elige Distribuciones y, a continuación, selecciona tu distribución.
3. Selecciona la pestaña Páginas de error.
4. Elige Crear respuesta de error personalizada.
5. En Código de error HTTP, selecciona 403: Forbidden o 404: Not Found.
6. En Error al almacenar en caché el TTL mínimo, puedes introducir 0 o el valor que prefieras.
7. En Personalizar la respuesta al error, elige Sí.
8. En Ruta de la página de respuesta, escribe /index.html.
9. En Código de respuesta HTTP, elige 200: OK.
10. Elige Crear respuesta de error personalizada.
11. Selecciona la pestaña General y espera a que se complete el despliegue.

Despliegue de estrategias de almacenamiento en caché

Para equilibrar la actualización del contenido y la velocidad de entrega de tu SPA, toma las siguientes medidas:

• Implementa una caché de larga duración para los activos inmutables, como los archivos JavaScript y CSS. Por ejemplo, para almacenar en caché los recursos durante 1 año, utiliza un encabezado Cache-Control en los metadatos del objeto S3 con el valor public, max-age = 31536000.
• Para el archivo index.html, utiliza un tiempo de vida corto (TTL), como public, max-age = 60, para almacenar en caché los archivos durante 60 segundos. Utiliza el TTL abreviado con stale-while-revalidate = 2592000 para que CloudFront pueda entregar las versiones vencidas en caché durante un máximo de 30 días durante la revalidación en segundo plano.
• Utiliza una política de caché de CloudFront adecuada que permita tanto los TTL cortos para el contenido que se actualiza con frecuencia como los TTL largos para los activos estáticos. Por ejemplo, puedes usar la política Managed-CachingOptimized.

Para obtener más información, consulta Host single page applications (SPA) with tiered TTLs on CloudFront and S3 (Alojar aplicaciones de una sola página [SPA)] con TTL por niveles en CloudFront y S3).

Elección de una clase de precios de CloudFront adecuada

Para reducir los costes de entrega de tu contenido, selecciona una clase de precio que se alinee con las ubicaciones de tus usuarios. Para determinar dónde se encuentran la mayoría de los usuarios, revisa el informe de uso de CloudFront. Si tus usuarios se encuentran principalmente en una región de AWS, elige la clase de precio 200 o 100. Sin embargo, si el rendimiento es importante, mantén la clase de precio predeterminada «Todos» para ofrecer tu contenido a una audiencia global. Para obtener información sobre las regiones a las que presta servicio cada clase de precio, consulte Clase de precio.

Información relacionada

Despliegue de una aplicación de una sola página basada en React en Amazon S3 y CloudFront