Deploying your application on AWS
Tags: aws, cloudcomputing, tutorial
Published: 2023-11-04 00:30:02

## 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.

![AWS S3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2785zpw0pd58wvi42atb.png)

First, we need to give our bucket a name.
There are some naming conventions to be followed.

![Create bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ge0x13m6nix290ka8b4j.png)

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**.

![Block all public access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxpw63dvf0d1m7ech0hl.png)

Our bucket is ready, now just click on the button to create the bucket and we are done in this part.

![Create bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2i0fx2vya1davqwd66n.png)

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.

![Bucket upload status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw9zfosliddz7btq28t0.png)

Now we go to the Buckets page and there we can create or edit an existing bucket.

![Buckets ammount](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6hk37iuemugj24n38hn.png)

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.

![Bucket upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwtvjqnonrtihhi2v4ws.png)

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.

![CloudFront](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2douxw4npa3qdwj7n1zz.png)

Let's create our first distribution:

![Create distribution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw7oov12j048ohc96qbm.png)

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:

![Origin access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylmrpy0m67dazize95u9.png)

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:

![Create control setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpkdrqr3rggmkywpk7vy.png)

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.

![Create control setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy916izal8dcjcbquyb6.png)

Now scrolling down the page we will have _Additional settings_ and we can also leave it as they are:

![Additional settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx4if2edjwlspbxn40cv.png)

Now we can configure the Default cache behavior:

![Default cache behavior](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxu0sx8qlovkb3wbf1a9.png)

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.

![Cache policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzdo9hdxvbyuxy79ubi2.png)

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:

![Pricing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzoz6mjk1idf5korf52t.png)

For the other settings, we will be walking through all of them.

![Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op87023ewucsqfpc5yu5.png)

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.

![Domain name - CNAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vggji4l8pco66scahd03.png)

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.

![Create distribution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owqvgm81lgl6rcejc1if.png)

Now we have our **CloudFront CDN** up and running, but we still need to make some configs, like adding the **S3 bucket policy**.

![Copy policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98qx2nt42syw3ucoiut7.png)

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.

![S3 bucket permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6g9r2ecpstu8zqyldsb.png)

![Edit bucket policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqms9xonjxqyty3hcy8x.png)

We just need to paste the **JSON** and save the changes and that's it.

![JSON edit policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kz80wim8i6pwwh4g666.png)

After saving we will have our distribution ready to be used and our application can be accessed using the domain name provided by **CloudFront**.

![Distribution amount](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rylix2b7ehxthxjr3ocu.png)

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**:

![Route 53 - Create hosted zones](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orasym4h6bemgkt5mjex.png)

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.

![Create hosted zone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edf31kv92x9450ox6t6o.png)

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.

![CloudFront distributions edit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eekkgcwyewf1myht1505.png)

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_.

![CloudFront edit settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2y7ageakzbzgxa28nzw.png)

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