Deploy a react app on AWS using Amazon S3 and CloudFront

Deploy a react app on AWS using Amazon S3 and CloudFront

Good news to share is that a react app means it is static. This means that once you had built all your files, there won’t be need of executing any instruction. Another news to share is that hosting a react app on Amazon S3 costs almost nothing… Yeih!! And finally, I would add the easiness that Amazon S3 provides to users at the moment of updating and deploying.

Through this next blog, you will find a tutorial of How to deploy a react app on AWS using Amazon S3 and CloudFront.

So, Let’s start!!

The entire process

Step by Step Deploy a react app to AWS

Create DNS Record

  1. Go to Route 53
 route 53 to Deploy a react app on  AWS
  1. Select your hosted zone and create a new record

Request SSL certificate

  1. Go to Certificate Manager
certificate manager to Deploy a react app on  AWS

2. Click “Request a certificate”

request a certificate to Deploy a react app on  AWS

3. Select “Request a public certificate” and click “request a certificate”

request a public certificate to Deploy a react app on  AWS

4. Choose a domain name, in this Deploy a react app to AWS tutorial, we’re going to use a subdomain but you can choose a domain as well. Click “Next”.

add domain names to Deploy a react app on  AWS
  1. Now we have to validate that we’re the owners of the domain, to do so, let’s select a validation method. You can choose two methods:
  • DNS Validation: AWS will provide you some records that you will need to add on your DNS settings.
  • Email Validation: AWS will send you an email with instructions to validate the SSL

On this step, if you don’t have access to your DNS records, it’s preferable to use the Email Validation, if not, you can use DNS validation method.

select validation method to Deploy a react app on  AWS

Review your settings on the summary page at the end. Click “Confirm and request”. Make sure to follow the instructions of any of both methods, so we will have our SSL provided successfully and ready to use.

review

You will see that our Request is in progress, go to your DNS settings or your email to validate your certificate. Finally, click “Continue”

request in progress

Once you have validated your SSL, you will notice that SSL has an “Issued” status, this means it’s ready to use!

issued status

Create Bucket

  1. Go to Amazon S3
amazon s3 to Deploy a react app on  AWS

2. Click on “Create bucket”

create bucket to Deploy a react app on  AWS

3. Configure the bucket with desired settings, such as name, region, the rest of settings can use default values

configure bucket settings to Deploy a react app on  AWS

4. When you have finished your bucket configuration, you will see a summary of your bucket settings. Finally, click on “Create bucket”

create bucket 1

Now we can leave S3 aside by the moment, let’s move to CloudFront. We are going to need a CloudFront distribution so we can link it to our bucket.

Create Distribution

  1. Go to Cloudfront
cloudfront

2. Create a new distribution, click “Create Distribution”

create distribution

3. Select the Web type and click “Get started”

web type

The distribution settings are quite long, so let’s review each section individually.

4. On origin name, the list of buckets on your account will be listed, select the bucket previously created on the list

origin settings

On origin path, leave the path blank (we can modify this value later)

create distribution 1

Origin ID is automatically generated, do not modify it.

Change the setting from “No” to “Yes” on Restrict Bucket access

origin settings

Optional, assign a comment on the distribution, so we can know what’s the purpose for such distribution

distribution comment

On Grant Read Permission on Bucket, select “Yes, Update Bucket Policy” (we’re changing the Bucket policy later but we need the Identity ID)

update bucket policy

Optional. Add Headers if needed.

add headers

Let’s move to “Default Cache Behavior Settings” section, as a best practice, make sure to use the option “Redirect HTTP to HTTPS” to enable HTTPS.

Default Cache Behavior Settings

Leave the rest of settings by default, and move to Distribution Settings.

distribution settings

On “Alternate Domain Names(CNames)” add your custom domain/subdomain, for this example, we’re using “myreactapp.clickittech.com

Alternate Domain Names

On SSL Certificate, choose the “Custom SSL Certificate” option and select the certificate that we created previously

Custom SSL Certificate

On “Default Root Object”, let’s set “index.html”, but it may vary depending on your app settings (generally it’s index.html)

Default Root Object

Make sure that Distribution State is “Enabled”

Distribution State

Finally, click

Conclusion

Easy enough, right?

Well, now that you have a react app running within the AWS Cloud, you can definitely use all the features that the AWS Cloud has to offer you. Deploying a react app on AWS is not as difficult as you might be thinking, even though if you have any kind of obstacles, like How to use AWS Cloud Features or Which Cloud to choose? Then don’t doubt on contacting us, we want your infrastructure to be as optimized as possible.

Guide your team to adopt AWS best practices with ClickIT

FAQs

Can I host a React app on AWS?

Hosting a react app on Amazon S3 costs almost nothing and is not as difficult as you might be thinking; for its deployment, you need to:
-Create DNS Record
-Request SSL certificate 
-Create Bucket

Can you make an app with just React?

Although React is known for developing web apps, it is also helpful for building mobile apps and native-rendered apps. React has strong characteristics. Such global corporations as Facebook, Instagram, Netflix, and the New York Times use React in their projects.  

How do I deploy AWS CloudFront React app?

To deploy a React app on AWS using Amazon S3 and CloudFront,  you will need a CloudFront distribution so you can link it to your bucket.

1. Go to Cloudfront
2. Create a new distribution; click “Create Distribution.”
3. Select the Web type and click “Get started.”
4. On origin name, the list of buckets on your account will be listed; select the bucket previously created on the list
5. Let’s move to the “Default Cache Behavior Settings” section; as a best practice, make sure to use the option “Redirect HTTP to HTTPS” to enable HTTPS.
6. On “Alternate Domain Names(CNames),” add your custom domain/subdomain
7. On SSL Certificate, choose the “Custom SSL Certificate” option and select the certificate that we created previously
8. On “Default Root Object,” let’s set “index.html”, but it may vary depending on your app settings (generally, it’s index.html)
9. Make sure that Distribution State is “Enabled.”

Subscribe

to our newsletter

Table of Contents

We Make DevOps Easier

Weekly DevOps Newsletter

Subscribe to our DevOps News

Subscribe to a monthly newsletter to receive the IT best practices, startup-related insights & emerging technologies.

Join hundreds of business leaders and entrepreneurs, who are part of our growing tech community.

We guarantee 100% privacy. Your information will not be shared.