Deploying React apps to production on AWS ☁️
Tags: aws, tutorial, react
Published: 2024-01-22 12:52:24


In this article, we will explore how to deploy your Front-End project on AWS. I will demonstrate this using a React project, but these steps can be applied to Vue, Angular, or any other stack.

To follow this tutorial, you will need to meet the following 3 requirements.

1. You will first require an **AWS account**. To set up your account, you'll need to provide your credit card information as AWS charges based on usage. However, storing your project **can be exceptionally affordable**, and most services offer free tiers. This means you can store your projects for free if you stay within the limits of the free tier usage. This is the screen you encounter after providing your information for AWS. You can choose the best option for your needs—I am opting for the free version.👇
![This is the screen you encounter after signing up for AWS. You have three options: starting for free, personal usage at $29 a month, or $100 a month for business purposes.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a49lhbomjtbuhqfjvnds.png)

2. You will also require a **domain** because we need access to the DNS configurations to point it within AWS. However, this step is **optional**, as AWS will generate a default URL for you to test.
3. The final requirement is a React project or any other front-end project, allowing us to generate the **build** folder.

In order for us to deploy our static front-end projects, all we need is to do is find a service that can store our files, and the file we will be using is the **_Simple Storage Service_** commonly now as **S3**.
Go to yout 
![Searching for Simple Storage Service in the AWS searching input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl8cne4atl82kruqv7h4.png)

1. **Navigate to your S3 Service:**
   - First things first, head over to your AWS Console.
   - Dive into the S3 service.
2. **Discover Your Buckets:**
   - Look around, and you'll spot buckets.
   - They're where you stash everything from your frontend project to cat GIFs.
3. **Create a Fresh Bucket:**
   - Hit the "Create Bucket" button – this is your backstage pass to storage.
   - Choose a name that is **unique** across all AWS accounts!
4. **Choose Your Storage Spot - Select Location:**
   - Time to pick a location for your bucket.
   - Consider things like pricing and how speedy you want your files to be – it's a bit like choosing a vacation spot.
   -  I opted for US East (N. Virginia) as it seemed fitting for my storage requirements. However, feel free to select the location that aligns with your specific needs and preferences. 🌍
5. **Proceed with Default Options:**
   - For the rest of the setup, I stuck to the defaults.

And there you have it – your bucket is ready to roll! 🚀

![Setting the buckest and location](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckkiy4fydm60gcpy9bv0.png)

Once created, simply click on the newly made bucket. Upload the files from your **_build_** or **_dist_** directory in your React project into this bucket. Click on **upload** and you're done with the S3 configuration!

### CloudFront
Now, how do we access these files? We'll utilize our famous **Content Delivery Network (CDN)** This magic 🪄 spreads our project across different places. Even though our app lives in North Virginia, it keeps the delay super low for users all over the globe. And guess what? We're going to use AWS's CloudFront to make it happen!
To do that go to the CloudFront service and create a new one, once you do that you will have to fill a fell inputs.

1. The initial step involves configuring the **Origin** settings. Begin by selecting our S3 project in the Origin domain section. Subsequently, choose the **_Origin access_**. For our setup, we will opt for **_Origin access control settings (recommended)_**. Upon selection, you'll need to designate your _Origin access control_. If you haven't created one, use the **default options** to set it up. Leave the remaining settings in this section at their default values.

2. Now, onto the **_Default cache behavior_** section. Most of these settings can stick to the defaults. However, let's change a couple of things. Under **_Viewer protocol policy_**, switch it to **Redirect HTTP to HTTPS**.

Web Application Firewall (WAF)

3. **Web Application Firewall (WAF):**
WAF has a fixed price, which can be quite costly. While it's a good consideration for APIs, since we're only handling static files, it's unnecessary. Therefore, I'll select the option **_Do not enable security protections_**.

4. **Settings:**
In the settings, the first option you'll encounter is the **Price class**. I'll opt for **_Use all edge locations (best performance)_**, which might come at a slightly higher cost. But, it's good to consider your own goals and the server's location. 
For the **Custom SSL certificate**, if you don't have your own domain, you can leave it as is, and CloudFront will generate a domain for you. Additionally, in the **Supported HTTP versions**, consider checking the HTTP/3 option.

Now, for the **Default root object** field, this is where you define the name of the object (files) that will be served when a user requests the root URL. To achieve this, we'll input **index.html**. 
Just keep the default settings for the rest and click **Create Distribution**.

**This is a demo gif of all that process that we've done so far:**
<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTZlOGEzYzhubDBtNjA4NHBnYzNpNzlhNGI2MWprY21wOHdzdGJwcyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/i9uavlpirJ1xIcppzl/giphy.gif">


After creating, you'll likely land on a page that looks like this:
![CloundFront Next page after creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emw18xhhrkf5w3q6zk2t.png)

