On demand recording: https://www.nginx.com/resources/webinars/nginx-http2-server-push-grpc/
We discuss new NGINX support for HTTP/2 server push and proxying gRPC traffic.
Check out this webinar to learn:
- About NGINX HTTP/2 support
- How to use HTTP/2 server push with NGINX
- How to proxy gRPC traffic using NGINX
- How to configure both features, with live demonstrations
3. Agenda
• Introducing NGINX
• NGINX HTTP/2 support
• HTTP/2 Server Push overview
• NGINX gRPC reverse proxy overview
• Demo
• Summary and Q&A
4. Where NGINX fits
Internet
Web Server
Serve content from disk
Application Gateway
FastCGI, uWSGI, Passenger…
Reverse Proxy
Caching, load balancing…
HTTP traffic
6. About NGINX, Inc.
• Founded in 2011, NGINX Plus first released in
2013
• VC-backed by enterprise software industry
leaders
• Offices in SF, London, Cork, Singapore,
Sydney, and Moscow
• 1,500+ commercial customers
• 200+ employees
7. “I wanted people to use it,
so I made it open source.”
- Igor Sysoev, NGINX creator and
founder
9. HTTP/2 Overview
Main benefits of HTTP/2:
• True connection multiplexing – No need for multiple connections, no head of line blocking
• Binary header – Less overhead, plug-ins available for WireShark
• Mandatory SSL – Browser-enforced, more secure
10. How NGINX Supports HTTP/2
• Backwards compatibility – Using ALPN, can support HTTP/2 alongside HTTP/1 (requires OpenSSL1.0.2 or later)
• HTTP/2 Gateway – Translates HTTP/2 into a protocol existing app servers can understand
11. NGINX HTTP/2 Support
• Initial release: September 2015
• NGINX 1.9.5 and later
• NGINX Plus R7 and later
• Used by 78% of all HTTP/2 enabled websites
12. NGINX HTTP/2 Support
• Add http2 argument to listen directive
• For clear text HTTP/2, remove SSL configuration
server {
listen 80;
server_name www.example.com;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl http2;
ssl_certificate server.crt;
ssl_certificate_key server.key;
}
14. HTTP/2 Server Push Overview
• User requests /demo.html
• Server responds with /demo.html
• Server pre-emptively sends style.css and image.jpg
• Stored in separate browser push cache until needed
• Support added in NGINX 1.13.9
15. HTTP/2 Server Push Testing
• HTTP sequential GETs – No optimizations
• HTTP with preload hints – Includes Preload hints in the first response
• HTTP/2 with server push – Preemptively push dependencies
16. HTTP/2 Server Push Testing
• HTTP/2 and HTTPS introduce one additional RTT for SSL handshake
• HTTP/2 Server push eliminates stylesheet RTT
• Reduces 2 RTT overall compared to unoptimized HTTP/2
17. HTTP/2 Server Push Config (Method 1)
server {
listen 443 ssl http2;
ssl_certificate server.crt;
ssl_certificate_key server.key;
root /var/www/html;
# whenever a client requests demo.html
# push /style.css, /image1.jpg, and
# /image2.jpg
location = /demo.html {
http2_push /style.css;
http2_push /image1.jpg;
http2_push /image2.jpg;
}
}
• http2_push – Defines resources to be pushed
to clients. When NGINX receives a request for
/demo.html, it will request and push
image1.jpg, and image2.jpg.
18. HTTP/2 Server Push Config (Method 2)
server {
listen 443 ssl http2;
ssl_certificate server.crt;
ssl_certificate_key server.key;
root /var/www/html;
# whenever a client requests demo.html
# push /style.css, /image1.jpg, and
# /image2.jpg
location = /demo.html {
http2_push_preload on;
}
}
• http2_push_preload – Instructs NGINX to parse HTTP
Link: headers and push specified resources.
• Link: </style.css>; as=style;
rel=preload, </favicon.ico>; as=image;
rel=preload
• Useful if you want application server to control what gets pushed.
19. HTTP/2 Server Push Config (Advanced)
server {
location = /demo.html {
add_header Set-Cookie "session=1";
add_header Link $resources;
http2_push_preload on;
}
}
map $http_cookie $resources {
"~*session=1" "";
default "</style.css>; as=style;
rel=preload, </image1.jpg>;
as=image; rel=preload,
</image2.jpg>; as=style;
rel=preload";
}
• map directive sets up following logic:
• If no session cookie push resources
• If session cookie don’t push resources
• NGINX inserts session cookie on first request
• Resources will only be pushed once per browser session
20. HTTP/2 Server Push Verification
• Chrome Developer Tools: The Initiator column on the Network tab indicates several resources were pushed to the client as part of a
request for /demo.html.
22. gRPC Overview
• gRPC is transported over HTTP/2. Does not work with HTTP/1.
• Can be cleartext or SSL-encrypted
• A gRPC call is implemented as an HTTP POST request
• Uses compact “protocol buffers” to exchange data between client and server
• Protocol buffers are implemented in C++ as a class
• Support added in NGINX 1.13.10
23. gRPC Proxying
server {
listen 80 http2;
location / {
grpc_pass grpc://localhost:50051;
}
}
• grpc_pass – Use like fastcgi_pass,
proxy_pass, etc.
• grpc:// – Use instead of http://.
24. gRPC Proxying with SSL Termination
server {
listen 443 ssl http2;
ssl_certificate server.crt;
ssl_certificate_key server.key;
location / {
grpc_pass grpc://localhost:50051;
}
}
• Configure SSL and HTTP/2 as usual
• Go sample application needs to modified to point to NGINX IP
Address and port.
25. gRPC Proxying with SSL Termination
creds := credentials.NewTLS( &tls.Config{ InsecureSkipVerify: true } )
// remember to update address to use the new NGINX listen port
conn, err := grpc.Dial( address, grpc.WithTransportCredentials( creds ) )
Modify client application, using sample Go application:
• Add crypto/tls and google.golang.org/grpc/credentials to your import list
• Modify the grpc.Dial() call to the following:.
26. gRPC Proxying with SSL End-to-End
server {
listen 443 ssl http2;
ssl_certificate server.crt;
ssl_certificate_key server.key;
location / {
grpc_pass grpcs://localhost:50051;
}
}
• Use grpcs instead of grpc
• Modify server to listen on SSL
cer, err := tls.LoadX509KeyPair( "cert.pem", "key.pem" )
config := &tls.Config{ Certificates: []tls.Certificate{cer} }
lis, err := tls.Listen( "tcp", port, config )
NGINX configuration:
Server configuration for sample Go application:
27. gRPC Routing
location /helloworld.ServiceA {
grpc_pass grpc://192.168.20.11:50051;
}
location /helloworld.ServiceB {
grpc_pass grpc://192.168.20.12:50052;
}
• Usually structured as application_name.method
28. gRPC Load Balancing
upstream grpcservers {
server 192.168.20.21:50051;
server 192.168.20.22:50052;
}
server {
listen 443 ssl http2;
ssl_certificate ssl/certificate.pem;
ssl_certificate_key ssl/key.pem;
location /helloworld.Greeter {
grpc_pass grpc://grpcservers;
error_page 502 = /error502grpc;
}
location = /error502grpc {
internal;
default_type application/grpc;
add_header grpc-status 14;
add_header grpc-message "unavailable";
return 204;
}
}
• gRPC server work with standard upstream blocks.
• Can use grpcs for encrypted gRPC
• If no servers are available, the /error502grpc location
returns a gRPC-compliant error message.
31. NGINX Conf 2018
The official event for all things NGINX
October 8-11, 2018 | Atlanta, GA
Learn how to use NGINX to modernize existing applications and build new
microservice applications. There will be two session tracks:
• NGINX Builders: Hands-on insights for developers, IT ops, and DevOps
• NGINX Designers: Strategy and trends for architects and IT leaders
Early bird registration now open: nginx.com/nginxconf
How are you planning to use Server Push and gRPC?
Let us know: nginx-inquiries@nginx.com
32. Summary
• NGINX 1.13.9 and later support HTTP/2 server push
• Use h2_push to have NGINX push resources
• Use h2_push_preload on; to have NGINX use the Link: header
• NGINX 1.13.10 and later support gRPC proxying
• Use grpc_pass like proxy_pass, fastcgi_pass, etc. to proxy gRPC
connections
• Use grpc:// and grpcs:// like http:// and https:// to tell NGINX
what server(s) to proxy to
• Use location blocks to route gRPC requests
• Use upstream blocks to define groups of gRPC servers to load balance
33. Q & ATry NGINX Plus free for 30 days: nginx.com/free-trial-request
Editor's Notes
- We will
NGINX Plus gives you all the tools you need to deliver your application reliably.
Web Server
NGINX is a fully featured web server that can directly serve static content. NGINX Plus can scale to handle hundreds of thousands of clients simultaneously, and serve hundreds of thousands of content resources per second.
Application Gateway
NGINX handles all HTTP traffic, and forwards requests in a smooth, controlled manner to PHP, Ruby, Java, and other application types, using FastCGI, uWSGI, and Linux sockets.
Reverse Proxy
NGINX is a reverse proxy that you can put in front of your applications. NGINX can cache both static and dynamic content to improve overall performance, as well as load balance traffic enabling you to scale-out.
Source: https://news.netcraft.com/archives/category/web-server-survey/
From there NGINX grew rapidly and now is used by over 447 million websites world wide, including Uber, Netflix, Airbnb, Twitch, Stripe and other innovative companies.
NOTE: In “Misc. Extras” section, there is a slide of relevant OSS users.
