Nội dung
- Yêu cầu - Bước 1 - Tạo file kiểm tra - Bước 2 - Kiểm tra hành vi mặc định - Bước 3 - Cấu hình kiểm soát bộ nhớ cache và tiêu đề hết hạn - Bước 4 - Kiểm tra bộ nhớ đệm của trình duyệt - Kết luận

Thứ hai, 31/10/2016 | 00:00 GMT+7

Cách thực hiện bộ đệm trình duyệt với module tiêu đề của Nginx trên Ubuntu 16.04

Trang web tải càng nhanh, càng có nhiều khả năng khách truy cập ở lại. Khi các trang web chứa đầy hình ảnh và nội dung tương tác chạy bằng các script được tải ở chế độ nền, việc mở một trang web không phải là một việc đơn giản. Nó bao gồm việc yêu cầu từng file khác nhau từ server . Giảm thiểu số lượng các yêu cầu này là một cách để tăng tốc trang web .

Điều này có thể được thực hiện theo nhiều cách, nhưng một trong những bước quan trọng hơn cần thực hiện là cấu hình bộ nhớ đệm của trình duyệt . Điều này cho trình duyệt biết rằng các file được download một lần được dùng lại từ các bản sao local thay vì yêu cầu server cung cấp chúng nhiều lần. Để thực hiện điều này, các tiêu đề phản hồi HTTP mới cho trình duyệt biết cách hoạt động phải được giới thiệu.

Đây là lúc mà module tiêu đề của Nginx phát huy tác dụng. Mô-đun này được dùng để thêm bất kỳ tiêu đề tùy ý nào vào phản hồi, nhưng role chính của nó là đặt đúng tiêu đề bộ nhớ đệm. Trong hướng dẫn này, ta sẽ xem xét cách sử dụng module tiêu đề của Nginx để triển khai bộ nhớ đệm của trình duyệt.

Yêu cầu

Để làm theo hướng dẫn này, bạn cần :

Một server Ubuntu 16.04 được cài đặt với hướng dẫn cài đặt server ban đầu này , bao gồm cả user không phải root có quyền sudo .
Nginx được cài đặt trên server của bạn theo hướng dẫn Cách cài đặt Nginx trên Ubuntu 16.04 .

Ngoài module tiêu đề, ta cũng sẽ sử dụng module bản đồ của Nginx trong bài viết này. Để tìm hiểu thêm về module bản đồ, bạn có thể đọc Cách sử dụng Mô-đun bản đồ của Nginx trên Ubuntu 16.04 .

Bước 1 - Tạo file kiểm tra

Trong bước này, ta sẽ tạo một số file thử nghiệm trong folder Nginx mặc định. Ta sẽ sử dụng các file này sau để kiểm tra hành vi mặc định của Nginx và sau đó để kiểm tra xem bộ nhớ đệm của trình duyệt có hoạt động hay không.

Để đưa ra quyết định về loại file nào được cung cấp qua mạng, Nginx không phân tích nội dung file ; điều đó sẽ rất chậm. Thay vào đó, nó chỉ tìm kiếm phần mở rộng file để xác định kiểu MIME của file , biểu thị mục đích của file .

Do hành vi này, nội dung của các file thử nghiệm của ta không liên quan. Bằng cách đặt tên các file một cách thích hợp, ta có thể đánh lừa Nginx rằng, ví dụ: một file hoàn toàn trống là hình ảnh và file khác là biểu định kiểu.

Tạo một file có tên test.html trong folder Nginx mặc định bằng cách sử dụng truncate . Phần mở rộng này biểu thị rằng đó là một trang HTML.

sudo truncate -s 1k /var/www/html/test.html

Hãy tạo thêm một vài file thử nghiệm theo cách tương tự: một file hình ảnh jpg , một file định kiểu css và một file JavaScript js .

