Nginx HTTP2 Server Push

/               -->     index.html   ( <img src="/image.svg" />
/image.svg      -->     image.svg itself

// handleImage is the handler for serving `/image.svg`.
//
// It does nothing more than taking the byte array that
// defines our SVG image and sending it downstream.
func handleImage(w http.ResponseWriter, r *http.Request) {
	var err error

	w.Header().Set("Content-Type", "image/svg+xml")
	_, err = w.Write(assets.Image)
	must(err)
}

// main provides the main execution of our server.
//
// It makes sure that we're providing the required
// flags: cert and key.
//
// These two flags are extremely important because
// browsers will only communicate via HTTP2 if we
// serve the content via HTTPS, meaning that we must
// be able to properly terminate TLS connections, thus,
// need a private key and a certificate.
func main() {
	flag.Parse()

	if *key == "" {
		fmt.Println("flag: key must be specified")
		os.Exit(1)
	}

	if *cert == "" {
		fmt.Println("flag: cert must be specified")
		os.Exit(1)
	}

	http.HandleFunc("/", handleIndex)
	http.HandleFunc("/image.svg", handleImage)

	must(http.ListenAndServeTLS(":"+strconv.Itoa(*port), *cert, *key, nil))
}

// handleIndex is the handler for serving `/`.
//
// It first checks if it's possible to push contents via
// the connection. If so, then it pushes `/image.svg` such
// that at the same moment  that the browser is fetching
// `index.html` it can also start retrieving `image.svg`
// (even before it knows about the existence in the html).
func handleIndex(w http.ResponseWriter, r *http.Request) {
	var err error

	pusher, ok := w.(http.Pusher)
	if ok {
		must(pusher.Push("/image.svg", nil))
	}

	w.Header().Add("Content-Type", "text/html")
	_, err = w.Write(assets.Index)
	must(err)
}

SSLKEYLOGFILE=~/tlskey.log \
        /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome &

Vagrant.configure(2) do |config|
  config.vm.hostname = "artful"
  config.vm.box = "ubuntu/artful64"
  config.vm.box_check_update = false
  config.vm.network "forwarded_port", guest: 443, host: 443

  config.vm.provider "virtualbox" do |v|
    v.memory = 2048
    v.cpus = 3
  end

  config.vm.synced_folder ".", "/vagrant", disabled: true
end

# Clone the git mirror (the official version control
# system used by nginx is mercurial)
git clone https://github.com/nginx/nginx


# Get into the cloned repository
cd ./nginx


# Run auto configuration to check for dependencies and
# prepare installation files.
#
# Make sure you run this command from the `nginx` directory
# instead of `./auto`. 
./auto/configure


# Here it should probably tell you that you that it 
# didn't find some dependencies (like `pcre` and others).
#
# Let's install them
sudo apt install -y \
        libpcre3 libpcre3-dev \
        zlib1g-dev \
        libssl-dev


# Configure our build with some modules.
# - http_v2_module      provides support for HTTP/2
# - http_ssl_module     provides the necessary support
#                       for dealing with TLS
./auto/configure \
        --with-http_v2_module \
        --with-http_ssl_module


# After running the command we should have a Makefile
# in the `nginx` directory (current working directory)
ls | grep Makefile
Makefile

# Run the build process with a concurrency of 4
make -j4


# Check that `nginx` has been produced
./objs/nginx -v
nginx version: nginx/1.13.9

# Do not daemonize - this makes it easier to test
# new configurations as any stupid error would be
# more easily caught when developing.
daemon off;

events {
        worker_connections              1024;
}

http {

        # Explicitly telling what mime types we're
        # supporting just for the sake of explicitiness
        types {
                image/svg+xml           svg svgz;
                text/html               html;
        }

        server {
                # Listen on port 8443 with http2 support on.
                listen                  8443 http2;


                # Enable TLS such that we can have proper HTTP2
                # support using browsers
                ssl on;
                ssl_certificate         certs/cert_example.com.pem;
                ssl_certificate_key     certs/key_example.com.pem;


                # For the root location (`index.html`) we perform
                # a server push of `/image.svg` when serving the
                # content to the end user.
                location / {
                        root            www;
                        http2_push      "/image.svg";
                }


                # When pushing the asset (`image.svg`) there's no need
                # to push additional resurces.
                location /image.svg {
                        root            www;
                }
        }
}

// In the case of HTTP1.1 we make use of the `Link` header
// to indicate that the client (in our case, NGINX) should
// retrieve a certain URL.
//
// See more at https://www.w3.org/TR/preload/#server-push-http-2.
func handleIndex(w http.ResponseWriter, r *http.Request) {
	var err error

	if *http2 {
		pusher, ok := w.(http.Pusher)
		if ok {
			must(pusher.Push("/image.svg", nil))
		}
	} else {
                // This ends up taking the effect of a server push
                // when interacting directly with NGINX.
                //
                // Note that I'm returning `/proxy/image.svg` instead
                // of `/image.svg`. 
                //
                // This has the effect of NGINX taking this as a normal 
                // standard request and processing it through its location
                // pipeline (which ends up in the image Go handler we defined
                // here).
		w.Header().Add("Link", 
			"</proxy/image.svg>; rel=preload; as=image")
	}

	w.Header().Add("Content-Type", "text/html")
	_, err = w.Write(assets.Index)
	must(err)
}

http {
 
         # Explicitly telling what mime types we're
@@ -16,6 +18,11 @@ http {
                 text/html               html;
         }
 
+        # Add an upstream server to proxy requests to
+        upstream sample-http1 {
+                server localhost:8080;
+        }
+
         server {
                 # Listen on port 8443 with http2 support on.
                 listen                  8443 http2;
@@ -27,6 +34,10 @@ http {
                 ssl_certificate         certs/cert_example.com.pem;
                 ssl_certificate_key     certs/key_example.com.pem;
 
+                # Enable support for using `Link` headers to indicate
+                # origin server push
+                http2_push_preload on;
+
 
                 # For the root location (`index.html`) we perform
                 # a server push of `/image.svg` when serving the
@@ -42,6 +53,15 @@ http {
                 location /image.svg {
                         root            www;
                 }
+
+                # Act as a reverse proxy for requests going to /proxy/*.
+                # Because we don't want to rewrite our endpoints in the
+                # Go app, rewrite the path such that `/proxy/lol` ends up
+                # as `/lol`.
+                location /proxy/ {
+                        rewrite         /proxy/(.*) /$1 break;
+                        proxy_pass      http://sample-http1;
+                }
         }
 }

# Collect some packets within the host.
# -i: interface to snoop (loopback)
# -A: present body in ASCII format
# pos' args: only packets destined to 8080
sudo tcpdump \
        -i lo \
        -A \
        dst port 8080


# When requesting `/proxy/` nginx picks our
# proxy location and then recreates the request
# as an HTTP1.0 request to `sample-http1` upstream.
GET / HTTP/1.0
Host: sample-http1
Connection: close


# In consequence of the server-push the browser 
# performs the request (reusing the HTTP2 conenction)
# which ends up rewritten by NGINX as an HTTP1.0 request
# to our origin.
GET /image.svg HTTP/1.0
Host: sample-http1
Connection: close