Installing NGINX and HTTP/2 in Your Local Development Environment

this article has been written in accompany with another article, best practice for http2 front-end deployments — part two . it will make use of homebrew on mac os x in order to install nginx with http/2 support. so, fire up a terminal and let's get started.

1. install homebrew

if you don't already have homebrew , then you should install it first. copy and paste the command below:

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

2. install nginx

first, let's update the list of homebrew packages:

brew update

now, let's compile and install nginx with http2:

brew install --with-http2 nginx

next, let's double check we have the right version of nginx. also, 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, let's check that 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 by using:

sudo nginx -s stop

3. 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 that 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';
    }
}

4. generate an ssl certificate

http/2 requires a secure connection over tls (the 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, meaning that you'll see a browser security warning when using it. you can add a security exception for your local development domain.

5. restart nginx

sudo nginx

now you can (or should be able to) hit https://localhost/ , and nginx should proxy pass to your local development server.

to check that http/2 is working, you can 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.