sudo truncate -s 1k /var/www/html/test.jpg 
sudo truncate -s 1k /var/www/html/test.css 
sudo truncate -s 1k /var/www/html/test.js

Bước tiếp theo là kiểm tra xem Nginx hoạt động như thế nào đối với việc gửi các tiêu đề điều khiển bộ nhớ đệm trên một bản cài đặt mới với các file ta vừa tạo.

Bước 2 - Kiểm tra hành vi mặc định

Theo mặc định, tất cả các file sẽ có cùng hành vi lưu vào bộ nhớ đệm mặc định. Để khám phá điều này, ta sẽ sử dụng file HTML mà ta đã tạo ở bước 1, nhưng bạn có thể chạy các thử nghiệm này với các file mẫu nào.

Vì vậy, hãy kiểm tra xem test.html có được phân phát với bất kỳ thông tin nào liên quan đến việc trình duyệt sẽ lưu phản hồi vào bộ nhớ cache trong bao lâu. Lệnh sau đây yêu cầu một file từ server Nginx local của ta và hiển thị các tiêu đề phản hồi.

curl -I http://localhost/test.html

Bạn sẽ thấy một số tiêu đề phản hồi HTTP:

Output: Nginx response headers
HTTP/1.1 200 OK Server: nginx/1.10.0 (Ubuntu) Date: Sat, 10 Sep 2016 13:12:26 GMT Content-Type: text/html Content-Length: 1024 Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT Connection: keep-alive ETag: "57d40685-400" Accept-Ranges: bytes

Trong dòng thứ hai đến dòng cuối cùng, bạn có thể thấy tiêu đề ETag , chứa một mã định danh duy nhất cho bản sửa đổi cụ thể này của file được yêu cầu. Nếu bạn thực hiện lặp lại lệnh curl trước đó, bạn sẽ thấy cùng một giá trị ETag .

Khi sử dụng trình duyệt web, giá trị ETag được lưu trữ và gửi trở lại server với tiêu đề yêu cầu If-None-Match khi trình duyệt muốn yêu cầu lại cùng một file - ví dụ: khi làm mới trang.

Ta có thể mô phỏng điều này trên dòng lệnh với lệnh sau. Đảm bảo bạn thay đổi giá trị ETag trong lệnh này để trùng với giá trị ETag trong kết quả trước đó của bạn.

curl -I -H 'If-None-Match: "57d40685-400"' http://localhost/test.html

Câu trả lời bây giờ sẽ khác:

Output: Nginx response headers
HTTP/1.1 304 Not Modified Server: nginx/1.10.0 (Ubuntu) Date: Sat, 10 Sep 2016 13:20:31 GMT Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT Connection: keep-alive ETag: "57d40685-400"

Lần này, Nginx sẽ trả lời bằng 304 Not Modified . Nó sẽ không gửi lại file qua mạng; thay vào đó, nó sẽ cho trình duyệt biết rằng nó có thể sử dụng lại file mà nó đã download local .

Điều này rất hữu ích vì nó làm giảm lưu lượng mạng, nhưng nó không đủ tốt để đạt được hiệu suất bộ nhớ đệm tốt. Vấn đề với ETag là trình duyệt luôn gửi yêu cầu đến server hỏi liệu nó có thể sử dụng lại file đã lưu trong bộ nhớ cache của nó hay không. Mặc dù server phản hồi bằng 304 thay vì gửi lại file , vẫn cần thời gian để thực hiện yêu cầu và nhận phản hồi.

Trong bước tiếp theo, ta sẽ sử dụng module tiêu đề để thêm thông tin điều khiển bộ nhớ đệm. Điều này sẽ khiến trình duyệt lưu vào bộ nhớ cache local một số file mà không cần hỏi rõ ràng server xem làm như vậy có tốt không.

Bước 3 - Cấu hình kiểm soát bộ nhớ cache và tiêu đề hết hạn

