GALAXY TECH
Chuyên gia Công nghệ
Thứ sáu, 02/12/2016 | 00:00 GMT+7

Cách thêm module gzip vào Nginx trên Ubuntu 16.04

Một trang web sẽ tải nhanh như thế nào phụ thuộc vào kích thước của tất cả các file mà trình duyệt phải download . Việc giảm kích thước file được truyền có thể làm cho trang web không chỉ tải nhanh hơn mà còn rẻ hơn cho những người phải trả tiền cho việc sử dụng băng thông của họ.

gzip là một chương trình nén dữ liệu phổ biến. Bạn có thể cấu hình Nginx để sử dụng gzip để nén các file mà nó phân phối nhanh chóng. Các file đó sau đó sẽ được extract bởi các trình duyệt hỗ trợ nó khi truy xuất mà không bị mất bất kỳ điều gì, nhưng với lợi ích là lượng dữ liệu nhỏ hơn được truyền giữa web server và trình duyệt.

Do cách hoạt động của tính năng nén nói chung cũng như cách thức hoạt động của gzip , một số file nhất định sẽ nén tốt hơn những file khác. Ví dụ: các file văn bản nén rất tốt, thường có kết quả nhỏ hơn hai lần. Mặt khác, các hình ảnh như file JPEG hoặc PNG đã được nén về bản chất của chúng và việc nén thứ hai bằng gzip mang lại ít hoặc không có kết quả. Nén file sử dụng hết tài nguyên server , vì vậy tốt nhất là chỉ nén những file sẽ làm giảm kích thước đáng kể của nó.

Trong hướng dẫn này, ta sẽ thảo luận về cách cấu hình Nginx được cài đặt trên server Ubuntu 16.04 của bạn để sử dụng tính năng nén gzip nhằm giảm kích thước nội dung được gửi đến khách truy cập trang web.

Yêu cầu

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

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 để nén văn bản của gzip .

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

Do hành vi này, nội dung của các file kiểm tra là 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 nghĩ rằng một file hoàn toàn trống là một hình ảnh và file kia, ví dụ, là một biểu định kiểu.

Trong cấu hình của ta , Nginx sẽ không nén các file rất nhỏ, vì vậy ta sẽ tạo các file thử nghiệm có kích thước chính xác là 1 kilobyte. Điều này sẽ cho phép ta xác minh xem Nginx có sử dụng tính năng nén ở nơi cần thiết hay không, nén một loại file và không làm như vậy với các file khác.

Tạo một file 1 kilobyte có tên test.html trong folder Nginx mặc định bằng cách sử dụng truncate . Phần mở rộng 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 quá trình nén trên 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

Hãy kiểm tra xem file HTML có tên test.html có được phục vụ với tính năng nén hay không. Lệnh yêu cầu một file từ server Nginx của ta và chỉ định rằng có thể phân phát nội dung nén gzip bằng cách sử dụng tiêu đề HTTP ( Accept-Encoding: gzip ).

  • curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

Đáp lại, bạn sẽ thấy một số tiêu đề phản hồi HTTP:

Tiêu đề phản hồi Nginx
HTTP/1.1 200 OK Server: nginx/1.4.6 (Ubuntu) Date: Tue, 19 Jan 2016 20:04:12 GMT Content-Type: text/html Last-Modified: Tue, 04 Mar 2014 11:46:45 GMT Connection: keep-alive Content-Encoding: gzip

Ở dòng cuối cùng, bạn có thể thấy tiêu đề Content-Encoding: gzip . Điều này cho ta biết rằng nén gzip đã được sử dụng để gửi file này. Điều này xảy ra vì trên Ubuntu 16.04, Nginx đã bật tính năng nén gzip tự động sau khi cài đặt với cài đặt mặc định của nó.

Tuy nhiên, theo mặc định, Nginx chỉ nén các file HTML. Mọi file khác trên bản cài đặt mới sẽ được phân phát không nén. Để xác minh điều đó, bạn có thể yêu cầu hình ảnh thử nghiệm của ta có tên test.jpg theo cách tương tự.

  • curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

Kết quả sẽ hơi khác so với trước đây:

Tiêu đề phản hồi Nginx
HTTP/1.1 200 OK Server: nginx/1.4.6 (Ubuntu) Date: Tue, 19 Jan 2016 20:10:34 GMT Content-Type: image/jpeg Content-Length: 0 Last-Modified: Tue, 19 Jan 2016 20:06:22 GMT Connection: keep-alive ETag: "569e973e-0" Accept-Ranges: bytes

Không có tiêu đề Content-Encoding: gzip trong kết quả , nghĩa là file được phân phát mà không cần nén.

Bạn có thể lặp lại thử nghiệm với biểu định kiểu CSS thử nghiệm.

  • curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

, không có đề cập đến nén trong kết quả .

