temikelani / s3-cFront-static-website

Deploy a Static Website on s3 with a CDN - CloudFront

Summary

Tech Stack

• AWS S3
• AWS IAM
• AWS CloudFront
• HTML, CSS, JS
• AWS CLI

Contents

• Objective
• Steps
• Via Cloud Formation
• Via Terraform
• Via CLI/Bash Script
• Via Console
• Resources
• go to top

Objective (go to top)

Host a static website on S3 and accessing the cached website pages using CloudFront content delivery network (CDN) service.

Steps (go to top)

• Create a bucket travel-website-bucket-temikelani
• Enable static website hosting on the Bucket
• Upload the web files to s3
• Create a Cloud Front Distribution
• Make the bucket a Cloud Front Origin Access Identity for that Distribution
• Create a bucket Policy that grants public read access to the CLoud Front Distriubtion only
• Access the website via the cloud front Distrubution

Via CLoud Formation (go to top)

Expand to see Details

• Make sure you are in the root directory of this repo s3-cFront-static-website

• Run aws configure to set up your CLI

• Deploy this CloudFormation template to AWS and save the outputs asn env variables

• create-stack

export STACK_NAME=travel-website

aws cloudformation create-stack \
--stack-name $STACK_NAME \
--template-body file://cloudformation/template.yaml

• Describe the stack to get the outputs (Bucket name and url, CDN ID and domain name )

  • describe-stacks

  aws cloudformation describe-stacks --stack-name $STACK_NAME
  

  aws cloudformation describe-stacks --stack-name $STACK_NAME --query "Stacks[].Outputs"
  

  export BUCKET_NAME=$(aws cloudformation describe-stacks --stack-name $STACK_NAME --query "Stacks[*].Outputs[0].OutputValue" --output text)
  

  export CDN_ID=$(aws cloudformation describe-stacks --stack-name $STACK_NAME --query "Stacks[*].Outputs[1].OutputValue" --output text)
  

  export BUCKET_URL=$(aws cloudformation describe-stacks --stack-name $STACK_NAME --query "Stacks[*].Outputs[2].OutputValue" --output text)
  

  export CDN_DOMAIN=$(aws cloudformation describe-stacks --stack-name $STACK_NAME --query "Stacks[*].Outputs[3].OutputValue" --output text)
  

• Upload Files to the bucket

  • cp

  aws s3 cp ./web-files s3://$BUCKET_NAME/ --recursive
  

• Access the site via the CloudFront Domain Name.

  curl $CDN_DOMAIN
  

  #on mac
  open "http://$CDN_DOMAIN"
  #on linux
  xdg-open "http://$CDN_DOMAIN"

• Clean Up & Delete All Resources

  • Empty S3 Bucket
  • delete-stack

  #empty s3 bucket
  aws s3 rm s3://$BUCKET_NAME --recursive

  # delete-stack
  aws cloudformation delete-stack --stack-name $STACK_NAME

Via Terraform (go to top)

Coming Soon

Coming Soon

Via CLI/Bash Script (go to top)

Coming Soon

Coming Soon

Via Console (go to top)

Coming Soon

Coming Soon

Resources (go to top)