Skip to main content
Version: Next

How to deploy a React App Using AWS S3 and Cloud Front

Deploy React App to AWS S3 Bucket​

Open your AWS console and type “Bucket” in the search bar.

  • Select the S3 service.

  • Once opened, you should see a page similar to the image below.

  • Proceed to click the “Create a bucket” button.

  • Give your bucket a name. I will be calling this bucket “mypetstore.cloud” but you can use any name of your choice.

  • Specify your preferred region (eu-west-3)

  • Enable public access to your S3 bucket and then save. I will leave all other options in default.

  • Your bucket should have been created and should appear in S3 like the image below.

  • Navigate into the bucket we just created, where we will import the content of the build folder in the React App into our S3 bucket.

  • Click on the “Add files” button, highlight all the files in our project build and add them

  • Next, click on the “Add folder” button and import the “static” folder to S3 bucket.

  • (Or just drag on drop all you files and folders)

  • The uploaded data should look like the image below on our S3 bucket.

  • Next, we are going to update the properties of our bucket

  • Scroll down to the bottom to the “static website hosting” option and edit it.

  • Enable static website hosting for our S3 bucket and specify “index.html” as the default page of your project.

  • Next, navigate to the the S3 bucket permissions lets update the policies.

  • Scroll down to the bucket policy and edit it. Input the following policy configurations.

    {
      "Version": "2008-10-17",
      "Statement": [
        {
          "Effect": "Allow",
          "Principal": "*",
          "Action": "s3:GetObject",
          "Resource": "arn:aws:s3:::www.mypetstore.cloud/*"
        }
      ]
    }

  • ⚠️ Ensure you replace “resource” with your bucket name. ⚠️

  • Once that is completed, navigate to the bucket properties and scroll to the bottom, You will see a URL available for our bucket.

  • Copy the link and paste it into a browser.

  • Your React app should be able to load in the browser like this.

Deploy React App to CloudFront​

We need to create a CDN that will speed up the distribution of our website content by routing user requests through the AWS network.

  • Search for Cloudfront in the AWS console.

  • Select “Create distribution” button

  • Input the URL link to our S3 bucket under the origin domain

  • You can leave the other options as the default.

  • Scroll to the bottom of the page under setting and input the CNAME

  • I will be using the root domain name “mypetstore.cloud”

  • Since we want to use HTTPS for this project, we will need to add a certificate

  • So, proceed to the “Request certificate” link just below that.

  • On the certificate page, you will need to fill in the root domain name and www subdomain names we just specified above.

  • Proceed to request the certificate. That should specify that it has been successfully created but the status will indicate “Pending validation”

  • Go to the "Route 53 section"

  • Now refresh the certificate manager page. Our certificate should indicate “Issued” as the status.

  • Navigate back to CloudFront, and now you should have the option to choose the certificate we just created.

  • Once that is in place, you can go ahead and create our distribution.

Add SubDomain to Route 53​

Next, we need to add our domain to Route 53 in order to simplify the management of your domain and DNS settings and enhance the reliability and security of your application.

  • Back in your AWS console, search for Route 53.

  • Go to hosted zones and choose oskare-app.fr

  • Create a new record

  • Input your record name

  • Under the record, allow the “Alias” to Cloudfront distribution, specify the CloudFront link we created early, and create the records.

  • Add a CNAME record with the value of the previously created certificate.

  • Now you're website should be availble at the requested subdomaine!