Mix Netlify DNS and other subdomains

#configuration #dns #netlify #subdomain

Cover image: Wicklow Mountains, Co. Wicklow, Ireland

The last time I created a blog was few years ago, and WordPress was still the most popular choice to reduce the effort and have a decent piece of functionality.
Recently, after learning some React and following the community choices, I really liked Gatsby.

Creating a static blog can reduce the complexity of the architecture: no more database, no more host running PHP, simpler configurations for Nginx.

A plus is also the possibility to use services like Netlify to host your blog's build. The main points are: it's free, it builds automatically after a new commit is pushed to your preferred brach and it manages DNS for you.

Last part is a little bit tricky if you already own a domain and you already have other applications running on different subdomains.

Deploy to Netlify

With few easy steps, it is possibly to deploy your repository directly to Netlify. A blog post in their website explains really well how to do this.
In summary, you will:

add your respository from your Netlify dashboard by clicking on "New site from GIT" (and choose one of Github, GitLab or Bitbucket);
grant Netlify's app the required permissions;
proceed with default settings and deploy.

This will generate one subdomain for you, like my-netlify-generated-subdomain.netlify.com: if you navigate to this URL your blog will be there!

DNS Provider settings

Following Netlify's guide, I set the domain name (my-domain.io) as Primary Domain and WWW subdomain as domain alias.
This worked perfectly for both of them, but unfortunately I lost access to my other applications reachable by different subdomains (second-app.my-domain.io).

I then moved my main configuration to my DNS provider built in service (I am using Gandi as DNS provider and Linode as VM provider).

I wanted to have my domain (without subdomain), blog and www subdomains to point to Netlify, but all other subdomains to point to my Linode instance (with1.2.3.4 as IP address).

This is the result:

@ 10800 IN A 1.2.3.4
@ 10800 IN MX 10 spool.mail.gandi.net.
@ 10800 IN MX 50 fb.mail.gandi.net.
@ 10800 IN TXT "v=spf1 include:_mailcust.gandi.net ?all"
blog 1800 IN CNAME my-domain.io.
second-app 1800 IN CNAME my-domain.io.
www 10800 IN CNAME my-netlify-generated-subdomain.netlify.com.

The first entry says that my primary domain has to be routed to my Linode instance (the other starting with @ are just the default example of a Gandi configuration).
blog and second-app subdomains are routed to my-domain.io;
www subdomain is routed to my netlify subdomain.

Note: you will need DNS entries to propagate before testing, this might take few hours

Configure Nginx for redirect

The first line of the configuration alone will not allow us to have our main domain pointing to Netlify's instance: we need to tell it to route to our www subdomain destination.

This is the simple Nginx configuration use to redirect:

server {
    server_name my-domain.io;
    rewrite ^/(.*)$ http://www.my-domain.io/$1 permanent;
}

If you also want to have your blog subdomain to point to Netlify, add:

server {
    server_name blog.my-domain.io;
    return 301 https://www.my-domain.io$request_uri;
}

Additional rules will handle your second-app subdomain.
A standard configuration might be like this:

upstream second-app {
    server 127.0.0.1:8085;  # stram to a different port
}

server {
    server_name second-app.my-domain.io;
    listen 80;
    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:8085;
    }
}