Tiêu đề phản hồi Nginx cho file CSS
HTTP/1.1 200 OK Server: nginx/1.4.6 (Ubuntu) Date: Tue, 19 Jan 2016 20:20:33 GMT Content-Type: text/css Content-Length: 0 Last-Modified: Tue, 19 Jan 2016 20:20:33 GMT Connection: keep-alive ETag: "569e9a91-0" Accept-Ranges: bytes

Bước tiếp theo là cấu hình Nginx để không chỉ phục vụ các file HTML nén mà còn các định dạng file khác có thể được hưởng lợi từ việc nén.

Bước 3 - Cấu hình cài đặt gzip của Nginx

Để thay đổi cấu hình gzip Nginx, hãy mở file cấu hình Nginx chính trong nano hoặc editor yêu thích của bạn.

  • sudo nano /etc/nginx/nginx.conf

Tìm phần cài đặt gzip , trông giống như sau:

/etc/nginx/nginx.conf
. . . ## # `gzip` Settings # # gzip on; gzip_disable "msie6";  # gzip_vary on; # gzip_proxied any; # gzip_comp_level 6; # gzip_buffers 16 8k; # gzip_http_version 1.1; # gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; . . .

Bạn có thể thấy rằng theo mặc định, nén gzip được bật bởi lệnh gzip on , nhưng một số cài đặt bổ sung được comment bằng dấu # comment . Ta sẽ thực hiện một số thay đổi đối với phần này:

  • Bật cài đặt bổ sung bằng cách bỏ ghi chú tất cả các dòng đã comment (tức là bằng cách xóa # ở đầu dòng)
  • Thêm gzip_min_length 256; Chỉ thị, lệnh cho Nginx không nén các file nhỏ hơn 256 byte. Đây là các file rất nhỏ hầu như không được hưởng lợi từ việc nén.
  • Nối chỉ thị gzip_types với các loại file bổ sung biểu thị phông chữ web, biểu tượng ico và hình ảnh SVG.

Sau khi những thay đổi này được áp dụng, phần cài đặt sẽ giống như sau:

/etc/nginx/nginx.conf
. . . ## # `gzip` Settings # # gzip on; gzip_disable "msie6";  gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_min_length 256; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon; . . .

Lưu file để thoát.

Để bật cấu hình mới, hãy reload Nginx.

  • sudo systemctl reload nginx

Bước tiếp theo là kiểm tra xem các thay đổi đối với cấu hình đã hoạt động như mong đợi hay chưa.

Bước 4 - Xác minh cấu hình mới

Ta có thể kiểm tra giống như ta đã làm trong bước 2, bằng cách sử dụng curl trên mỗi file kiểm tra và kiểm tra kết quả cho tiêu đề Content-Encoding: gzip .

  • curl -H "Accept-Encoding: gzip" -I http://localhost/test.html 
  • curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg 
  • curl -H "Accept-Encoding: gzip" -I http://localhost/test.css 
  • curl -H "Accept-Encoding: gzip" -I http://localhost/test.js

Bây giờ chỉ test.jpg , là một file hình ảnh, sẽ không bị nén. Trong tất cả các ví dụ khác, bạn có thể tìm thấy tiêu đề Content-Encoding: gzip trong kết quả .

Nếu đúng như vậy, bạn đã cấu hình nén gzip trong Nginx thành công!

Kết luận

Thay đổi cấu hình Nginx để sử dụng đầy đủ tính năng nén gzip rất dễ dàng, nhưng lợi ích có thể rất lớn. Không chỉ những khách truy cập có băng thông hạn chế sẽ nhận được trang web nhanh hơn mà cả Google cũng sẽ hài lòng về việc trang web tải nhanh hơn. Tốc độ đang được quan tâm như một phần quan trọng của web hiện đại và sử dụng gzip là một bước quan trọng để cải thiện nó.

Tags:

Các tin liên quan

Cơ sở hạ tầng SaltStack: Tạo Salt State cho web server Nginx
2016-11-07
Cách thêm module log vào Nginx trên Ubuntu 16.04
2016-10-31
Cách thêm module log vào Nginx trên CentOS 7
2016-10-31
Cách di chuyển web root Nginx đến vị trí mới trên Ubuntu 16.04
2016-07-29
Cách cấu hình Nginx làm web server và reverse-proxy (reverse proxy) cho Apache trên một server Ubuntu 16.04
2016-07-06
Cách thiết lập server block Nginx (server ảo) trên Ubuntu 16.04
2016-05-19
Cách cung cấp các ứng dụng Flask với uWSGI và Nginx trên Ubuntu 16.04
2016-05-19
Cách cung cấp các ứng dụng Flask với Gunicorn và Nginx trên Ubuntu 16.04
2016-05-19
Cách thiết lập Django với Postgres, Nginx và Gunicorn trên Ubuntu 16.04
2016-05-18
Cách cung cấp các ứng dụng Django với uWSGI và Nginx trên Ubuntu 16.04
2016-05-16