lab94_diagram
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 S3
  • Route53 Route 53
  • IAM IAM Role
  • CloudFront CloudFront
  • CertificateManager 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


cloudofthings


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

  1. 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.

  2. Go into the demo-app folder and run
    npm start

    This will start environment and open the app in your browser.

  3. Next build the app
    npm run build

    It will batch everything upp.

  4. 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.

  1. In properties change the static website hosting to enabled.
  2. 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.

  1. 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.
  2. 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.
  3. 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

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *