Introduction
Lately, the usage of Cloud Computing has been rising a lot, so these skills are essential and required by companies. In this article, I will show you how to configure and deploy your application to AWS which is the most used Cloud Provider. We will be using S3 (Simple Storage Service), CloudFront, Route 53 and a React.js application.
Creating your AWS account or accessing your existing one
The first thing we need to do is to create a new AWS account if you don't have one, because we will need to use the AWS Management Console to host and deploy our app. And it is necessary to add a valid credit card. AWS offers many free tiers but the cost will be very low if there are any costs.
Using a valid Domain- DNS
A domain will be necessary for us to have a well-structured website and avoid having as the URL an AWS hash or a strange set of characters as the address of our application.
Storing Static Files in S3
The second thing we need to do is to generate the build of the application that we want to deploy and by doing that we will have the static files to be added to the bucket in Simple Storage Service - S3. When a build is generated HTML, CSS, Javascript files, images and others are examples of static files that we will be storing in the S3.
Beware if you have a Next.js application and you are using Static Site Generation, in case you have Server-Side Rendering you will not have these static files generated in the build.
We are storing these static files to avoid the need of having a server serving static files, and users making requests to get those static files, if we were to follow this approach we would have to configure a load balancer, horizontal and vertical scaling, auto-scale and other things only to handle the serving of static files.
Creating your bucket
First, we need to give our bucket a name.
First, we need to give our bucket a name.
There are some naming conventions to be followed.
When selecting the AWS Region we have to be aware that the prices differ from region to region and also your location matters.
Below the select for AWS Region, we have the option to copy settings from an existing bucket but since we are creating our own we don't have to do anything there, it's optional by the way.
Object Ownership we can leave ACLs (Access Control List) disabled because the content of our bucket will be ours only, there will be no content that belongs to another AWS account.
Our bucket is ready, now just click on the button to create the bucket and we are done in this part.
After clicking on the Create Bucket button you will be redirected to the Buckets page and the bucket with the name you gave should appear there. Just click in the bucket to go to another page where we will be uploading our static files.
Now we go to the Buckets page and there we can create or edit an existing bucket.
Let's assume we are creating one bucket and it is empty of course, we can click on the upload button to add some static files to it.
After doing this, you have to wait for the files to load and for now, we are done with the Buckets.
Creating our Distribution using CloudFront
Once our files are uploaded in the bucket we need to make these files available to the world and that is when a CDN (Content Delivery Network) comes into play, CloudFront is the name of the service we are talking about. The PoP (Point of Presence) or Edge Locations are spread across the globe and they are responsible for providing faster access to the content by fetching them in the AWS Region we selected earlier, this reduces latency and stores the content in cache for faster access.
Let's create our first distribution:
The Origin domain is the source of data and our source of data is our S3 Bucket, AWS is intelligent enough to detect it for us, when you click the input a list of buckets and other assets you have in AWS will be listed for you.
When you select a source of data it will fill the first and third inputs and the second which is the Origin path is optional we can skip that for now.
The next part is the Origin access control settings and now we have 3 options:
We will be selecting the second option which is the one recommended by AWS. Our bucket was configured to block all public access but by selecting this option we restrict it to CloudFront only.
When you select the second option some fields will appear below:
If this is your first contact with AWS you will not have an origin access control, you will have to create a control setting in the button.
When the button is clicked a modal will appear with the following options. It will come with some options and you can leave it as it is and click on create.
Now scrolling down the page we will have Additional settings and we can also leave it as they are:
Now we can configure the Default cache behavior:
It is advisable to leave the compressed objects automatically selected. For the Viewer, I like to leave Redirect HTTP to HTTPS selected but you can restrict it to HTTPS only or as you wish.
The allowed HTTP methods are selected GET and HEAD because this is a CDN configuration and we are only gonna be making requests to fetch data because our deployment is a simple one, but in case your project is a big one you must consider other options as well.
The cache settings below can be left as it is, we have caching optimized which is recommended for S3.
The next options are WAF (Web Application Firewall) and in this case, we do not need it, if you enable some additional cost will come with it. Check the pricing below:
For the other settings, we will be walking through all of them.
We will be selecting the option to use all edge locations which will result in faster loading of the content, a few cents more expensive but if you have metrics that identify where most of your traffic comes from, feel free to check the Edge Locations closer to where you and your clients are.
Adding your own domain
In case you don't associate your domain to it, AWS will generate a hash to be used as your URL address which is not good to have a strange set of characters.
To wrap up the creation of our CDN in CloudFront we should select HTTP/2 and HTTP/3, HTTP/3 offers, a faster handshake and it is used by the most modern browsers.
The default root object is the file that will be accessed in case one of our users accesses our URL address with '/' we need to tell AWS what file it must read to render the initial page.
Now we have our CloudFront CDN up and running, but we still need to make some configs, like adding the S3 bucket policy.
It is highlighted in the yellow section. When you click the button to copy the policy, if you paste it somewhere you will see that it is a JSON file containing some info.
What we need to do is to click on the link and it will redirect to the page where you need to add the JSON file containing the policies.
We just need to paste the JSON and save the changes and that's it.
After saving we will have our distribution ready to be used and our application can be accessed using the domain name provided by CloudFront.
Now your application is hosted in AWS. But we need to use our domain and to do that we need to use Route 53.
Creating a hosted zone with Route 53
First, let's access the Route 53:
Then, all you have to do is enter your domain in the Domain name input, but first, you need to have a domain and remember not to add www, it's just the domain itself and after that click the button create hosted zone and that is it.
After the creation of your hosted zone, you need to add the Name servers to the website where you purchased your domain. AWS will give you 4 Name servers and in your website domain you might have only two servers to add, there must be a plus icon to add more and that is what you have to do in the Route 53 section.
Now you have to wait a couple of hours for the propagation to happen and when it is finished you have to head back to CloudFront to configure the CNAME, because earlier we left it blank and now that we have our hosted zone.
Now the final step is to go to the distribution we created earlier in CloudFront and click on the settings edit button.
We added 2 domain names so that our users can access it with or without the www at the beginning of the URL address.
Congratulations! You have successfully deployed your website to AWS with a custom domain using an S3 bucket (Simple Storage Service), a CDN (Content Delivery Network) **CloudFront** and Route 53.
References:
https://docs.aws.amazon.com/s3/#amazon-s3
https://aws.amazon.com/cloudfront/getting-started/
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html
https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/Welcome.html
Top comments (0)