Sử dụng Cache-Control trong cloudfront trên aws

Khi truy cập một website yếu tố đầu tiên mà người dùng quan tâm đó là tốc độ tải trang, nếu website mà chậm thì bạn sẽ mất đi lượng khách ghé thăm, do đó các website hiện đại đều có CDN, nếu bạn nều dùng dịch cụ S3 và Cloudfront của AWS thì sẽ biết mặc định nó không có cache do đó mỗi một lần request từ người dùng bạn sẽ phải tốn thêm tiền, đồng thời làm website của bạn chậm đi, do đó cache là cần thiết để làm tốc độ tải trang và giảm chi phí khi dùng CDN. Trong bài hướng dẫn này Gsviec sẽ hướng dẫn các bạn làm chuyện đó.

Khái niệm căn bản về cache trên trình duyệt

Hầu hết các web developer có kinh nghiệm đều nắm được các chỉ thị phổ biến trong HTTP header như Status Code, Content Type, Cookie. Tuy nhiên nếu được hỏi về Cache-Control thì không nhiều có thể trả lời ngay được chỉ thị này dùng để làm gì. Nếu bạn là một trong số này thì bài viết này sẽ giúp bạn có được câu trả lời cho lần tiếp theo nếu như được hỏi cũng như áp dụng vào công việc thực tế.

Đầu tiên đối với những bạn dev nào ít kiên nhẫn thì câu trả lời nhanh gọn cho câu hỏi trên đó là sử dụng chỉ thị Cache-Control trong header phục vụ hai mục đích chính:

  • Tối ưu tốc độ tải trang
  • Tăng tính bảo mật

Với các bạn dev nào có tính tò mò, ham tìm tòi học hỏi (rất tốt tôi tin tưởng mãnh liệt rằng các bạn sẽ có một sự nghiệp đầy triển vọng!) thì hãy kiên nhẫn kéo xuống đọc thêm một xíu nữa để có thể hiểu được chi tiết hơn về câu trả lời ở trên đây.

Tối Ưu Tốc Độ Tải Trang

Tốc dộ tải trang là một trong những điểm quan trọng khi phát triển ứng dụng website. Theo một khảo sát gần đây thì một nửa số người dùng internet hy vọng nội dung trang web được tải về trong vòng 2 giây hoặc ít hơn. Điều này có nghĩa nếu như website của bạn không quá phổ biến, thì việc yêu cầu người dùng đợi hơn 2 giây để nội dung trang được tải về có thể khiến website gặp nguy cơ mất đi một nửa lượng truy cập.

Vậy thì câu hỏi đặt ra tiếp theo ở đây đó là Cache-Control giúp cải thiện tốc độ tải trang web như thế nào?

Đầu tiên chúng ta lưu ý Cache-Control thường được sử dụng trong response header (hay header trả về từ server) và chức năng của nó là để kiểm soát việc lưu trữ dữ liệu của trang trong bộ nhớ đệm của trình duyệt (hay cache).

Ví dụ trong một trang web bạn có một ảnh banner với kích thước khá lớn và bạn muốn trình duyệt lưu trữ ảnh này vào bộ nhớ cache của nó để lần sau khi người dùng truy cập trang thì trình duyệt chỉ cần lấy ảnh từ cache thay vì phải tải về ảnh này từ server thêm một lần nữa.

Để làm điều này bạn sẽ cần gán giá trị Cache-Control trong response header trả về cho các yêu cầu tải hình ảnh gửi tới server:

Cache-Control: max-age=31536000

31536000 là thời gian (với đơn vị là tính giây) trong ví dụ trên là cahe 1 năm, tuy nhiên vài ngày sau đó thì ảnh này được cập nhật và bạn muốn trình duyệt không sử dụng ảnh đã lưu trong cache thì bạn có thể chọn cách làm như sau:

  • Sử dụng một URL khác cho banner. Ví dụ banner cũ là https://cd.lackky.com.vn/banner.jpg thì bạn có thể đổi lại thành http://cdn.lackky.com/banner-new.jpg
  • Trường hợp bạn không muốn đổi URL thì bạn có thể gắn thêm query string cho URL ví dụ: http://cdn.lackky.com/banner.jpg?time=1234
  • Ngày nay các Framework frontend hiện đại đều có tích hợp  tạo mã hash sau mỗi image do đó khi cập nhật một phiên bản mới trên production sẽ tự động tải lại tập tin đó cho lần đầu tiên, sau đó sẽ cache lại.

