Using Fly.io for Hosting and Cloudflare for DNS

The steps I took to get my site hosted on Fly.io to work with Cloudflare DNS

Jump to the short version.

After deploying on Fly.io, you can use https://<app-name>.fly.dev to access your application. This is great to be able to deploy and quickly have a url to share with others, but at some point, for SEO - production apps - or other reasons, you may want to put your site behind a custom domain.

These are the steps I took to get https://mkartchner-remix-blog.fly.dev behind the custom domain https://www.mkartchner.com while using Fly.io for hosting and Cloudflare for DNS.

1. Created custom certificates for the app on Fly.io

I wanted to use the root domain for mkartchner.com so I created two certs - one for mkartchner.com and one for www.mkartchner.com.

If you were creating an app that would be hosted at a single subdomain like blog.domain.com you would only need to create the single cert for that subdomain.

After logging in to Fly.io and heading to this url - https://fly.io/apps/<app-name>/certificates - I clicked on the "Add certificate" button and added the two domains as mentioned above.

Behind the scenes Fly.io started the process of creating the certificates using Let's Encrypt, but before it could be finalized I needed to verify I owned the domain.

Clicking on the "View" button next to one of the newly created certificates I could see three different sections in the dialog window.

Confirm domain ownership

This showed a CNAME record that needed to be added to my DNS in order to prove I was the owner of the domain before Let's Encrypt would issue the certs.

Direct visitors to application

This showed another CNAME record that needed to be added to my DNS which would take traffic at the hostname for the cert - either mkartchner.com or www.mkartchner.com depeding on the cert entry - and point it to mkartchner-remix-blog.fly.dev

Certificates

This showed the status for the RSA and ECDSA certificates that would be generated by Let's Encrypt. At this point, the status for these were showing as red.

I also used the flyctl cli tool to check the status of the certs throughout this process as well. IE flyctl certs show mkartchner.com

2. Adding the CNAME record to verify domain ownership on Cloudflare

After logging in to Cloudflare, I headed to the DNS settings page for mkartchner.com - https://dash.cloudflare.com/<id>/mkartchner.com/dns (clicked the mkartchner.com site on the dashboard Home page and then DNS in the left side bar).

Clicking on the "Add record" button, I added the CNAME record from Fly.io to confirm domain ownership.

When adding this CNAME record it was important to make sure to have the orange cloud disabled - meaning it should not be proxied and set to DNS only - otherwise Cloudflare masks the IP which causes issues.

I then added another CNAME record for mkartchner.com to target mkartchner-remix-blog.fly.dev - this time keeping the orange cloud enabled to proxy traffic through Cloudflare's system in order to get the benefits Cloudflare provides.

Because I was using the root domain for this, Cloudflare showed an info tooltip which indicated that CNAME flattening will be applied to this record which was fine for my case.

3. Checked the status on Fly.io

Once all the CNAME records were added to Cloudflare - four in my case since I did both mkartchner.com and www.mkartchner.com - I headed back to the Fly.io certificate dialog and clicked the "Check again" button. This didn't work for me the first time - I think because I originally had things proxied through the orange cloud for the domain ownership CNAME records - but after using the flyctl certs show mkartchner.com cli command to see more info, waiting for DNS records to propagate, and waiting for Let's Encrypt to issue the certs, I eventually could see the RSA and ECDSA certificates status show as green in the dialog window.

4. Added the mkartchner.com to www.mkartchner.com redirect in Cloudflare

At this point things seemed to be working. I could finally hit the site at mkartchner.com and see it pull up! The only problem was mkartcher.com was not redirecting to www.mkartchner.com like I wanted. One way I could have addressed this would have been to add a check in my application logic which would look at the request url and redirect it to the equivalent www url if needed. But I instead decided to use a Cloudflare Page Rule to keep the application logic clean.

I headed to https://dash.cloudflare.com/<id>/mkartchner.com/rules (clicked the mkartchner.com site on the dashboard Home page and then Rules in the left side bar) and then clicked "Create Page Rule" to add the following rule:

URL:
mkartchner.com/*

Then the settings are:
Forwarding URL - 301 Permanent Redirect

Destination URL:
https://www.mkartchner.com/$1

The video in this tutorial was very helpful in showing me how to add this page rule.

After the rule was added, mkartcher.com was redirecting to www.mkartchner.com just like I wanted.

Short Version

  1. Log into Fly.io, head to https://fly.io/apps/<app-name>/certificates, click the "Add certificate" button, and add the custom domain. If you are doing this for your root domain and want to redirect your-site.com to www.your-site.com, add certs for both your-site.com and www.your-site.com and follow the steps below for each.
  2. Click the "View" button next to the newly created certificate to see the three different sections in the dialog window - Confirm domain ownership, Direct visitors to application, and Certificates.
  3. Log into Cloudflare, head to https://dash.cloudflare.com/<id>/<your-site.com>/dns, click the "Add record" button, and then add the CNAME record from the Confirm domain ownership section of the Fly.io dialog - make sure to have the orange cloud disabled - set to DNS Only.
  4. Then click the "Add record" button again and add the CNAME record from the Direct visitors to application section of the Fly.io dialog - the orange cloud can be enabled if you would like to use the benefits that proxying traffic through Cloudflare's systems provides.
  5. Head back to Fly.io and click the "Check again" button in the dialog window. It may take a few minutes for DNS propagation, Let's Encrypt to issue certs, etc., so you might have to "Check again" a few times. You can also use the flyctl certs show you-site.com Fly cli command to get more info as well.
  6. If you did this for you root domain and would like to redirect traffic from your-site.com to www.your-site.com using Cloudflare Page Rules follow this video tutorial.