How to deploy your React JS app to AWS at low cost (April 2022)

#aws #programming #tutorial #beginners

If you are looking for a way to deploy your ReactJS app to aws at low cost than this guide is best for you

so let's start with introduction and then simple solution

I have always had this mental block that I could not deploy anything from the zero. Every place I worked for already had systems running when I joined, so I never had to figure out how to do it. Furthermore, I have never built something on my own, not even as a side project.

That was until now! 🎉

Considering I am a person that likes to not spend their money when not needed, I thought that this reacts JS deploy to aws tutorial might help me (and other people) follow this steps in order to get their production website up and running with minimum cost.

I am going to split into the frontend and the backend part. For the frontend we will use React, AWS S3, AWS CloudFront, AWS Route 53, AWS Certificate Manager, and Google Domain.

For the backend we will Express, AWS EC2, AWS RDS and NGINX basically.

How to deploy react JS frontend to AWS?

For the frontend part, I have just build an app using create-react-app. Simple as that, I built it using Typescript, using tailwindcss and fontawesome. This setup allows you to basically build anything from scratch.

After you finished the first version of you app, do a npm run build to generate your production version. The files inside the build folder will be the ones you'll upload to AWS S3.

Next up, do you already have a domain name? It would be nice to get one. For this example I will be using Google Domains. For this project I got the passalong.info.

Now that we have an idea of our domain, let's create the S3 buckets. We'll create two buckets, one with our "naked" URL, example.com (I will refer to it as first bucket) and another one www.example.com (I will refer to this one as second bucket). (On the next project I will test if the second one is really necessary, but let's have those for now).

You will upload the files from the build folder to the root of the first bucket, do not upload the build folder itself.

Go for the Permissions tab and turn off the check on Block all public access. Still on the Permissions tab, add the follow bucket policy. Do not change the version, that is fixed.

Then, go to the Properties tab, under Static website hosting, enable it, then host a static website, and on index document, insert your index file, usually index.html. And save it. After that you should under Static website hosting a URL. Copy that and open in a new tab, it should open your app 🎉 but notice it is showing not secure, no worries, we will fix that later.

Now onto our second bucket, you will only need to update the Properties tab to redirect to our first bucket. So, under Static website hosting, enable it, but now instead of hosting, you select Redirect requests for an object. On host name you will put the URL copied before without http://, so it would look like example.com.s3-website-us-east-1.amazonaws.com. Do not use the suggested value by AWS. On protocol, select http, we still don't have certificate. Save it. You will see an URL similar to the previous one, if you copy and open in a new tab, you should be redirected to the URL from the first bucket.

Now let's head over AWS Certificate Manager, we need that along CloudFront to serve our app with https. Request one public certificate, add your fully qualified domain name both with and without www. Select DNS Validation. After you finished requesting it, it will show as Pending validation, click on your certificate, you will on Domains, a CNAME name and a CNAME value for each domain. Copy those values and head over to Google Domains.

On Google Domains, under DNS and Default name servers, add Custom Records with those values you obtained from Certificate Manager. Stand up, stretch a little and head back to Certificate Manager, your certificate should be now Issued.

Great, now let's have our app deployed worldwide with a certificate with cache from CloudFront. Create a distribution, origin domain will be your first bucket, but THIS IS THE IMPORTANT PART, do not select the suggestions, use that same URL you get from your first bucket. You can let the other fields under Origin empty. Under Default cache behavior, set Redirect HTTP to HTTPS, Allowed HTTP methods to all. Under Settings, you can add both your domains to the alternate domain name and you will have to choose the certificate, the one that we created previously. Then create. After it has been deployed, you can see that there is a domain name URL asdqwezxc.cloudfront.net, in order to be sure everything is correct, you can copy that URL and open in a new tab, it should open your app now with https.

With this CloudFront URL, head over to Google Domains and add with host name www.example.com, type CNAME, and value that CloudFront URL.

Lastly, you need to create a Hosted zone on Route 53, I'm not sure this is still necessary, I'll test on another project as well, since this is the only thing that does not have free tier and costs US$0.50 per month per hosted zone. Create a zone with domain name as example.com and public hosted. After it was created open it and create records. You will have to create a record for each domain. The record type will be A, route traffic to Alias to CloudFront distribution. When selecting the distribution, do not select the suggestions, past the URL we have from CloudFront, routing policy as Simple routing.

Now you are able to access your app either with www or without but now with the domain you own 🎉.