Khắc phục lỗi màn hình trắng do không tải được tệp tĩnh khi triển khai bằng AWS S3 + CloudFront

 (blog.lemonbase.team)
13 điểm bởi whatsup 2025-02-10 | 1 bình luận | Chia sẻ qua WhatsApp

Đây là bài viết về cách giải quyết vấn đề màn hình trắng do không tải được tệp tĩnh khi triển khai bằng AWS S3 + CloudFront. Hy vọng bài viết sẽ hữu ích với những ai đang cân nhắc một phương án triển khai tệp tĩnh ổn định bằng AWS S3 + CloudFront.

[Bối cảnh phát sinh vấn đề]

  • Vận hành dịch vụ frontend dựa trên React + Vite
  • Sau khi triển khai thỉnh thoảng xuất hiện màn hình trắng → không tải được tệp tĩnh
  • Lỗi trên console: không khớp MIME type (trả về text/html)

[Phân tích vấn đề]

  • Không khớp MIME type: trả về phản hồi HTML thay vì tệp tĩnh
  • Giả thuyết: Github Actions bị hủy → instance ECS bị xóa
  • Thời điểm triển khai và việc phục vụ tệp tĩnh không đồng bộ
  • index.html của phiên bản cũ tham chiếu tới tệp tĩnh mới nhưng tệp đã bị xóa

[Cách giải quyết]

  • Sử dụng CloudFront + S3 (quyết định cuối cùng)
  • Dùng đường dẫn tuyệt đối của S3 để giữ lại tệp tĩnh của phiên bản trước
  • Khi build bằng Vite, thêm commitHash, timestamp vào tên tệp → đảm bảo tính duy nhất
  • Thiết lập S3 Lifecycle để tự động xóa các tệp không cần thiết
  • Kết nối CloudFront để phục vụ tệp tĩnh nhanh và ổn định
  • Cấu hình riêng cho các môi trường Local, Dev, Prod

[Kết quả kiểm chứng]

  • Xác nhận phương án CloudFront + S3 hoạt động bình thường
  • Áp dụng chiến lược cache: kiểm tra cache trình duyệt (Cache-Control, max-age)
  • Do mỗi tệp có tính duy nhất nên không cần vô hiệu hóa cache
  • Có thể triển khai ổn định mà không còn vấn đề thiếu tệp tĩnh như trước

[Điều rút ra]

  • Trong môi trường triển khai, việc quản lý tệp tĩnh có thể ảnh hưởng lớn đến UX.
  • Khi kiểm chứng giả thuyết, cách tiếp cận nhanh và đơn giản là rất quan trọng
  • Có thêm kinh nghiệm tối ưu môi trường triển khai bằng S3 + CloudFront
  • Cần phân biệt chiến lược triển khai theo từng môi trường (Local, Dev, Prod)
  • Cần hiểu rõ cách hoạt động của cache trình duyệt (Cache-Control, from disk cache)

Bài viết liên quan

1 bình luận

 
cnaa97 2025-02-10

Vì là rolling nên đương nhiên sẽ có vấn đề. Chỉ cần rút ngắn thời gian deploy hoặc tách deploy ra và dồn traffic về một phía theo chiến lược blue-green là được.

Hoặc cũng có thể bắt lỗi trong React rồi ép reload.