Serving static content through CloudFront
Tags: aws, cloudfront, cloud
Published: 2023-02-15 09:06:24

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pw3o3nfndhzmhocmryq.png)

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