Deploying React apps to production on AWS ☁️

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

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

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! 🚀

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)

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

2. 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:

After creating, you'll likely land on a page that looks like this:

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.

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

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

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.

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.

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.⬇️⬇️

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:

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

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.

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? 🚀✨