vi
new
+1
Avatar
pham xuan thanh @pham.xuan.thanh
1.2K 48 39
Đã đăng vào thg 11 2, 2016 6:44 CH 14 phút đọc
514

Thực hiện Caching Browser với Nginx's header Module trên Ubuntu 16.04

Giới thiệu

Giúp việc tải 1 trang web nhanh hơn và nhiều khách truy cập cùng lúc. Khi các trang web có đầy đủ hình ảnh và nội dung tương tác, script thì load một trang web không phải là một nhiệm vụ đơn giản. Nó yêu cầu nhiều tập tin khác nhau từ một máy chủ. Giảm thiểu số lượng những yêu cầu này là một cách để tăng tốc độ trang web của bạn.

Điều này có thể được thực hiện bằng nhiều cách khác nhau, nhưng một trong những bước quan trọng là cấu hình bộ nhớ đệm của trình duyệt. Đây là lập trình cho trình duyệt các tập tin đã tải về một lần có thể được sử dụng lại từ local thay vì yêu cầu máy chủ tải lại một lần nữa. Để làm điều này, HTTP response headers mới có thể cấu hình cho trình duyệt làm thế nào.

Đây là nơi mà Nginx's header module được áp dụng. Module này có thể được sử dụng để thêm bất cứ header tùy ý, nhưng vai trò chính của nó là để thiết lập đúng header bộ nhớ đệm. Trong hướng dẫn này, chúng ta sẽ xem xét làm thế nào để sử dụng Nginx's header module để thực hiện bộ nhớ đệm của trình duyệt.

Điều kiện tiên quyết

Để thực hiện theo hướng dẫn này, bạn sẽ cần:

Một Ubuntu 16.04 server thiết lập với hướng dẫn thiết lập máy chủ ban đầu này, trong đó có một người sử dụng không phải root sudo.

Cài đặt Nginx trên Ubuntu 16.04.

Ngoài các header module, chúng tôi cũng sẽ sử dụng Nginx's map module trong bài viết này.

Bước 1 - Tạo tập tin thử nghiệm

Trong bước này, chúng ta sẽ tạo ra một số tập tin kiểm tra trong thư mục mặc định Nginx. Chúng tôi sẽ sử dụng những tập tin này sau đó để kiểm tra hành vi mặc định Nginx và sau đó để kiểm tra bộ nhớ đệm trình duyệt đang làm việc.

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

Vì hành vi này, nội dung của các tập tin thử nghiệm của chúng tôi là không thích hợp. Bằng cách đặt tên các tập tin một cách thích hợp, chúng ta có thể lừa Nginx vào suy nghĩ rằng, ví dụ, một tập tin hoàn toàn trống rỗng là một hình ảnh.

Tạo một tập tin có tên test.html trong mặc định Nginx thư mục bằng truncate. Phần mở rộng này biểu thị rằng nó là một trang HTML.

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

Hãy tạo thêm một vài tập tin thử nghiệm theo cách tương tự: một tập tin hình ảnh jpg, một tập tin css, và một tập tin JavaScript.

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

Bước tiếp theo là để kiểm tra cách Nginx xử lý với việc gửi header kiểm soát bộ nhớ đệm trên một cài đặt mới với các tập tin mà chúng ta vừa tạo ra.

Bước 2 - Kiểm tra Default Behavior

Theo mặc định, tất cả các file sẽ có cùng một hành vi bộ nhớ đệm mặc định. Để tìm hiếu điều này, chúng tôi sẽ sử dụng các tập tin HTML mà chúng ta tạo ở bước 1, nhưng bạn có thể chạy thử nghiệm với bất kỳ tập tin nào.

Vì vậy, hãy kiểm tra xem test.html được tải với thông tin liên quan đến bao lâu trình duyệt cache phản ứng. Các lệnh sau đây yêu cầu một tập tin từ máy chủ Nginx local của chúng tôi và cho thấy các response header.

curl -Tôi http: //localhost/test.html

Bạn sẽ thấy một vài HTTP response headers:

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 lần thứ hai đến dòng cuối cùng bạn có thể xem các ETag, trong đó có một định danh duy nhất cho phiên bản đặc biệt này của tập tin được yêu cầu. Nếu bạn thực hiện lệnh curl trước đó nhiều lần, bạn sẽ thấy giá trị ETag chính xác tương tự.

Khi sử dụng một trình duyệt web, các giá trị ETag được lưu giữ và gửi lại cho máy chủ với If-None-Match request header khi trình duyệt muốn yêu cầu các tập tin một lần nữa - ví dụ, khi làm mới trang.

Chúng tôi có thể mô phỏng này trên dòng lệnh với lệnh sau đây. Hãy chắc chắn rằng bạn thay đổi giá trị ETag trong lệnh này để phù hợp với các giá trị ETag trong output trước đó của bạn.

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

Các response sẽ khác nhau:

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ả về 304 Not Modified. Nó sẽ không gửi các tập tin qua mạng một lần nữa; thay vào đó, nó sẽ cho trình duyệt tái sử dụng các tập tin nó đã tải.

Đ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 hoàn toàn tốt để đạt được hiệu năng bộ nhớ đệm tốt. Vấn đề với ETag là trình duyệt luôn gửi một yêu cầu đến máy chủ yêu cầu nếu nó có thể tái sử dụng tập tin lưu trữ của nó. Mặc dù các máy chủ đáp ứng với 304 thay vì gửi các tập tin một lần nữa, nó vẫn cần có thời gian để thực hiện yêu cầu và nhận được phản hồi.

Trong bước tiếp theo, chúng tôi sẽ sử dụng các headers module để nối thêm bộ nhớ đệm thông tin điều khiển. Điều này sẽ làm cho trình duyệt để cache một số tập tin tại local mà không hỏi rõ máy chủ nếu tốt đẹp của nó để làm như vậy.

