Content Delivery with Amazon CloudFront.

Previously, we saw how to host a static website on Amazon S3 bucket, however we had to make the public. Click link below to view article.

Demo — Hosting a static website on Amazon

However from a security perspective, this is not a recommended approach. As a matter of fact, your objects should never be public.

Alternatively, you can deliver your website content globally using CloudFront while maintaining private bucket access policy

What is CloudFront?

Amazon CloudFront is a content delivery network (CDN) offered by Amazon Web Services (AWS) that securely delivers data, videos, applications, and APIs to viewers globally with low latency and high transfer speeds.

CloudFront caches content at edge locations around the world, so that the content can be delivered from a location closer to the viewer, reducing the latency and improving the performance. This also reduces the load on the origin server.

CloudFront supports a wide range of content types, including dynamic, static, and streaming content. It also offers various features, such as SSL/TLS encryption, access control, origin failover, and real-time logs.

CloudFront can be used by businesses and organizations of all sizes to accelerate their web content and to distribute their digital content to a global audience. It is widely used by companies for delivering websites, mobile apps, live and on-demand streaming video, and APIs.

To deliver website content using Amazon CloudFront involves a few steps:

1. First, create a bucket in Amazon S3 and upload content of the website to the bucket.
2. Next, we create a CloudFront distribution.
3. Update the S3 bucket policy to allow CloudFront access our objects
4. Access the website using the CloudFront distribution domain name.

Here is the architecture for this demo:

1. We create the S3 bucket named ‘cloudfront-weather-today-s3', upload our website content.

Screenshot of the S3 bucket

2. Next, we create a CloudFront distribution.

i. Origin domain: We choose the S3 bucket with website content, ‘cloudfront-weather-today-s3'

ii. Origin access: We select ‘Origin access control’ option as it recommended by AWS. This means you do not have to make your objects public since selecting this option restrict access to only CloudFront.

Note: You must select an existing OAC or create an new one by clicking the ‘Create control setting’ button.

Create distribution

iii. For this demo, every other option is kept at default. One final step is to specify the index.html file as the Default root object

Specifying the default root object

iv. Then click on ‘Create distribution’

Created distibution

3. The next step is important to allow CloudFront make api calls to the S3 bucket.

Note: When you create a CloudFront distribution, An S3 bucket policy is automatically created for you to copy and use.

However if you missed copying the bucket policy, navigate to ‘origins’ menu of the distribution, select origin and click edit. Scroll down to Bucket policy and click copy policy.

Now we have copied the S3 bucket policy to your clipboard, let’s update the bucket policy of our S3 bucket

We navigate to the ‘Permissions’ menu of our S3 bucket, Scroll down to ‘Bucket policy’ and click the ‘Edit’ button. Next we, paste the json that defines our policy and save changes.

S3 bucket policy

Voila! we are good to go!

4. We can access the website using the distribution domain name. Optionally, you can configure a CloudFront distribution to use a custom domain name, such as example.com, instead of the default CloudFront domain name. This is known as a “CNAME” or “Alternate Domain Name” (ADN) configuration.

It’s recommended to consult with AWS documentation or support for guidance on how to achieve your desired outcome.

Our website

We have seen how to securely deliver website content globally using Amazon CloudFront, a content delivery network offered by Amazon Web Services. Unlike hosting a website on an Amazon S3 bucket, which requires making objects public, CloudFront allows private bucket access policy while reducing latency and improving performance through edge location caching. The steps to access the static website content via CloudFront include creating an S3 bucket, creating a CloudFront distribution, updating the S3 bucket policy, and accessing the website using the CloudFront distribution domain name. CloudFront supports various content types and features, such as SSL/TLS encryption, access control, origin failover, and real-time logs. Additionally, CloudFront can be used by businesses of all sizes to accelerate their web content and distribute their digital content to a global audience.

Thanks for reading and take care!