Chỉ với một vài thao tác nhỏ, bạn có thể tăng tốc website lên nhiều lần so với hiện tại. Tại sao không thử nhỉ?

Trong bài viết trước mình đã giới thiệu về HTTP/2 và những lợi ích mà nó mang lại. Ngay từ bây giờ, bạn đã có thể áp dụng giao thức HTTP/2 cho website của mình rồi đó.

Một điều lưu ý nhỏ là HTTP/2 chỉ hoạt động khi cả web server và trình duyệt cùng hỗ trợ giao thức, nếu không kết nối sẽ tự động quay lại HTTP/1.1.

– Về phương diện trình duyệt, các trình duyệt phổ biến như Chrome, Firefox, Edge, Safari… đều đã hỗ trợ giao thức HTTP/2 (kiểm tra tại CanIUse). Tuy vậy, tất cả lại chỉ hỗ trợ HTTP/2 qua kết nối SSL/TLS.

Như vậy, để tận hưởng lợi ích của HTTP/2, website cần phải sử dụng SSL.

– Về phương diện Hosting/Server, ngoài SSL, bạn cần đảm bảo hệ thống webserver đã thiết lập HTTP/2.

Nếu bạn dùng Hosting, hãy liên hệ hỏi nhà cung cấp cho chắc chắn. Với StableHost, Hawk Host, AZDIGI thì yên tâm dùng mà không cần hỏi.

Nếu bạn dùng VPS/Cloud Server, hãy kích hoạt HTTP/2 cho webserver thông qua các giao thức trực tiếp/module cài đặt (cụ thể tùy vào từng loại webserver).

Bài viết này mình sẽ hướng dẫn thiết lập HTTP/2 trên VPS sử dụng Nginx webserver (ví dụ HocVPS, Centmin Mod…) tương thích với các trình duyệt phổ biến hiện nay. Bạn cần:

  • Biên dịch mã nguồn Nginx tích hợp OpenSSL phiên bản 1.0.2 trở lên (làm 1 lần duy nhất)
  • Cấu hình SSL HTTP/2 trong Nginx Conf
Nếu bạn đã cài đặt HTTPS theo hướng dẫn cài đặt chứng chỉ SSL hoặc Let’s Encrypt thì chỉ cần tiến hành biên dịch lại mã nguồn Nginx (bước 1) là đã thiết lập được HTTP/2.

1. Tích hợp OpenSSL 1.1.0f vào Nginx

Bạn cần tích hợp OpenSSL v1.0.2 trở lên vào Nginx. HocVPS lựa chọn phiên bản mới nhất OpenSSL v1.1.0f để tích hợp vào Nginx 1.12.0. Bạn có thể tham khảo các phiên bản khác tại OpenSSL Source.

Để làm được điều đó, bạn cần phải biên dịch lại mã nguồn Nginx tích hợp OpenSSL v1.1.0f chứ không thể cài đặt như 1 module riêng lẻ.

1.1. Chuẩn bị

– Kiểm tra thông tin Nginx. Hiện tại, VPS sử dụng Nginx phiên bản mới nhất 1.12 tích hợp OpenSSL 1.0.1e (mặc định, ra đời từ năm 2013) cùng với các tham số Configure Arguments như phần bôi đỏ.

Bạn sẽ cần copy lại thông tin tham số này để chạy lệnh compile source Nginx ở bước sau.

# nginx -V
nginx version: nginx/1.12.0
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-17) (GCC)
built with OpenSSL 1.0.1e-fips 11 Feb 2013
TLS SNI support enabled
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector --param=ssp-buffer-size=4 -m64 -mtune=generic -fPIC' --with-ld-opt='-Wl,-z,relro -Wl,-z,now -pie'

– Tải và cài đặt các thành phần cần thiết như mã nguồn Nginx 1.12.0, mã nguồn OpenSSL 1.1.0f, các trình biên dịch.

# yum install gcc-c++ pcre-devel zlib-devel epel-release -y
# cd /usr/local/src
# wget http://nginx.org/download/nginx-1.12.0.tar.gz && tar -xvf nginx-1.12.0.tar.gz
# wget https://www.openssl.org/source/openssl-1.1.0f.tar.gz && tar -xvf openssl-1.1.0f.tar.gz

1.2. Biên dịch Nginx

