HƯỚNG DẪN Cache các tập tin tĩnh trên Nginx

Thảo luận trong 'KIẾN THỨC VPS/SERVER' bắt đầu bởi quyet1990, 1/12/16.

  1. quyet1990

    quyet1990 New Member

    Tham gia ngày:
    22/10/16
    Bài viết:
    220
    Đã được thích:
    0
    Hướng dẫn này giải thích làm thế nào bạn có thể cấu hình nginx để thiết lập Expires HTTP header và chỉ thị max-age của Cache-Control HTTP header của các tập tin tĩnh (như hình ảnh, CSS và các tập tin Javascript) tới một ngày trong tương lai để các tập tin sẽ được lưu trữ bởi trình duyệt truy cập của khách truy cập.

    Điều này giúp tiết kiệm băng thông và làm cho trang web của bạn xuất hiện nhanh hơn (nếu người dùng truy cập trang web của bạn trong lần thứ hai, các tập tin tĩnh sẽ được lấy từ bộ nhớ cache của trình duyệt).
    1. Chuẩn bị
    Tôi giả sử bạn có một thiết lập nginx đang làm việc, và nó đã cài đặt đủ những thứ cần thiết.

    2. Cấu hình nginx
    Expires HTTP header có thể được thiết lập với sự giúp đỡ của chỉ thị expires có thể được đặt ở bên trong http {}, server {}, location {}, hoặc một câu lệnh if bên trong một khối location {}. Thông thường, bạn sẽ sử dụng chỉ thị expires trong khối location cho các tập tin tĩnh của bạn, ví dụ như sau:

    Mã:
    location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
      expires 365d;
    }
    
    Trong ví dụ trên, tất cả các tập tin .jpg, .jpeg, .png, .gif, ico, css, và .js có được một chỉ thị expires là 365 ngày bắt đầu từ lần truy cập đầu tiên bằng trình duyệt. Vì vậy, bạn nên chắc chắn rằng khối location {} chỉ chứa các tập tin tĩnh mà có thể được lưu trữ bởi trình duyệt.

    Reload lại nginx để áp dụng cấu hình mới:
    Mã:
     /etc/init.d/nginx reload
    Bạn có thể sử dụng các thiết lập thời gian sau đây với chỉ thị expires:
    • off làm cho Expires and Cache-Control headers sẽ không được sửa đổi.
    • epoch thiết lập Expires header bắt đầu từ cột mốc thời gian 01 Tháng một, 1970 00:00:01 GMT.
    • max thiết lập Expires header tới ngày 31 tháng 12 năm 2037 23:59:59 GMT, và Cache-Control max-age tới 10 năm.
    • Thời gian mà không có một tiền tố @ có nghĩa là thời gian hết hạn tương đối so với thời gian truy cập trình duyệt. Một thời gian negative có thể được chỉ định, nó sẽ thiết lập Cache-Control header thành no-cache. Ví dụ: expires 10D; hoặc expires 14w3d;
    • Thời gian với một tiền tố @ xác định thời gian của ngày hết hạn tuyệt đối, viết bằng một trong hai hình thức Hh hoặc Hh: Mm, nơi H nằm trong khoảng 0-24, và M nằm trong khoảng từ 0 đến 59. Exmaple: expires @16:30;
    Bạn có thể sử dụng các đơn vị thời gian sau:
    • ms: mili giây
    • s: giây
    • m: phút
    • h: giờ
    • d: ngày
    • w: tuần
    • M: tháng (30 ngày)
    • y: năm (365 ngày)
    Ví dụ: 1h30m có nghĩa là một giờ ba mươi phút, 1y6M có nghĩa là một năm và sáu tháng.

    3. Kiểm tra
    Để kiểm tra cấu hình của bạn hoạt động, bạn có thể sử dụng các chức năng phân tích mạng của các công cụ Developer ở trình duyệt Firefox và truy cập vào một tập tin tĩnh thông qua Firefox (ví dụ một hình ảnh).

    Trong đầu ra Header, bây giờ bạn sẽ thấy một Expires header and a Cache-Control header với một chỉ thị max-age (max-age chứa một giá trị với đơn vị là giây(s), ví dụ 31.536.000 là một năm trong tương lai):
    4. Liên kết
    Bạn có thể tìm thêm thông tin tại địa chỉ này:
    nginx HttpHeadersModule: http://wiki.nginx.org/HttpHeadersModule
     
Tags:

Chia sẻ trang này

Đang tải...