A domain name for your (React) App
In the first two episodes, we saw how to deploy a React App on S3 very easily : https://medium.com/ovrsea/deploy-automatically-a-react-app-on-amazon-s3-iam-within-minutes-da6cb0096d55.
Then, we saw how to optimize delivery thanks to CloudFront (part 1 : https://medium.com/ovrsea/deploy-automatically-a-react-app-on-amazon-s3-iam-within-minutes-da6cb0096d55, part 2 to come: caching strategy, etc.)
At this point, you can access your app with an ugly URL : https://d2wrzsgbgv95na.cloudfront.net/. Not really what you want to send to your friends and users…
In this post, we will see how to configure your domain name thanks to Route53.
1. Buy your domain name
The first step is to buy your domain name. Log in to your AWS account and go to the Route53 service
You should see something like this :
Click on ‘Domains’, on the left. Then ‘Register Domain’. Buying a .com domain costs around $12 a year. The problem is generally to find one…
Then, click on ‘Add to cart’. Then ‘Continue’. Fill in your information as requested and click on ‘Continue’. You can then complete your purchase.
At this point, you are the owner of a domain name. Cool, isn’t it ? Now, you have to wait for the registration to be effective… It can take up to a few days, but it’s generally much shorter.
2. Configure CloudFront
The second step is to configure the distribution we previously created. Go back to CloudFront and click on the distribution.
In the General Tab, we have to edit a few things:
Alternate Domain Names (CNAMES)
The domain name(s) you want. For example app.ovrsea.org and ovrsea.org
Custom SSL
If you want to support HTTPS (and you want to !), you have to create a certificate. Pick ‘Custom SSL Certificate’ and click on ‘Request or Import a Certificate with ACM’.
In your domain name, for simplicity reasons, I encourage you the add your root domain and a domain with a wild card as shown below:
Validate. Pick DNS Validation (automatic if you bought the domain from AWS). Validate, validate, validate… And wait !
You should see something like this :
The goal here is for Amazon to be sure that you really own the domain. And the method is to let you add a specific key to your DNS Records, that Amazon will regularly check. If you could add this to your domain, then it means you own it, and Amazon delivers the certificate.
Well, what’s cool is that you bought your domain from Amazon ! So open the domain, and click on ‘Create record in Route 53’
We now have to wait (again…) the validation. It should not be long.
Then, you can close this tab and come back on the CloudFront configuration, General Tab. Normally, Custom SSL Certificate should be selected. In the input below, pick you certificate you juste created. Click on ‘Yes, Edit’ to save the new configuration.
3. Configure Route 53
Almost done ! Last step: configure our domain and subdomains to point to our CloudFront distribution.
If you come back to Route53, you should see 1 hosted zone now. Click on Hosted Zones. Click on the one you just created :
You are now in the Zone Configuration Screen. It should look like this (plus the validation records…):
We will now create the good records : click on ‘Create Record Set’.
Enter the subdomain you want (leave empty for the root domain). For example, for app:
Tick Yes for Alias, and pick you CloudFront distribution below. Save. Repeat for your different names. And guess what ? We have to wait again…
DNS propagation can take up to 24 hours. However, it’s generally shorter for closer zones (1 minute while I was writing this phrase, wow !).
4. Enjoy !
Our app is now accessible at app.ovrsea.org and ovrsea.org. Cool :) !
