How to connect a subdomain on CloudFlare to AWS Amplify
Whether you’re new to AWS Amplify or Cloudflare, you likely ended up here because you’ve recognized the need for each service. Cloudflare offers easy to use tools for DNS management and website speed optimizations. AWS Amplify is relatively quick way to setup a modern web app but can sometimes have a steep learning curve and let’s face it, who wants to pay for support when we have stack overflow and medium?
This quick tutorial will show you how to point a cloudflare subdomain to an AWS Amplify project.
Generally speaking, it shouldn’t be a daunting a task to add a CNAME for subdomain but AWS documentation is sometimes hard to digest and not always up to date. I don’t mean this as a jab to AWS by any means. They offer so many services and are always changing, I think they do a great job overall and am not disappointed by this in the least. I cannot guarantee that this tutorial will not go out of date at some point in the next couple of years for the same reasons.
Step One: Add a domain
The first thing do once you are ready to setup a custom domain or subdomain is to head over to the Domain management tab within your Amplify project.
Then you’ll want to input the root domain for the subdomain you want to add. In this tutorial, I’ll be using awsamplifytestapp.co as the root domain. Then select “configure domain”
This will take you to a new page with a few settings that I’ll explain below:
Under the “Subdomains” section you will want to select “exclude root” if you are only trying to add subdomain. awsamplifyapptest.co could be a separate site hosted elsewhere so we don’t want to have cloudflare point the primary A Record to AWS.
The next section in Subdomains is where you can add a custom subdomain. By default it displays www but for the app you are building, we’ll want to change that to something like app, go, dashboard, ie…. whatever you want.
Go ahead and save this.
Step Two: SSL Configuration
Next you’ll see some information and snippets to copy over to Cloudflare that should look similar to this:
Now, I’ve been doing web development and launching sites for over 10 years now so this all seems pretty straightforward to me but this is also where I ran into the most issues on the Cloudflare side which we’ll clear up quickly here.
The first step here is adding the CNAME in the black text box in the above screenshot. So head over to Cloudflare and navigate to the DNS tab.
Then select the “Add Record” button above the current DNS records. Under the “Type” dropdown, select CNAME and then add in the name from AWS(the first domain listed in the black AWS text box) or _bd1fd16624e9b230b81421d015654893.awsmplifyapptest.co. based on the example in the screenshot. In the Target field, copy the last domain listed in the AWS text box or _4f170a0f20189abd17108d02d442cfd2.tjxrvlrcqj.acm-validations.aws. from the example listed above.
Finally, deselect the Proxied option so that it says “DNS only” and then select “Save”. The proxied option will try to utilize the cloudflare SSL and therefore goes into conflict with the SSL that AWS is trying to issue. This will cause an error on the Domain Management page on AWS and force you to reverify, which in my experience isn’t necessarily a bad thing but takes more time to do.
Once you have this initial CNAME setup, you’ll then add the actual subdomain CNAME following a similar process. Next to the Custom domain section in AWS, you’ll see an “Actions” dropdown. Click that and then select “View DNS records”.
It will then display the CNAME records you need to add to Cloudflare. Since we’ve already added the first one, you should be able to just add the CNAME under Step 3.
Again, when adding the CNAME in Cloudflare, you will need to ensure that the Proxy Status is set to DNS only.
Step 3: wait
So that’s it! Give it some time but depending on the TTL settings for the CNAME’s you added, your custom subdomain on AWS should be verified in under 15 minutes. It could take longer though. Many DNS providers will say anywhere from up to 24–48 hours though I’ve rarely had it ever take that long, especially when adding in a new record. If you find that it is taking longer than you think it should, wait another 15 minutes and then double check your CNAME’s.
Good luck and let me know if you run into any issues in the comments!
