Comment optimiser CloudFront pour répondre aux besoins de mon application monopage ?

Résolution

Remarque : Dans la résolution suivante, l'exemple de serveur d'origine est un compartiment Amazon Simple Storage (Amazon S3).

Configurer une communication sécurisée entre vos utilisateurs et CloudFront

Procédez comme suit :

• Exigez le protocole HTTPS pour les communications entre vos utilisateurs et CloudFront. Configurez CloudFront pour rediriger automatiquement les requêtes HTTP vers HTTPS ou rejeter les requêtes HTTP.
• Pour des connexions sécurisées avec votre nom de domaine, procurez-vous un certificat SSL/TLS auprès d'AWS Certificate Manager (ACM) ou d'un tiers.
• Choisissez une politique de sécurité avec des chiffrements et des protocoles pris en charge par les connexions de vos utilisateurs.

Restreindre l'accès à votre origine AWS

Si vous utilisez Amazon S3 comme origine AWS, limitez l'accès public au compartiment S3.

Remarque : Il est recommandé d'utiliser le paramètre de contrôle d'accès d’origine (OAC) pour sécuriser votre origine.

Pour restreindre l'accès à d'autres origines, consultez la section Restreindre l'accès à une origine AWS.

Résoudre les problèmes liés au routage côté client du SPA

Une erreur de code d'état HTTP 403 ou 404 survient lorsque vous naviguez vers une route autre que le fichier index.html, par exemple https://example.com/about-us, puis que vous actualisez ensuite la page. Les compartiments S3 n'ont pas de chemin ni de préfixe pour /about-us.

Remarque : Lorsque la politique de compartiment pour l'OAC n'inclut pas l'autorisation s3:ListBucket, Amazon S3 renvoie une erreur 403.

Lorsqu'Amazon S3 renvoie une erreur 403 ou 404, CloudFront diffuse le fichier index.html qui constitue une route valide pour le SPA. Pour résoudre ces problèmes, configurez une réponse d'erreur pour les erreurs 403 et 404.

Procédez comme suit :

1. Ouvrez la console CloudFront.
2. Dans le volet de navigation, choisissez Distributions, puis sélectionnez votre distribution.
3. Choisissez l'onglet Pages d’erreur.
4. Choisissez Créer une réponse d'erreur personnalisée.
5. Dans Code d'erreur HTTP, sélectionnez 403 : Forbidden ou 404 : Not Found.
6. Dans Erreur de mise en cache de la durée de vie minimale, vous pouvez saisir 0 ou votre valeur préférée.
7. Dans Personnaliser une réponse d’erreur, choisissez Oui.
8. Dans Chemin de la page de réponse, saisissez /index.html.
9. Dans Code de réponse HTTP, choisissez 200 : OK.
10. Choisissez Créer une réponse d'erreur personnalisée.
11. Choisissez l'onglet Général, puis attendez que le déploiement soit terminé.

Mettre en œuvre des stratégies de mise en cache

Pour équilibrer l’actualisation du contenu et la rapidité de diffusion de votre SPA, procédez comme suit :

• Implémentez une longue durée de cache pour les actifs immuables, tels que les fichiers JavaScript et CSS. Par exemple, pour mettre des ressources en cache pendant un an, utilisez un en-tête Cache-Control dans les métadonnées de l'objet S3 avec la valeur public, max-age = 31536000.
• Pour le fichier index.html, utilisez une durée de vie courte (TTL) telle que public, max-age = 60 pour mettre les fichiers en cache pendant 60 secondes. Utilisez la TTL courte avec stale-while-revalidate = 2592000 afin que CloudFront puisse proposer des versions mises en cache expirées pendant 30 jours maximum lors de la revalidation en arrière-plan.
• Utilisez une politique de cache CloudFront appropriée qui prend en charge à la fois les TTL courtes pour le contenu fréquemment mis à jour et les TTL longues pour les ressources statiques. Par exemple, vous pouvez utiliser la politique Managed-CachingOptimized.

Pour plus d'informations, consultez la section Héberger des applications monopages (SPA) avec des TTL hiérarchisées sur CloudFront et S3.

Choisir une classe de prix CloudFront appropriée

Pour réduire les coûts liés à la diffusion de votre contenu, sélectionnez une classe de prix adaptée aux emplacements de vos utilisateurs. Pour déterminer où se trouvent la majorité de vos utilisateurs, consultez votre rapport d'utilisation de CloudFront. Si vos utilisateurs se trouvent principalement dans une région AWS, choisissez la classe de prix 200 ou 100. Toutefois, si les performances sont importantes, conservez la classe de prix par défaut « Tous » pour diffuser votre contenu à un public mondial. Pour plus d'informations sur les régions desservies par chaque classe de prix, consultez la section Classe de prix.

Informations connexes

Déployer une application monopage basée sur React sur Amazon S3 et CloudFront