Serving static content through CloudFront

Amazon CloudFront is a content delivery network (CDN) service that helps you distribute your static and dynamic content quickly and reliably with high speed, this will allow you to deliver your content across the world with low latency, in this article we will demonstrate how to deploy a static website on S3 and use CloudFront to serve it,

The below is a high-level design for the solution:

The prerequires for this will be:

• AWS Account as we are going to create S3 & CloudFront distrbution.
• A command line tool with access to AWS (I used CloudShell).

We are going to follow the below steps in order to create the demo:

1- Login into the CloudShell and create index.html
echo "This is a sample webbsite" > index.html

2- Create an S3 bucket to host the index file on it
aws s3api create-bucket --bucket yourbucketname-$RANDOM_STRING

3- Copy the previously created file to the bucket:
aws s3 cp index.html s3://yourbucketname-$RANDOM_STRING/

4- Set the public access block for your bucket:
aws s3api put-public-access-block \
--bucket awscookbook110-$RANDOM_STRING \
--public-access-block-configuration "BlockPublicAcls=true,IgnorePublicAcls=true,BlockPublicPolicy=true,RestrictPublicBuckets=true"

5- Create a CloudFront OAI to reference in an S3 bucket policy:
OAI=$(aws cloudfront create-cloud-front-origin-access-identity \
--cloud-front-origin-access-identity-config \
CallerReference="awscookbook",Comment="CloudFront S3 OAI" \
--query CloudFrontOriginAccessIdentity.Id --output text)

6- Copy the distribution-template.json into your local machine.

7- Replace the values in the previous file with your CloudFront OAI and S3 bucket name which created in step 5:
sed -e "s/CLOUDFRONT_OAI/${OAI}/g" \
-e "s|S3_BUCKET_NAME|awscookbook110-$RANDOM_STRING|g" \
distribution-template.json > distribution.json

8- Create a CloudFront distribution using the modified file in step 7:
DISTRIBUTION_ID=$(aws cloudfront create-distribution \
--distribution-config file://distribution.json \
--query Distribution.Id --output text)\
_Note: Distribution will take some time to be deployed.

9- To get the status of the deployment use the following command:
aws cloudfront get-distribution --id $DISTRIBUTION_ID \
--output text --query Distribution.Status

10- Configure the bucket policy to allow only requests from CloudFront through bucket-policy-template.json, copy the file from the repo and modify it with your bucketname & CF OAI:
sed -e "s/CLOUDFRONT_OAI/${OAI}/g" \
-e "s|S3_BUCKET_NAME|awscookbook110-$RANDOM_STRING|g" \
bucket-policy-template.json > bucket-policy.json

11- Apply the bucket policy to the S3 bucket with your static web content:
aws s3api put-bucket-policy --bucket yourbucketname-$RANDOM_STRING \
--policy file://bucket-policy.json

12- You can check the domain name by the below command:
DOMAIN_NAME=$(aws cloudfront get-distribution --id $DISTRIBUTION_ID \
--query Distribution.DomainName --output text)

You can validate the deployment through the below command:
curl https://yournamebucket-$RANDOM_STRING.s3.$AWS_REGION.amazonaws.com/index.html

You will get access denied as you will try to access the bucket directly,

instead try to access it through the CloudFront distribution
curl https://d2zfl31nkq2262.cloudfront.net/index.html


References: AWS COOKBOOK