How to setup Cloudflare CDN in a remix.run app/website with fly.io
Recently I tried setting up CDN on my remix.run website hosted on fly.io.
I couldn’t find a concise article on how to do this leading me to figure it out by trial and error, so here it is for your pleasure.
I would not go into deep on why you should use a CDN to cache your website, but in short it makes your website go brrrrr (really fast).
Things you will need*:
- Custom domain
- Remix app deployed to fly.io
- Cloudflare account
Start by signing up for a Cloudflare account and add your domain to it.
Make sure that your domain name-servers are pointing to Cloudflare or it wont work.
I had to update my name-servers on Namecheap where I brought the domain from:
Your website would not work just yet, you need to setup the custom domain from fly.io too, go to fly.io and setup redirect by following these steps: link to fly.io documentation
You will have to first generate the A and AAAA records and then add them to your dns list on Cloudflare:
At this point you should be able to view your remix app by going to your custom domain.
Next lets setup a page rule so Cloudflare caches all of our assets, go to page rules:
Add add a new rule with cache everything option selected (make note of the wildcard * selector to select all pages):
Now the CDN should be caching all of your pages, if you want to define custom behaviour of your pages make sure to return cache-control headers from your pages or the root page.
I have setup my headers to use state-while-revalidate which make the page load almost instantaneous.
You can refer to my setup here: portfolio github
Mainly the blog list page, blog post page and root page.
Hope this helps!
