Host a static website on AWS with CloudFront Distribution Enabled

Create a Content Delivery Network (CDN) Distribution using Amazon CloudFront

In Amazon CloudFront, the content is organized into distributions.

You can create two different kinds of CloudFront distributions:

  • Web Distributions for HTTP/HTTPS-delivered contents and
  • RTMP Distributions for delivering streaming media content to end users in real time.

Each distribution has a unique cloudfront.net domain name (e.g. cdn123.cloudfront.net) that can be used to reference objects through the global network of edge locations.

To use Amazon CloudFront:

  • Store the original versions of your files on one or more origin servers. An origin server is the location of the definitive version of an object. Origin servers could be an Amazon S3 bucket, an Amazon EC2 instance, an Elastic Load Balancer or another remote server.
  • Create a distribution to register the origin servers with Amazon CloudFront.
  • Use your distribution’s domain name in your web pages, media player, or application. When end users request an object using this domain name, they are automatically routed to the nearest edge location for high-performance delivery of your content.

Mainly there are two steps in creating a Distribution:

  1. Select a delivery method
  2. Configure your origin settings, default cache behavior settings and distribution settings.

From the CloudFront Distribution splash page, select Web Distribution.

The second step is composed of several sections: Origin Setting, Default Cache Behavior Settings and Distribution Settings.

Amazon CloudFront minimizes end user latency by delivering content from its entire global network of edge locations. Price Classes let you reduce your delivery prices by excluding Amazon CloudFront’s more expensive edge locations from your Amazon CloudFront distribution. In these cases, Amazon CloudFront will deliver your content from edge locations within the locations in the price class you selected and charge you the data transfer and request pricing from the actual location where the content was delivered.

The time required for deploying a new CloudFront distribution also depends on the number of selected Edge Locations. Select the Use Only US and Europe price class to speed up the creation process.

You can specify a default root object for your distribution. CloudFront will serve the Default Root Object when the base distribution URL is requested.

Insert gallery/index.html as Default Root Object and then click Create Distribution.

CloudFront immediately assigns an ID and a Domain Name to the distribution and starts updating the edge locations to serve your content.

After a few minutes, the distribution status changes to Deployed and you can start experiencing all the benefits of CloudFront.

For completing this step, you need to upload an image gallery to the s3 bucket. The gallery is composed of:

  • a set of image files
  • an HTML page that lists each image
  • some javascript and css files for enhancing the image visualization

First of all, download the demo gallery from: static-gallery-website

Make S3 files accessible to everyone

All uploaded files are private by default and can only be viewed by the AWS account owner, but you can make them accessible to everyone using the AWS Console.

Navigate to your bucket, then click the Permissions tab and click Edit for the Block public access. Uncheck all of the options to allow all kinds of public access and click Save:

Now, go back to the bucket, and click the gallery object and make it public.

Now select the index.html to get the public url:

Open in it in a new browser:

As you can see, the public object URL is https://calabs-bucket-sw557190.s3-us-west-2.amazonaws.com/gallery/index.html.

The URL of any S3 object follows this template: https://s3-<region>.amazonaws.com/<bucket-name>/<object-path><object-name>

Test the CloudFront distribution

When the previously created distribution is ready, you can browse the demo gallery boosted by CloudFront Edge locations.

Get the Domain Name from the CloudFront Distributions list, and then open the following URL:

http://d1t23ta50gnwag.cloudfront.net

This will redirect to the above URL.

Disabling CloudFront Distribution

If you don’t need the distribution anymore, you can disable and then delete it. A disabled distribution is no longer functional and Amazon stops billing for it.

FAQs