Installing NGINX and HTTP/2 in your local development environment

This article has been written to accompany Best Practice for HTTP2 Front-end deployments — Part two. It'll make use of Homebrew on Mac OS X to install NGINX with HTTP/2 support. Fire up a terminal and lets get started.

Install Homebrew

If you don't already have Homebrew we should install it first. Copy and paste the command below:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install Nginx

First lets update the list of homebrew packages:

brew update

Now lets compile and install nginx with http2:

brew install --with-http2 nginx

Lets double check we have the right version of nginx, it's worth noting that HTTP/2 will only work with version 1.9.5 and above.

nginx -v

You should see nginx version: nginx/1.10.1 at the time of writing. Please make sure it's above 1.9.5.

Now lets check nginx is working. Make sure that port 8080 is available, we're using sudo so you may be prompted for your password:

sudo nginx

open http://localhost:8080/

You should now see the 'Welcome to nginx!' page. For the moment we can stop nginx using:

sudo nginx -s stop

Configure Nginx to use SSL and HTTP/2

Next we need to make some changes to nginx.conf. Use your favorite text editor to open nginx.conf, in the example below we're using texmate.

mate /usr/local/etc/nginx/nginx.conf

The changes we need to make are shown below in the server {} block.

server {
    listen 443 ssl http2;
    server_name localhost;

    ssl on;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_certificate nginx.crt;
    ssl_certificate_key nginx.key;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-HTTPS 'True';
    }
}

Generate an SSL certificate

HTTP/2 requires a secure connection over <abbr title="Transport Layer Security">TLS</abbr> (new name for SSL). Before we can use https, we first need to generate an SSL certificate:

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /usr/local/etc/nginx/nginx.key -out /usr/local/etc/nginx/nginx.crt

This is a self signed certificate so you'll see a browser security warning when using it. You can add a security exception for your local development domain.

Restart Nginx

sudo nginx

Now you can should be able to hit https://localhost/ and nginx should proxy pass to your local development server.

To check HTTP/2 is working open the web inspector in your browser and check the network page. In the protocol column you should now see h2 or http2 next to each request.