Ngoài tiêu đề xác thực file ETag , có hai tiêu đề phản hồi điều khiển bộ nhớ đệm: Cache-Control và Expires . Cache-Control là version mới hơn, có nhiều tùy chọn hơn Expires và thường hữu ích hơn nếu bạn muốn kiểm soát tốt hơn hành vi lưu vào bộ nhớ đệm của bạn .

Nếu các tiêu đề này được đặt, chúng có thể cho trình duyệt biết rằng file được yêu cầu có thể được lưu local trong một khoảng thời gian nhất định (bao gồm cả vĩnh viễn) mà không cần yêu cầu lại. Nếu tiêu đề không được đặt, các trình duyệt sẽ luôn yêu cầu file từ server , mong đợi 200 phản hồi OK hoặc 304 Không sửa đổi .

Ta có thể sử dụng module tiêu đề để đặt các tiêu đề HTTP này. Mô-đun tiêu đề là một module Nginx cốt lõi, nghĩa là nó không cần phải được cài đặt riêng để được sử dụng.

Để thêm module tiêu đề, hãy mở file cấu hình Nginx mặc định trong nano hoặc editor yêu thích của bạn.

sudo nano /etc/nginx/sites-available/default

Tìm đoạn cấu hình server , trông giống như sau:

/ etc / nginx / sites-available / default

. . . # Default server configuration #  server {     listen 80 default_server;     listen [::]:80 default_server;  . . .

Thêm hai phần mới sau vào đây: một phần trước khối server , để xác định thời gian lưu các loại file khác nhau vào bộ nhớ cache và một phần bên trong nó, để đặt tiêu đề bộ nhớ đệm một cách thích hợp.

Đã sửa đổi / etc / nginx / sites-available / default

. . . # Default server configuration #  # Expires map map $sent_http_content_type $expires {     default                    off;     text/html                  epoch;     text/css                   max;     application/javascript     max;     ~image/                    max; }  server {     listen 80 default_server;     listen [::]:80 default_server;      expires $expires; . . .

Phần trước khối server là khối map mới xác định ánh xạ giữa loại file và thời gian loại file đó sẽ được lưu vào bộ nhớ đệm.

Ta đang sử dụng một số cài đặt khác nhau trong bản đồ này:

Giá trị mặc định được đặt thành off , điều này sẽ không thêm bất kỳ tiêu đề điều khiển bộ nhớ đệm nào. Đó là một đặt cược an toàn cho nội dung mà ta không có yêu cầu cụ thể nào về cách bộ nhớ đệm hoạt động.
Đối với text/html , ta đặt giá trị thành epoch . Đây là một giá trị đặc biệt dẫn đến rõ ràng là không có bộ nhớ đệm, điều này buộc trình duyệt phải luôn hỏi xem bản thân trang web có được cập nhật hay không.
Đối với text/css và application/javascript , là các biểu định kiểu và file Javascript, ta đặt giá trị thành max . Điều này nghĩa là trình duyệt sẽ lưu trữ các file này trong bộ nhớ cache lâu nhất có thể, giảm đáng kể số lượng yêu cầu do thường có nhiều file này.
Cài đặt cuối cùng dành cho ~image/ , là một biểu thức chính quy sẽ trùng với tất cả các loại file có chứa image/ trong tên kiểu MIME của chúng (như image/jpg và image/png ). Giống như bảng định kiểu, thường có rất nhiều hình ảnh trên trang web có thể được lưu vào bộ nhớ cache một cách an toàn, vì vậy ta cũng đặt giá trị này thành max .

Bên trong khối server , chỉ thị expires (một phần của module tiêu đề) đặt tiêu đề điều khiển bộ nhớ đệm. Nó sử dụng giá trị từ biến $expires được đặt trong bản đồ. Bằng cách này, các tiêu đề kết quả sẽ khác nhau tùy thuộc vào loại file .

Lưu file để thoát.

Để kích hoạt cấu hình mới, hãy khởi động lại Nginx.

sudo systemctl restart nginx

