How to Get a Custom Domain For Your Free CloudFront CDN
If you've read my tutorial How to Use AWS CloudFront to Create Your Own Free CDN, then hopefully, you have a functioning CDN for your static assets!
In this tutorial, we're going to create a custom domain name for your CDN, using CloudFlare as our DNS provider. The reason I'm using CloudFlare is because in my next tutorial, I'll show you how to setup an automated image resizing API!
Step 1: Create a Subdomain in CloudFlare DNS
Log into your CloudFlare dashboard. If you do not yet have an account, you can create one for free. CloudFlare DNS and proxy service is 100% free forever and it's a great service.
This tutorial assumes you already have DNS setup. So, navigate to your website and click DNS on the left sidebar. Click Add Record and then select CNAME for type. Enter whatever you want for the Name. I chose "cdn". Now for Target, put in your CloudFront Distribution Domain. Then click Save.
Next, we need to create a Certification Authority Authorization record. If you're unfamiliar with this type of record, basically, it allows Amazon to issue certificates for your domain on yuor behalf. We need this record in order to get an SSL certificate for our CF dist.
Click Add Record again and this time select CAA for Type and enter your chosen Name again ("cdn" in my case). For Tag, select Only allow specific hostnames, and for CA domain name, enter "amazon.com."
Step 2: Edit Your CloudFront Distribution
Your CNAME won't work just yet because we need to set it up on AWS. We need to enter the CNAME in your CloudFront distribution settings. So, go ahead and log into your AWS dashboard and navigate to your CloudFront distribution and click Edit.
In settings, enter your subdomain in the Alternate domain name (CNAME) field. Then click Request Certificate. Public SSL certificates are totally free for all AWS services!
On the certificate request screen, enter your subdomain for Fully-qualified domain name and leave DNS Validation checked. Then click Request.
AWS should issue you a pending certificate. You'll need to validate your ownership of the subdomain by creating another CNAME record in CloudFlare DNS. You'll need to copy the CNAME Name and CNAME Value fields into a new CNAME record.
Once you've created the CNAME record in CloudFlare, come back to your AWS certificate and refresh the screen. It may take a few tries, but hopefully Status at the stop says Success!
Now go back to your CF dist settings screen and click the Refresh Circle buttton and your new certificate should be available in the dropdown. Scroll down to the bottom and click Save Changes.
That's it. Now try out your new subdomain in your browser by navigating to on of your files using your new CDN url!
If you're interested in creating an automated image resizing API using CloudFlare and a custom React component, then please read my article titled Automated Responsive Images Using React and Cloudflare Images.
Thanks for reading and happy coding! For more great information, please visit our Blog.
No Comments Yet