– Truy cập thư mục chứa Nginx để cấu hình mã nguồn Nginx với lệnh ./configure cùng toàn bộ tham số mình nói ở bước 1.1 và thêm vào --with-openssl=/usr/local/src/openssl-1.1.0f

# cd nginx-1.12.0
# ./configure --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector --param=ssp-buffer-size=4 -m64 -mtune=generic -fPIC' --with-ld-opt='-Wl,-z,relro -Wl,-z,now -pie' --with-openssl=/usr/local/src/openssl-1.1.0f

Kết quả hiển thị như dưới là thành công:

Configuration summary
  + using threads
  + using system PCRE library
  + using OpenSSL library: /usr/local/src/openssl-1.1.0f
  + using system zlib library

  nginx path prefix: "/etc/nginx"
  nginx binary file: "/usr/sbin/nginx"
  nginx modules path: "/usr/lib64/nginx/modules"
  nginx configuration prefix: "/etc/nginx"
  nginx configuration file: "/etc/nginx/nginx.conf"
  nginx pid file: "/var/run/nginx.pid"
  nginx error log file: "/var/log/nginx/error.log"
  nginx http access log file: "/var/log/nginx/access.log"
  nginx http client request body temporary files: "/var/cache/nginx/client_temp"
  nginx http proxy temporary files: "/var/cache/nginx/proxy_temp"
  nginx http fastcgi temporary files: "/var/cache/nginx/fastcgi_temp"
  nginx http uwsgi temporary files: "/var/cache/nginx/uwsgi_temp"
  nginx http scgi temporary files: "/var/cache/nginx/scgi_temp"

– Chạy lệnh phía dưới để tiến hành compile Nginx.

# make

Đợi tầm 3-5 phút để tiến trình thành công là bạn có thể sử dụng Nginx đã được biên dịch thủ công để làm web server.

1.3. Thay thế Nginx

– Tiến hành thay thế Nginx trên VPS bằng Nginx vừa được biên dịch lại:

# mv /usr/sbin/nginx /usr/sbin/nginx.bak
# cp objs/nginx /usr/sbin/nginx
# service nginx restart

– Kiểm tra lại nếu thấy thông tin như bên dưới là thành công.

# nginx -V
nginx version: nginx/1.12.0
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-18) (GCC)
built with OpenSSL 1.1.0f  25 May 2017
TLS SNI support enabled
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector --param=ssp-buffer-size=4 -m64 -mtune=generic -fPIC' --with-ld-opt='-Wl,-z,relro -Wl,-z,now -pie' --with-openssl=/usr/local/src/openssl-1.1.0f

2. Cấu hình SSL HTTP/2 trong Nginx Conf

Webserver Nginx trên hệ thống của bạn đã sẵn sàng thiết lập giao thức HTTP/2 giữa Server và Browser. Bạn cần kích hoạt giao thức HTTP2 và SSL trong cấu hình Nginx của mỗi site.

Bạn sửa cấu hình Nginx trong block server {…} như sau (chỉnh sửa đối với từng website trong hệ thống).

listen   443 ssl http2;

Cụ thể, bạn cấu hình như hướng dẫn cài đặt chứng chỉ SSL hoặc Let’s Encrypt

3. Kiểm tra

Để kiểm tra, các bạn sử dụng công cụ Developer Tools của trình duyệt hoặc kiểm tra qua website.

Kiểm tra trực tiếp các kết nối trình duyệt tới website với công cụ Developer Tools F12 (trình duyệt nào cũng có). Như bạn đã thấy, HocVPS đã dùng HTTP/2, thời gian load lần đầu homepage chỉ là 2.33s.

Lưu ý: Một số phần mềm Antivirus chặn HTTP/2 Protocol nên cần kiểm tra cả ở máy tính khác và check cả Firefox và Chrome.

  • Với Chrome, nếu không thấy tab Protocol, bạn hãy nhấn chuột phải ở menu để kích hoạt.
  • Với Firefox, các bạn check tab Header trong Network sẽ thấy Version: HTTP/2.0

Bên cạnh đó, bạn có thể kiếm tra qua website HTTP2.pro. Kết quả tích hợp HTTP/2 kèm ALPN là ok.

