React App on S3 with Static Hosting and CloudFront - Lab 94

Purpose of this lab is to create an React app hosted in S3 bucket that’ll be a static website for cloudofthings.net.

Services Covered

S3
Route 53
IAM Role
CloudFront
Certificate Manager

Lab description

Purpose of this lab is to create an React app hosted in S3 bucket that’ll be a static website for cloudofthings.net. To improve the accessibility and get better performance the website will be distributed by CloudFormation.

Creating and hosting static website in S3
Creating simple React website
Creating records in Route 53
Creating CloudFront distribution
Creating HTTPS certificates and routing traffic

Go visit cloudofthings.net

Lab date

28-09-2021

Prerequisites

AWS account
npm installed – download
A registered domain for the second part

Lab source

Be A Better Dev

Lab steps

In the working folder run command that will create a React app
```
npx create-react-app demo-app
```
This will download and create app called demo-app in your working directory.
Go into the demo-app folder and run
```
npm start
```
This will start environment and open the app in your browser.
Next build the app
```
npm run build
```
It will batch everything upp.

Create a bucket for hosting the app. Upload files from the build folder inside the demo-app folder. In permissions turn off the block public access, and change the policy that it’ll allow anyone to get objects from the bucket:

{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "PublicReadGetObject",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::www.awsimplified.lab/*"
    }
]
}

You might need a policy granting you user *allow* effects for some actions:

{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "ModifyBucketPolicy",
        "Action": [
            "s3:GetBucketPolicy",
            "s3:PutBucketPolicy"
        ],
        "Effect": "Allow",
        "Resource": "arn:aws:s3:::*"
    },
    {
        "Sid": "AccessS3Console",
        "Action": [
            "s3:GetBucketLocation",
            "s3:ListAllMyBuckets"
        ],
        "Effect": "Allow",
        "Resource": "arn:aws:s3:::*"
    }
]
}

It might be needed even if you use an user with AdministratorAccess policy attached to it. And disable the Block Public Access settings for this account because this has higher priority then any other policies.

In properties change the static website hosting to enabled.
In Route 53 go to the hosted zones (this is assuming that you have a registered domain in Route 53). Then create a new records as a Simple routing and define simple record, record type as A to IPv4 and AWS resources and Value/Route traffic to as Alias to S3 website endpoint, choose the right region and your website hosting bucket.

Next part is the deployment of the app in the CloudFront.

In Certificate Manager request a public certificate for the domain address.
Validate the certificate (either DNS, simpler and integrated in Route53 or email), this might take a while.
Go to CloudFront and create distribution. As Origin domain you need to copy in the address from S3.Don’t use the auto-fill option, those are incorrect. You’ll find that address in the Static website hosting section of your bucket. When in S3 edit the Protocol to https.
In order to support HTTPS change the Viewer protocol policy to Redirect HTTP to HTTPS. Under _Custom SSL certificate choose the earlier created certificate in AWS Certificate Manager.
In Route 53 update the A records that they point to the addresses provided in Cloud Front so Route traffic to Alias to CloudFront distribution and paste the address you see under CloudFront distribution Domain name.

Here is the website :

cloudofthings.net

Lab files

s3bucket_policy.json – policy for the bucket

Acknowledgements

Be A Better Dev

React App on S3 with Static Hosting and CloudFront – Lab 94