Tiếp theo, hãy đảm bảo cấu hình mới của ta hoạt động.

Bước 4 - Kiểm tra bộ nhớ đệm của trình duyệt

Thực hiện yêu cầu giống như trước đây cho file HTML thử nghiệm.

curl -I http://localhost/test.html

Lần này phản ứng sẽ khác. Bạn sẽ thấy hai tiêu đề phản hồi HTTP bổ sung:

Tiêu đề phản hồi Nginx

HTTP/1.1 200 OK Server: nginx/1.10.0 (Ubuntu) Date: Sat, 10 Sep 2016 13:48:53 GMT Content-Type: text/html Content-Length: 1024 Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT Connection: keep-alive ETag: "57d40685-400" Expires: Thu, 01 Jan 1970 00:00:01 GMT Cache-Control: no-cache Accept-Ranges: bytes

Tiêu đề Expires hiển thị một ngày trong quá khứ và Cache-Control được đặt no-cache , điều này cho trình duyệt luôn hỏi server xem có version mới hơn của file hay không (sử dụng tiêu đề ETag , như trước đây).

Bạn sẽ thấy phản hồi khác biệt với file hình ảnh thử nghiệm.

curl -I http://localhost/test.jpg

Tiêu đề phản hồi Nginx

HTTP/1.1 200 OK Server: nginx/1.10.0 (Ubuntu) Date: Sat, 10 Sep 2016 13:50:41 GMT Content-Type: image/jpeg Content-Length: 1024 Last-Modified: Sat, 10 Sep 2016 13:11:36 GMT Connection: keep-alive ETag: "57d40688-400" Expires: Thu, 31 Dec 2037 23:55:55 GMT Cache-Control: max-age=315360000 Accept-Ranges: bytes

Trong trường hợp này, Expires hiển thị ngày trong tương lai xa và Cache-Control chứa thông tin về max-age , cho trình duyệt biết thời gian có thể lưu vào cache file trong vài giây. Điều này yêu cầu trình duyệt lưu vào bộ nhớ cache của hình ảnh đã download bao lâu có thể, vì vậy bất kỳ lần xuất hiện tiếp theo nào của hình ảnh này sẽ sử dụng bộ nhớ cache local và không gửi yêu cầu đến server .

Kết quả sẽ tương tự cho cả test.js và test.css , vì cả file JavaScript và file định kiểu đều được đặt bằng tiêu đề bộ nhớ đệm.

Điều này nghĩa là các tiêu đề kiểm soát bộ nhớ cache đã được cấu hình đúng cách và trang web sẽ được hưởng lợi từ việc tăng hiệu suất và ít yêu cầu server hơn do bộ nhớ đệm của trình duyệt. Bạn nên tùy chỉnh cài đặt bộ nhớ đệm dựa trên nội dung cho trang web của bạn , nhưng các cài đặt mặc định trong bài viết này là một nơi hợp lý để bắt đầu.

Kết luận

Mô-đun tiêu đề được dùng để thêm bất kỳ tiêu đề tùy ý nào vào phản hồi, nhưng cài đặt đúng cách các tiêu đề điều khiển bộ nhớ đệm là một trong những ứng dụng hữu ích nhất của nó. Nó làm tăng hiệu suất cho user trang web, đặc biệt là trên các mạng có độ trễ cao hơn, như mạng của nhà cung cấp dịch vụ di động. Nó cũng có thể dẫn đến kết quả tốt hơn trên các công cụ tìm kiếm có tính đến các bài kiểm tra tốc độ vào kết quả của chúng. Đặt tiêu đề bộ nhớ đệm của trình duyệt là một trong những khuyến nghị chính từ các công cụ kiểm tra Tốc độ trang của Google.

Thông tin chi tiết hơn về module tiêu đề có thể được tìm thấy trong tài liệu module tiêu đề chính thức của Nginx .

Tags:

Các tin liên quan