What Problem to Solve?
-
Our react pages are served by
S3
andCloudfront
. For a complete guide how to deploy it from scratch the reader can see my blog post. -
If our domain is bought inside of aws
Route53
, there is a natural linkage from the GUI ofRoute53
in aws console to route all traffic from our sub-domain to our aws resource (cloudfront). -
Unfortunately if our domain is bought from other services such as go-daddy or wix.com, we will need the steps in the next section.
External Sub-domain to Cloudfront Distribution
Assume that we have deployed a webpage using cloudfront, the main target is to set the alternative domain name:
Let's achieve this target in the following steps:
Update cloudfront distribution
-
When updating the distribution setting there are two (and only two) inputs that are not available for the moment:
They are respectively:
-
The desired alternative domain name;
-
A certificate authroized to the 3rd party DNS provider
For the moment please leave both the Alternative Domain Name and the Custom SSL Certifiacte blank. In step 3 below we will be
-
Verifying we own the domain (and thereby turning the certificate into valid state)
-
Then we can add CName record which route traffic from Alternative Domain Name to our cloudfront distribution
After that we can fill in the blank options.
-
Request certificate, what is CNAME, CNAME Name and CNAME Value by the way?
-
Click request certificate, a certificate in pending validation state will be created for us with the following attributes:
Here:
- CNAME (Canonical Name) is a type of DNS record that allows us to create an alias from one domain name to another domain name.
- CNAME Name is the domain name we need to create in our DNS records.
- CNAME Value is the value that the CNAME record should point to.
Add CName records into 3rd Party DNS record mangement console
- In our 3rd party DNS record management console:
-
Firstly, add a cname record that is required to prove to AWS that we have the control over the domain (in order for our requested certificate to change from
pending state
tovalid state
).Be careful that strings provided from aws has an extra period
.
at the end, which we will need to remove when copying into 3rd party service provider records. -
Secondly we need to add a cname record to redirect a subdomain to our cloudfront distribution
-
Adjust alternative domain name after cert-validation is completed
-
Just wait our certificate to be validated, then we can return to step 1 and update the alternative domain name successfully:
Verify DNS records are propagated (may take 10-15 minutes)
-
It takes 10 - 15 minutes to propagate the DNS records. To validate our routing is updated successfully, we can:
dig @8.8.8.8 web.******.construction (google DNS records) # or dig @1.1.1.1 web.******.construction (cloudflare DNS records)
Let's take
8.8.8.8
as an example, a successful redirection should see:;; ANSWER SECTION: web.******.construction. 3600 IN CNAME d12**********.cloudfront.net. d12**********.cloudfront.net. 60 IN A 13.35.186.104 d12**********.cloudfront.net. 60 IN A 13.35.186.62 d12**********.cloudfront.net. 60 IN A 13.35.186.15 d12**********.cloudfront.net. 60 IN A 13.35.186.28
If the
ANSWER SECTION
is correct (at this stage our DNS may still not be correctly resolved yet), then we are all done, just wait.