Résoudre le problème d’écran blanc causé par l’impossibilité de charger les fichiers statiques lors d’un déploiement avec AWS S3 + CloudFront

Cet article explique comment un problème d’écran blanc survenant lors du déploiement, dû à l’impossibilité de charger les fichiers statiques, a été résolu avec AWS S3 + CloudFront. J’espère qu’il sera utile à celles et ceux qui réfléchissent à une méthode fiable de déploiement de fichiers statiques avec AWS S3 + CloudFront.

[Contexte du problème]

• Exploitation d’un service frontend basé sur React + Vite
• Apparition intermittente d’un écran blanc après le déploiement → impossible de charger les fichiers statiques
• Erreur dans la console : incompatibilité de type MIME (text/html renvoyé)

[Analyse du problème]

• Incompatibilité de type MIME : une réponse HTML est renvoyée à la place d’un fichier statique
• Hypothèse : annulation de Github Actions → suppression de l’instance ECS
• Décalage entre le moment du déploiement et la mise à disposition des fichiers statiques
• Le index.html de l’ancienne version référence de nouveaux fichiers statiques, mais ces fichiers ont été supprimés

[Méthode de résolution]

• Utilisation de CloudFront + S3 (décision finale)
• Utilisation de chemins absolus S3 pour conserver les fichiers statiques des versions précédentes
• Lors du build Vite, ajout de commitHash et d’un timestamp au nom des fichiers → unicité garantie
• Configuration du Lifecycle S3 pour supprimer automatiquement les fichiers inutiles
• Intégration avec CloudFront pour un serving rapide et fiable des fichiers statiques
• Paramétrages séparés pour les environnements Local, Dev et Prod

[Résultats de validation]

• Confirmation du bon fonctionnement de l’approche CloudFront + S3
• Application d’une stratégie de cache : vérification du cache navigateur (Cache-Control, max-age)
• Grâce à l’unicité des fichiers, aucune invalidation de cache n’est nécessaire
• Déploiement fiable possible sans problème de fichiers statiques manquants comme auparavant

[Ce que j’en ai retenu]

• Dans un environnement de déploiement, la gestion des fichiers statiques peut avoir un impact majeur sur l’UX.
• Lors de la validation d’hypothèses, une approche rapide et simple est importante
• Expérience d’optimisation d’un environnement de déploiement avec S3 + CloudFront
• Nécessité de différencier les stratégies de déploiement selon l’environnement (Local, Dev, Prod)
• Compréhension indispensable du fonctionnement du cache navigateur (Cache-Control, from disk cache)

[cnaa97]

Comme c’est du rolling, le problème est inévitable. Il faut soit réduire le temps de déploiement, soit séparer le déploiement et appliquer une stratégie blue-green pour concentrer le trafic d’un seul côté.

Sinon, on peut aussi intercepter l’erreur côté React et forcer un rechargement.