Bạn cũng cần lưu ý thêm rằng một khi đã gán giá trị cho max-age thì trình duyệt sẽ không gửi yêu cầu tới server để lấy lại dữ liệu nữa cho tới khi dữ liệu này có tuổi thọ bằng thời gian quy định bởi max-age.

Trên đây chúng ta đã sử dụng Cache-control để tối ưu tốc độ tải trang cho các lần truy cập thứ 2 trở đi, vậy thì lần truy cập đầu tiên thì có thể dùng chỉ thị này để tăng tốc độ tải trang nhanh hơn được không? Câu trả lời là có!

Cấu hình cache cho cloudfront

Trước tiên bạn cần bật cache control trong AWS S3, từ bucket S3 bạn chọn thư mục muốn cache sau đó chọn actions, kế đến chọn Change metadata sau đó nhập vào như hình bên dưới.

Sau đó bạn vào phần cấu hình Cloudfront tương ứng mà bạn đã trỏ và S3 bucket thây đổi nó như sau:

Sau đó bạn truy cập đường dẫn đó, và nếu thấy nó trả về 304 thây vì 202 tức là bạn đã cache thành công.

Tăng Tính Bảo Mật Của Trang

Một công dụng khác của Cache-Control đó là giúp tăng tính bảo mật của trang web. Ví dụ trường hợp bạn xây dựng một ứng dụng web có tính năng thanh toán trực tuyến và người dùng cần nhập thông tin về phương thức thanh toán của họ (ví dụ như thẻ ngân hàng) để có thể thực hiện việc mua hàng và thanh toán online.

Trong trường hợp người dùng sử dụng một máy tính ở nơi công cộng và truy cập trang chứa thông tin phương thức thanh toán của họ. Xem xong rồi thì người dùng này bấm vào logout để đăng xuất. Lúc này nếu như có một người khác tiếp theo sử dụng máy tính trên và họ bấm nút quay lại (biểu tượng dấu mũi tên quay lại ở phía góc trái thanh công cụ của trình duyệt) thì bạn cần đảm bảo rằng trình duyệt không hiển thị thông tin thanh toán của người dùng đã logout ngay trước đó.

Để làm việc này thì trong response header trả về cho truy cập tới trang chứa thông tin phương thức thanh toán của người dùng, bạn sẽ gán giá trị cho Cache-Control như sau:

Cache-Control: no-cache, no-store, must-revalidate

Khi đó trình duyệt sẽ không lưu dữ liệu của trang này trong cache và khi người kế tiếp bấn vào nút quay lại để về trang trước đó thì trình duỵệt sẽ gửi lại yêu cầu tới server để lấy thông tin. Tất nhiên do người dùng trước đã đăng xuất server của bạn sẽ yêu cầu người dùng tiếp theo đó nhập thông tin tài khoản của họ (nếu có) để vào được trang.

Kết Luận

Mặc dù ít được biến đến hơn so với các chỉ thị header phổ biến khác tuy nhiên Cache-Control lại đóng một vài trò vô cùng quan trọng trong lập trình ứng dụng web đặc biệt là vấn đề bảo mật. Ở bài viết này chúng ta đã tìm hiểu về hai trong số các công dụng phổ biến của chỉ thị Cache-Control trong giao thức HTTP. Cũng như hướng dẫn bạn cách cấu hình cache trên dịch vụ Cloudfront của AWS.

Hy vọng bạn sẽ có thể sử dụng những kiến thức này để cải thiện tốt hơn các ứng dụng đã có hoặc áp dụng chúng một cách triệt trong quá trình phát triển các ứng dụng web các lần tới.

Leave a Reply

Your email address will not be published. Required fields are marked *