Publishing a React website on AWS with AWS amplify and AWS CloudFront with Custom Domain (Part 2)
This post is a part of the series which will help you publish your React based project/website on AWS using AWS Amplify and AWS CloudFront. This part will walk you through the steps to setup AWS CloudFront so that you can access your website using any domain of your own.
If you want to learn about how to upload your React project on AWS using AWS Amplify or if you just want to follow along with this whole series, check out Part 1. This post will continue from where we left off in the first part. So it’s recommended that you go through that one first.
Part 1 covers the React project creation and AWS Amplify part.
Part 2 covers the CloudFront configuration and custom domain setup part.
Before You Begin (part 2)👀…
As this post uses AWS, we will assume that you already have an AWS account or have access to an account, as you will need to use your credentials for AWS Amplify and will need to go to AWS console and configure AWS CloudFront. If you still think this post can help you, then let’s get into it.
Create an AWS CloudFront Distribution
Well, to begin with, what we need to do first?🤔 Of course create a new CloudFront distribution, what else, right? 😎 So let’s head to the AWS CloudFront console home page and select the Create Distribution button.
After that, it will take you to the delivery method selection page, where, as of the time of this post writing, you will be given two(2) options to choose from, one is Web, the other one is RTMP (which will be discontinued from December 31, 2020). We will be selecting the Web one.
Now we will actually get the main form to create a new CloudFront Distribution.
If you click on the Origin Domain Name input box, AWS will suggest the S3 buckets you have along with some other options. We need to select the one we created in Part 1, which was reactawsamplify-20201222013512-hostingbucket-dev. But there is a catch, we can’t just select the bucket from the drop-down as it will only point the distribution to the bucket, which we don’t want. We want the distribution to point at the hosting site. So instead of just writing the name of the bucket, we will write the entire hosting URL.
By this time, you might be wondering how the hell you will get the URL?🤔 Do you have to publish the project with AWS Amplify again just to get the URL?😨 Well, don’t worry about that, you don’t have to go to such length.😌 There is an easy and convenient way to get that. Just go into the S3 bucket, and select the Properties tab on the top.
On that page, went to the bottom of the page and you will find a card named Static website hosting and there you will find the desired URL.
Copy that URL and paste it on the CloudFront Distribution page’s Origin Domain Name input field and click anywhere outside. It will load the necessary information into the other input fields.
Now let’s set up the other fields that we need. We will keep the default value for the following fields: Enable Origin Shield, Origin Connection Attempts, Origin Connection Timeout, Smooth Streaming, Restrict Viewer Access(Use Signed URLs or Signed Cookies), Compress Objects Automatically, Supported HTTP Versions, Enable IPv6.
So let’s start customizing the Default Cache Behavior Settings.
- 1st of all, we will change the Viewer Protocol Policy settings. You can keep it as it is, but it’s recommended to change it to Redirect HTTP to HTTPS.
- 2nd, as our current website doesn’t have any PUT, POST, or DELETE operations, we will not change Allowed HTTP Methods. But if you have a form or you communicate with an API, then you need to select the GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE option.
- 3rd, for the Cache and origin request settings, we’ll change it to Use legacy cache settings as we don’t want to keep any cache. If you want to keep it, don’t change the settings.
- If in the 3rd one, you selected the Use legacy cache settings, then you will get an Object Caching option. Which we will change to Customize and then set the Minimum TTL, Maximum TTL, Default TTL to 0 (zero). This will help the users to get up-to-date content each time they reload the page.
This is the end result so far that we have implemented in the distribution page:
Now it’s time for the Distribution Settings part. In this part, we will actually keep most of the things as it is, but this is the place where we will set up the custom domain. You can do that later so we will go through the process for now and keep all the default values. Just click Create Distribution at the bottom and you are done!!
You will be taken to the CloudFront home page and you will find the distribution you just created.
It takes some time for the distribution to be deployed for the first time. When it’s done, you will the Status as Deployed. When that is ready, you can copy the Domain Name and paste it in the browser and you will see it’s showing the website you hosted on the S3 bucket! So now you don’t have to remember the long S3 bucket hosting URL just to visit the website.
Setting up Custom Domain
For setting the custom domain, we need two things.
- A registered domain and access to that domain’s DNS setting or access to the mails for that domain.
- A custom SSL certificate generated from AWS
We’ll assume you already have a domain registered somewhere. And you have access to your DNS settings. But if you don’t have access to DNS, then it’s alright too, as we will show you how to get registered using email as well.
To get the SSL Certificate, if you already don’t have one, you can just click the Request or Import a Certificate with ACM from the distribution page.
Or you can also directly to the Request Certificate page.
Enter your custom domain name and press Next.
Then you will be taken to the Select validation method page, where you will get two types of validation method:
- DNS validation: It's the most used one. It requires the user to go to the domain DNS settings page, then adding a new CNAME record.
- Email validation: It uses some pre-configured email address to send you a validation email where you will be asked to verify that you requested the SSL certificate. If you accept that, then it will create an ACM SSL certificate in AWS. The email addresses are:
* postmaster@yourdomain.com
* hostmaster@yourdomain.com
* admin@yourdomain.com
* webmaster@yourdomain.com
* administrator@yourdomain.com
We will just briefly walk you through both of the ways just in a bit. But for now, let’s continue by selecting the Email validation option as it is the easy one.
In the next step, just press Review and you will be given a final checkup.
Now hit Confirm and it’s ready to go. AWS will send you an email for the confirmation on the pre-configured email addresses as mentioned before.
Until you verify your email or set up the DNS, you will see the verification status as Pending validation.
This is how a verification email looks like:
Just press the Amazon Certificate Approvals link or copy and paste the URL on any browser and it will show you the message again. Hit the I Approve button and you are all set!
You can find that on the SSL certificate page as well if you refresh it.
For some domain/hosting platform, the Email Validation doesn’t work. If you find that the domain is not working, try using the DNS Validation instead of Email Validation. The DNS CNAME record-setting differs for different vendors. So we can’t cover that here.
DNS validation Process
In case you selected DNS instead of Email, you will have to follow a different route. In that case, after you Confirm the process, you will get this:
You will find the credentials you need to set in the domain DNS system as a CNAME record. You can also download that credentials CSV file if you want to do it later or send it to someone who has access to the DNS settings. After the CNAME record is created, it will show the status as issued in the SSL certificate list.
When setting up the CNAME, you actually will need to set up 2 CNAME records.
- For verifying the custom SSL certificate. In this case, the name and value you will get from the AWS, the image we’ve shown just before.
- For redirecting to the CloudFront when we enter the domain on a browser. The name for this one will be the custom domain name you want to set up for the website (in our case reactaws.apphousebd.com) and the value will be the CloudFront distribution domain name. Keep in mind the custom domain name you set up for as the name, because it will be needed later when setting up the Alternate Domain Names (CNAMEs) field.
It may take some time to verify the domain with DNS validation, so wait at least 5–10 mins before trying again.
Setting the Custom domain in CloudFront
Now for the moment that we are building up the whole thing!
Go to the CloudFront distribution page and select Edit.
- There in the Alternate Domain Names (CNAMEs) field, enter the custom domain name of which you have already created an SSL certificate.
- After that, select the Custom SSL Certificate (example.com) option for SSL Certificate. There if you click on the input box, you will find the SSL certificate you created. Select the one with the domain you entered in the previous step.
- Enter index.html in the Default Root Object input field
- Keep the other thins as it is.
Hit Yes, Edit and that’s it. Finally, everything is over!!! Just wait until the status of the CloudFront distribution is changed from In Progress to Deployed and then you can test the website with the custom domain you just set. For us, it’s reactaws.apphouse.com.
Well, it’s been a long way since the start.🛣️️ But I believe you now have enough knowledge about how to deploy your own or any other person’s React website on AWS. Hope this post helps you in your exciting coding/developer life.😌 Happy coding!👨💻