Bước 3 - Cấu hình Cache-Control và Expires Headers

Ngoài các header xác nhận tập tin ETag, có hai response headers kiểm soát bộ nhớ đệm : Cache-Control và Expires. Cache-Control là các phiên bản mới hơn, có thêm nhiều lựa chọn hơn Expires và nói chung là hữu dụng hơn nếu bạn muốn kiểm soát tốt hơn hành vi của bộ nhớ đệm của bạn.

Nếu những tiêu đề được thiết lập, họ có thể nói với các trình duyệt tập tin yêu cầu có thể được lưu giữ tại địa phương trong một khoảng thời gian nhất định (hoặc mãi mãi), không yêu cầu nó một lần nữa. Nếu headerkhông được thiết lập, trình duyệt sẽ luôn luôn yêu cầu các tập tin từ máy chủ, chờ đợi hoặc 200 OK hoặc 304 Not Modified.

Chúng tôi có thể sử dụng các header module để thiết lập các header HTTP. Các header module là lõi của Nginx module, có nghĩa là nó không cần phải được cài đặt riêng để sử dụng.

Để thêm các header module, mở các tập tin cấu hình mặc định trong Nginx bằng nano hoặc soạn thảo văn bản yêu thích của bạn.

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

Tìm các server cấu hình máy chủ, trông như thế này:

. . .
# Default server configuration
#

server {
    listen 80 default_server;
    listen [::]:80 default_server;

. . .

Thêm hai phần mới ở đây: một trước khi khối máy chủ, để xác định bao lâu để cache các loại tập tin khác nhau, và một bên trong nó, để thiết lập các 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 server block là một khối map mới trong đó xác định ánh xạ giữa các loại tập tin và bao lâu là loại tập tin cần được lưu trữ.

Chúng tôi đang sử dụng các thiết lập khác nhau trong map này:

  • Giá trị mặc định được thiết lập để tắt, sẽ không thêm bất kỳ header kiểm soát bộ nhớ đệm. Đó là một cách an toàn cho nội dung khi chúng ta không có yêu cầu cụ thể về cách thức bộ nhớ cache làm việc.

  • Đối với văn bản / html, chúng ta thiết lập giá trị epoch. Đây là một giá trị đặc biệt không có bộ nhớ đệm, và buộc trình duyệt luôn request trang web cập nhật.

  • Đối với văn bản / css và ứng dụng / javascript, stylesheets và các tập tin Javascript, chúng ta thiết lập giá trị max. Điều này có nghĩa là trình duyệt sẽ lưu các tập tin này miễn là nó có thể, làm giảm số lượng request vì thường rất nhiều các tập tin như thế này.

  • Thiết lập cuối cùng là cho hình ảnh. Giống như stylesheets, thường có rất nhiều hình ảnh trên các trang web có thể được lưu trữ một cách an toàn, vì vậy chúng tôi thiết lập max là tốt nhất.

Bên trong server block,chỉ thị expires (một phần của các headers module) đặt header kiểm soát bộ nhớ đệm. Nó sử dụng các giá trị từ $expires trong map. Bằng cách này, các header kết quả sẽ khác nhau tùy thuộc vào loại tập tin.

Lưu và đóng file để thoát.

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

sudo systemctl restart nginx

Tiếp theo, hãy chắc chắn rằng cấu hình mới của chúng ta hoạt động.

Bước 4 - Kiểm tra trình duyệt Caching

Thực hiện các yêu cầu tương tự như trước đây cho các tập tin HTML test.

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

Lần này response sẽ khác nhau. Bạn sẽ thấy hai HTTP response headers:

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

Các Expires header hiển thị một ngày trong quá khứ và Cache-Control được thiết lập với no-cache, nói với các trình duyệt luôn yêu cầu máy chủ nếu có một phiên bản mới hơn của tập tin (sử dụng tiêu đề ETag, như trước đây).

Bạn sẽ thấy một response khác biệt với các tập tin hình ảnh thử nghiệm.

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

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 header hiển thị ngày tháng trong tương lai, và Cache-Control chứa thông tin max-age, nói với các trình duyệt bao lâu nó có thể cache các tập tin trong vài giây. Điều này cho trình duyệt cache các hình ảnh tải về cho đến khi nó có thể, vì vậy bất kỳ sự xuất hiện tiếp theo của hình ảnh này sẽ sử dụng bộ nhớ cache của local và không gửi một yêu cầu đến máy chủ.

Kết quả sẽ được tương tự cho cả hai test.js và test.css, vì cả hai JavaScript và file stylesheet được thiết lập với header bộ nhớ đệm.

Điều này có 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 của bạn sẽ được hưởng lợi từ sự tăng hiệu suất và yêu cầu máy chủ ít do bộ nhớ đệm của trình duyệt. Bạn nên tùy chỉnh các thiết lập bộ nhớ đệm dựa trên nội dung cho trang web của bạn, nhưng mặc định trong bài viết này là một thứ hợp lý để bắt đầu.

Phần kết luận

Các headers module có thể được sử dụng để thêm bất cứ header tùy ý để đáp ứng, nhưng thiết lập đúng header kiểm soát bộ nhớ đệm là một trong những ứng dụng hữu ích nhất. Nó làm tăng hiệu suất cho người sử dụng trang web, đặc biệt là các mạng có độ trễ cao hơn, như các mạng di động. Nó cũng có thể dẫn đến kết quả tốt hơn trên công cụ tìm kiếm mà yếu tố kiểm tra tốc độ vào kết quả của họ. Thiết lập header bộ nhớ đệm 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.

Server

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí