Serving Requests on IPv6 with Nginx

Serving Requests on IPv6 with Nginx

After a little back and forth, we realized that our web server lacked IPv6 support. We weren't listening to the requests made on IPv6

A few weeks ago one of our readers reached out on our support channel to tell us that our site wouldn't work for them no matter what.

It simply wouldn't load on their browser (Chrome).

After a little back and forth, we realized that our web server lacked IPv6 support. We weren't listening to the requests made on IPv6. If you don't know already IPv6 stands for Internet Protocol version 6, and it is intended to replace IPv4 network which is what our original web, as-is, has had a run on for the last two decades.

Google is out with stats on IPv6 adoption lately (as of October 2018) and the numbers are rising steadily. Over twenty five percent of the Internet is now using IPv6  and from the graph it appears that well over half would be onboard in the coming few years. More importantly, a % of those who are on IPv6 already are exclusively so and cannot see your content if the website isn't configured to serve on the new protocol. (Updated per tweet.)

Through this quick post we will configure our web app/site for the new protocol.

This is how I set it up on Bubblin.

The Quad-A Record.

The first step is to add an AAAA Record on your DNS Manager. We needed a public IP on IPv6 so I made a request to our hosting provider (Linode) to provide me with one.

Once they responded, I went ahead and added our public IPv6 on the Remote Access Panel, like so:

I added the ugly looking records with IPv6 option (bottom three) as screenshot-ted above. Since changes to DNS take some time to percolate we'll leave the DNS manager here and focus on configuring our app-server nginx for IPv6 next.

Nginx on IPv6

Now Bubblin is delivered on a strict https protocol so we are effectively a permanent on redirecting all our traffic (from http →) to https.

We use the Letsencrypt and Certbot to secure Bubblin with industry-grade SSL.

Shown below is an excerpt from our nginx.conf.erb on production:


…

#  $ sudo vi ~/.etc/nginx/sites-available/bubblin_production
#  add listen [::]:80 ipv6only=on; for requests via insecure protocol (http).

server {
    listen 80;
    listen [::]:80 ipv6only=on; 
    server_name <%= fetch(:nginx_server_name) %> www.<%= fetch(:nginx_server_name) %>;
    rewrite ^(.*) https://$host$1$request_uri permanent;
}

#  add listen [::]:443 to listen for requests over IPv6 on https.
server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;  
  server_name www.<%= fetch(:nginx_server_name) %>;

  # Other SSL related stuff here.

  rewrite ^ https://$host$1$request_uri permanent; 

}

# add listen [::]:443 ssl http2; on the final server block.

server {

  // Plenty of nginx config here.

  listen 443 ssl http2; # managed by Certbot
  listen [::]:443 ssl http2;

  # Add HSTS header with preloads
  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";

}

Notice the listen [::]:80 ipv6only=on; directive inside the server block and the HSTS directive at the bottom.

To test your nginx configuration:

$ sudo nginx -t

// success

$ sudo nginx -s reload

Hoping that your DNS percolated by the time the nginx was cofigured (sometimes it may take up to 24 hours), now it is time to test if the website is available on IPv6:

$ curl https://bubblin.io -6

The HTML page from your site should be served correctly.

That's all folks.


Hi, I'm Marvin Danig, CEO and Cofounder of Bubblin.

You might want to follow and connect with me on Twitter or  Github?

P.S.: Reading more books on web will help your attention span.

30s ad

AJAX using Javascript and JQuery + 2 Projects

Modern JavaScript: Building Real-World, Real-Time Apps

Essentials in JavaScript ES6 - A Fun and Clear Introduction

JavaScript the Basics - JavaScript for Beginners

Beginning ES6, The Next Generation of JavaScript

Web Development Services

Web Development Services

As one of the best Web Application Development Company, it provides a fine quality mobile app development service at an affordable price. Especially, it encourage start-ups that have unique ideas, by offering a more competitive price

HireFullStackDeveloperIndia is rated as one of the top Web Application Development Company in India by various industry magazines and review sites. They have a right blend of award-winning designers, expert programmers and Google certified digital marketers which make them a unique one-stop solution for hundreds of our clients, spread across all countries.

A Good website reflects not only your business but also it is one of the main factors why a potential customer would convert into Client. A good website design helps increase traffic driving leads to grow business. The best web design company create a custom design for each corporate website so as to help them meet their business goals.

Get Quote: https://hirefullstackdeveloperindia.com/get-a-quote/

Service Workers - The State of the Web

In this month’s episode Rick Viscomi and Jeff Posnick (Google Chrome Developer Relations) discuss the state of service workers. Service workers are a new kind of worker that gives progressive web apps more control over how resources are loaded over the network and cached. Jeff discusses some of the reasons why it might be a good idea for a website to include a service worker, some common mistakes developers make when implementing them, and how the Workbox tool can help.

In this month’s episode Rick Viscomi and Jeff Posnick (Google Chrome Developer Relations) discuss the state of service workers. Service workers are a new kind of worker that gives progressive web apps more control over how resources are loaded over the network and cached. Jeff discusses some of the reasons why it might be a good idea for a website to include a service worker, some common mistakes developers make when implementing them, and how the Workbox tool can help.

Thanks for reading ❤

If you liked this post, share it with all of your programming buddies!

Follow me on Facebook | Twitter

Learn More

Building a Desktop App with Vue: NW.js

Build Progressive Web Apps with React

An Introduction to Web Components

An Introduction to Web Workers

Introduction to Service Worker - Progressive Web App Training

How to build a Progressive Web Apps

What is REST API? | Restful Web Service

What is REST API? | Restful Web Service

In this post "Restful Web Service", you'll learn: What is Web services, what is API, What is REST API, How REST works and Implementation of REST API

What is REST API? | Restful Web Service

A REST API defines a set of functions to process requests and responses via HTTP protocol.

REST is used in mobile application as well as in web applications.