Hi vọng với bài viết hướng dẫn này, các bạn có thể kích hoạt kết nối giao thức HTTP/2 cho website của mình. Nếu có điều gì thắc mắc, hãy để lại comment bên dưới nhé.

101 Comments

  1. Anh 2 comment

    Mình ko hiểu lắm ở mục 1.2 biên dịch nginx, làm sao để truy cập vào và cấu hình

    1. Việt Phương Moderator

      Bạn biên dịch lại Nginx trên mã nguồn vừa tải về ở bước 1.1. chứ không phải biên dịch lại Nginx trên VPS

  2. Tajobs 17 comment

    Đã cài đặt thành công rồi mà khi kiểm tra trên trình duyệt thì một số thành phần vẫn đang dùng http1 nhỉ vd như ảnh, css, javascript.. 🙁

      1. Việt Phương Moderator

        Bạn kiểm tra cả trình duyệt khác nhé. Như mình note có thể do trình duyệt/anti virus của máy chặn protocol H2. Nên trên http2.pro check H2 vs ALPN là ok
        Mình nhìn thì phần lớn css js ảnh bạn qua HTTP/2 rồi, số ít qua HTTP/1.1

  3. tran hung 32 comment

    mình test ở trang http2.pro thì thông báo ok hết, nhưng chỗ PUSH (bên dưới ALPN) thì nó thông báo là NO
    We could not find any resources being pushed. If there are no resources that might benefit from HTTP/2 Push feature, ignore this.
    Có ai biết là lý do gì ko ạ?

  4. Trần Ngọc Châu 3 comment

    Mình cài SSL và HTTP2 mọi thứ đều ổn nhưng không thể truy cập site WordPress của mình được bạn check dùm mình conf với:

    server {
    listen 443 ssl http2;
    server_name taive.online;

    # SSL
    ssl_certificate /etc/letsencrypt/live/taive.online-0001/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/taive.online/privkey.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;

    # Improve HTTPS performance with session resumption
    ssl_session_cache shared:SSL:50m;
    ssl_session_timeout 1d;

    # DH parameters
    ssl_dhparam /etc/nginx/ssl/dhparam.pem;
    # Enable HSTS
    add_header Strict-Transport-Security “max-age=31536000” always;
    rewrite ^(.*) https://taive.online$1 permanent;
    }

    server {
    listen 80;

    # access_log off;
    access_log /home/taive.online/logs/access.log;
    # error_log off;
    error_log /home/taive.online/logs/error.log;

    root /home/taive.online/public_html;
    index index.php index.html index.htm;
    server_name taive.online;

    # Custom configuration
    include /home/taive.online/public_html/*.conf;

    location / {
    try_files $uri $uri/ /index.php?$args;
    }

    location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    include /etc/nginx/fastcgi_params;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index index.php;
    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
    fastcgi_buffer_size 32k;
    fastcgi_buffers 8 16k;
    fastcgi_busy_buffers_size 32k;
    fastcgi_temp_file_write_size 32k;
    fastcgi_intercept_errors on;
    fastcgi_param SCRIPT_FILENAME /home/taive.online/public_html$fastcgi_script_name;
    }

    location ~ /\. {
    deny all;
    }

    location = /favicon.ico {
    log_not_found off;
    access_log off;
    }

    location = /robots.txt {
    allow all;
    log_not_found off;
    access_log off;
    }

    location ~* \.(3gp|gif|jpg|jpeg|png|ico|wmv|avi|asf|asx|mpg|mpeg|mp4|pls|mp3|mid|wav|swf|flv|exe|zip|tar|rar|gz|tgz|bz2|uha|7z|doc|docx|xls|xlsx|pdf|iso|eot|svg|ttf|woff)$ {
    gzip_static off;
    add_header Pragma public;
    add_header Cache-Control “public, must-revalidate, proxy-revalidate”;
    access_log off;
    expires 30d;
    break;
    }

    location ~* \.(txt|js|css)$ {
    add_header Pragma public;
    add_header Cache-Control “public, must-revalidate, proxy-revalidate”;
    access_log off;
    expires 30d;
    break;
    }

    }

    1. Việt Phương Moderator

      Bạn cấu hình sai rồi. Bạn xem lại cấu hình mẫu trong bài viết rồi sửa nhé.
      Block 443 đầu tiên của bạn redirect về chính nó. Xong block 80 thì lại show nội dung web

Comment của bạn

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