All we need to do now is to click in the **Copy Policy** button, and click in the link **_Go to S3 bucket permissions_** to update policy. Now click in Edit in the **Bucket policy** Section and **paste** your policies and save. Now we have allowed CloudFront to access our S3 Bucket 👏.

Now, when you navigate to the general area of your CloudFront Distribution, you will find a **Details** section with the title **Distribution Domain Name**. This title is accompanied by a **generic link** created by AWS, allowing you to access your live application. If you copy and paste this link into a web browser, you will likely see your project running under this domain 🚀.


## Changing to your own custom domain:
The process may vary slightly depending on the provider with whom you created and purchased your personal domain. However, you should be able to access your domain and **change your DNS servers**. To configure our DNS, we will use another AWS Service called** Route 53**. In this service, choose the option **Create hosted zone** and fill in the necessary information.
![Create hosted zone option selected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wlhy02pzh912e75mdtm.png)

1. Enter your domain without the **_www_**, like this: **_arturceschin.com_**.
2. The description is entirely optional and doesn't affect anything; it's just for your personal reference.
3. Keep it set as **Public hosted zone**.
4. Click on **CREATE!**

Pay attention to your Name servers; these are the ones you'll need to configure in your DNS Server.** Make sure to use all four.**

![DNS Servers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/985x3x9ifi29uo1x4w8p.png)

Simply copy and paste these Name servers into your other domain provider's settings and save. Keep in mind that this process may take up to 2 hours!

Once that is set, navigate to your CloudFront settings. Click on 'Edit,' and go to the section labeled **Alternate domain name (CNAME)**. Click **Add item** and enter your domain twice: once with **www** at the beginning and once without. 🌐

![Setting the domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/griqayov86opsr5ec6an.png)

Let's set up our **Custom SSL certificate** using another AWS service called **Certificate Manager**—and it's free! Click on **Request a public certificate** and then **Next**.

Now, just follow the image below: set one domain like before and another with *.* to make all subdomains valid. This is called a _wildcard_.

![Domain names examples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gm6laypncve7jk6bz3gw.png)

Choose **DNS validation** and keep the other options as they are. Click **Request**. Your request will be pending validation. To resolve this, click your **Certificate ID** and choose **Create records in Route 53**.

![Create records in Route 53 Option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zytdfjiro4hfmvgnc624.png)

In about five minutes, your status should change to **Issued ✅** if you completed the previous step of copying your Name Servers to the DNS Servers in your domain provider and waited for about two hours for that process to complete.

Now, go to your CloudFront settings once again, navigate to the **Custom SSL certificate** section, and choose the certificate we just created. The _**Custom SSL certificate**_ should suggest the certificate, similar to the image below.⬇️⬇️
![Example of certificate being displayed and selected."](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zxsyx80uzftm6put0zw.png)
Go to **Save Changes** and wait for a moment, while it is deploying.

Now, what we need to do is set up the redirection so that when we access our domain, the request is directed to CloudFront. To achieve this, follow these steps:

1. Go to the **Route 53** service.
2. Navigate to your **hosted zone**.
3. Click on **Create Record**.
4. Choose the Alias option.
5. Select Alias to CloudFront distribution.
6. Choose the desired CloudFront distribution.
7. Click on **Create Record**.

Just like to the image below:
![Create Record first step](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br3gtv574l79onbd1ahb.png)

Now, we will repeat the same process, but set the **Record name** to **www**.

After you've done all that, and your deploy is finished, you should see your project with your cool custom URL 🤩.

But, heads up! When you access it and hit refresh, you might get smacked with an error saying your **access is denied**. Just like in the image 👇.
![Access Denied](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/incfewqds2wpjjaqpf1t.png)

But to fix that, all we need to do is set it up so that if we encounter an error like "Access Denied," we automatically redirect to something like **index.html**. Here's how:

1. Go to your CloudFront Distribution.
2. Navigate to the Error pages section.
3. Click on **Create custom error response**.
4. Choose the **HTTP error code** to be **403 Forbidden**.
5. Click on **Customize error response** and set it to **Yes**.
6. Set **Response page path** to be **/index.html** and click on **Create custom error page**.
7. Wait for a few minutes for the deployment to take effect.

Check out the image below for guidance.

![Customizing your error response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5lyg0xl00h8tnnbgpny.png)

With all that set, you should be able to see your application with no more errors, and the deployment of your Front-End project is done. 👏🚀


## Conclusion
Deploying your Front-End project on AWS offers numerous advantages, including scalable storage with Amazon S3, efficient content delivery through CloudFront's CDN, and seamless integration with Route 53 for DNS management and AWS Certificate Manager for your SSL Certificates. It's the winning combo for a seamless Front-End deployment. Ready to embrace the power of AWS to enhance your Front-End deployment experience? 🚀✨