Handle website redirects with Cloudflare page rules

| Mar 31, 2020

In my last post, I mentioned that I’d hit a little snag when I was migrating my live site over to my new architecture.

When I built my test site it always used a subdomain (beta.cirriustech.co.uk) so I never had any issue with DNS.

However, when I migrated my live site over, I had built it with a subdomain for testing (prod.cirriustech.co.uk) whilst the live site on WebApp/Grav still used the naked domain (cirriustech.co.uk).

When I then went to make the Hugo site live and change the DNS, I ran into an issue because of an overlooked but important distinction - if you are using a consumption plan instead of a premium plan, then you cannot associate an A record with your app. The reasoning for this makes sense - it’s not a dedicated webapp instance running your function (my function proxy that I use for enforcing HTTP security headers) so its’ IP address can and will change from time to time.

I missed this because another site that I run for a local community group, which I migrated to this new setup first, was setup in the same region as the original site, and so the Arecord already existed in my DNS in Cloudflare for what was the same IP address (and quite possibly, the Azure dialog/logic for adding a custom domain had changed since I had defined that one!).

However, trying to add an A record to my new live site, in a different region than where I previously ran it (I moved from West Europe to UK West) - Azure was having none of it!

So, I had a little bit of a quandary - my site was widely known to be accessible only via the naked domain cirriustech.co.uk - google search console could be updated but other sites that had hotlinked to my site or articles would now have a broken link.

I could have resolved it by upgrading to a premium plan - but that would have gone against the reason for my change of architecture in the first place - cost optimisation.

In the end, the answer was staring me in the face, and another wonderful little trick up Cloudflare’s sleeve - Page Rules!

I already use them to enforce more aggressive caching of my content and on my free account I still had one of my three included page rules available.

Amongst the various types of page rules that you can create was the one I needed here - forwarding URL.

This allows you to define custom forwarding rules for all or part of your site.

My use case is pretty simple - anytime a request is made to either cirriustech.co.uk or a url that begins with that naked domain - redirect to the www.cirriustech.co.uk equivalent - maintaining the remainder of the URL as-is.

So, how do we do that? The rest of this post assumes that you have a Cloudflare account front-ending the site you want to do this with.

  • Login to cloudflare and select the site you want to operate on
  • Click on Page Rules
  • Click on Create Page Rule
  • Complete the dialog as below, replacing the domain to match yours, then click Save:
  • The key thing here is you are forwarding the naked domain and anything after it (/*) to https://www.cirriustech.co.uk/$1, where $1 equates to “the first item captured by the pattern” - in this case it’s a simple pattern with one wildcard after the domain.
  • When done it should look similar to the following in your cloudflare setup:

Simple, and effective and because cloudflare is the DNS provider here (it needs to be for this to work), it takes effect very quickly indeed!

As ever, thanks for reading and feel free to leave comments below.

If you like what I do and appreciate the time and effort and expense that goes into my content you can always Buy Me a Coffee at ko-fi.com

comments powered by Disqus