How to Setup NGINX for HTTP/2

NGINX + HTTP/2

NGINX is an open source web server which can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache. It is a lightweight resource and has the ability to scale easily on minimal hardware. Nginx excels at serving static content quickly and is designed to pass dynamic requests off to other software that is better suited for those purposes.

HTTP/2 is a major revision of the HTTP network protocol and has become immensely popular because of its benefits. In simple terms, HTTP/2 makes applications faster and more robust. It reduces latency by enabling request and response multiplexing, effective compression of HTTP headers and provides server push support.

How to configure NGINX

Pre-requisites:

1. NGINX version 1.9.5 or above. (Download Link: WINDOWS, Linux)

2. Make sure site/application uses SSL/TLS encryption. Currently, browsers only support HTTP/2 on websites delivering content over HTTPS.

Checking NGINX version

nginx -V

The above command will display the version along with all the config arguments. Verify that you can find — with-http_v2_module. Now let’s continue..

1. Open your nginx.conf file and move to the HTTPS server block.

2. Make the following modification in the listen block to include http2.

listen 3000 ssl http2;

(Note: 3000 is an example port, you may choose any other port)

3. Provide path for relevant ssl certificates. (Ideally, store it in the conf folder)

server {
listen 3000 ssl http2;
ssl_certificate server.crt;
ssl_certificate_key server.key;
}

4. Once complete, save and reload Nginx process.

nginx -s reload

Your NGINX server should now be configured to deliver content over HTTP/2

Sample NGINX.conf with a Web Application which serves static content over HTTP/2

worker_processes  1;
events {
  worker_connections  1024;
}
http {
  include  mime.types;
  default_type  application/octet-stream;
  sendfile        on
  keepalive_timeout  65;
  # HTTPS server
  server {
    gzip on;
    listen       3000 ssl http2;
    server_name  localhost;
    add_header X-Frame-Options SAMEORIGIN always;
    ssl_certificate server.pem;
    ssl_certificate_key server-key.pem;
    ssl_protocols TLSv1.2;
    location / {
      root   html;
      index  index.html index.htm;
    }
    location = /favicon.ico {
      alias /html/favicon.ico;
    }
    location /webapp/ {
      proxy_pass http://localhost:3001/;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
      rewrite ^/webapp/(.*)$ / break;
    }
    location /static/ {
      proxy_pass http://localhost:3001/;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
      rewrite ^/static/(.*)$ /static/$1 break;
    }
    #error_page  404              /404.html;
    # redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   html;
    }
  }
}