React.js AWS Deployment

We can deploy our React.js App on EC2, with pm2 and Nginx but this is not the cost-effective way. EC2 keeps on charging us and S3 is cheaper.

S3 (Upload the build here) => CloudFront (Attach it to S3) => Route53 (Attach domain or subdomain)

In S3, we can create bucket and in that we can upload the build files. Keep the default settings while creating the bucket. The Bucket should be private. Go to Permissions > Block all public access: On.

Now Go to CloudFront. Click on “Create Distribution”. Choose Origin domain from the list and keep the Origin path as blank.

Origin Access: Origin access control settings (recommended) → So that S3 should be accessible only from CloudFront but not from outside. Create a new Origin Access Control and name it and keep every other settings as default.

It will give a notification that you need to update the S3 bucket policy.

Viewer protocol policy: Redirect HTTP to HTTPS.

Allowed HTTP methods: GET, HEAD (If we’re deploying websites only)

Web Application Firewall (WAF) is related to security, rate limiting, etc.

Settings > Price class (It is where our app should be cached)

Alternate Domain name (CNAME) → To set up the custom domain name.

Go to Custom SSL Certificate and Click on Request Certificate. Add these, If you’re creating new certificates for your domain and all the subdomain. Then click on “Request”. So after requesting, it will show status => Pending. It will give two records that needs to be added in your domain management website like GoDaddy.com, namecheap.com, etc. If you’re managing from Route 53 then add it there.

In S3, see which file is the entry point of your application then add it here.

Keep other options as default and click on “Create Distribution”.

It will give a notification that you need to update the bucket policy. Copy it.

Go to the bucket that you’ve attached to cloud front. Go to Permissions. Go to Bucket Policy. Click Edit and Paste the policy and save the changes.

It will take some time to be live. 5-10 min.


If we go to a path eg. mydomain.com/about then this thing is being handled by cloud front itself by default and in the S3 bucket it will look for the file called about and it can’t find then it will return a status 403 that the request is forbidden. Further, the routing in react is handled by react-router. So we need to make a configuration where we need to create a custom error page. See the configuration.

So if the user is going to a different route then it will be handled by react itself. This is a special configuration for react apps.

Go to this path to map your custom domain (alternative domain) with the cloud front.

Click on “Switch to wizard” then select “Simple routing” then click “Next” then “Define Simple record”. Keep this configuration:

Now click on “Create Records”. So once it is Active you’ll be able to website through this subdomain. It might take some time like 20-30 min.


So now if you want to deploy the app again, you upload the build to S3 again, but it will not reflect immediately. Because Cloud Front caches the website for a particular amount of time.

So if we want to do force update, Go to Invalidations Section, create an Invalidation.

/* -> To invalidate everything.

So it will remove the old cache and update it with the latest content.

Suggestion: Buy the Domain from other domain providers and use the hosted zones here.

You take this name server values and edit it in your domain providers then it will be mapped.