Amazon CloudFront Tutorials: Setting up a Dynamic Content Distribution for Amazon S3

An Amazon CloudFront content delivery network (CDN) distribution brings S3 users many benefits.

Rapid data transfer speeds

CloudFront lets you serve your content at speed to viewers around the world. The many CloudFront edge locations cache and deliver your content closer to your users, reducing latency and offloading capacity from your origin server.

Improved security and performance 

CloudFront also restricts access to your S3 bucket. By only allowing CloudFront endpoints to give access to your content, your applications will be more secure and responsive.

Cost-effective data transfers

CloudFront pricing lets you customize your delivery to your budget. AWS does not charge for data transfers between an AWS-hosted origin such as S3 and CloudFront, making origin fetches a cost-effective option.

In the video, see how to configure your origin and start testing your CloudFront CDN distribution in just 15 minutes.  

Step 1. Go to the AWS Console | Step 2. Create an Amazon S3 bucket | Step 3. Create a CloudFront distribution | Step 4. Specify your distribution settings | Step 5. Configure your origin | Step 6. Configure Origin Access Identity | Step 7. Configure default cache behavior | Step 8. Configure your TTLs | Step 9. Configure additional features | Step 10. Test your CloudFront distribution 

To start, log into your AWS Management Console and select Amazon S3 from the service list. 

From there, you can:

• Create an S3 bucket if you don't already have one, by selecting Create bucket.
• Specify a DNS-compliant bucket name.
• Select the Region where you want your bucket to be located.

You can then create your bucket. Using the console or S3 APIs, you can add more files to your bucket or create new buckets, if you wish. When you initially create an S3 bucket, it takes some time to propagate the DNS name change—usually up to 15 minutes.

Next, go to CloudFront from the Networking & Content Delivery section of the AWS console service list. If you have already opened CloudFront, it may also be in your history for quicker access. From here, you can create a new web distribution by clicking on Create Distribution.  

Now, you can begin to enter your distribution settings. This begins by specifying the S3 domain that you created in the Origin Domain Name field.  

Enter your Origin Domain Name. If you created the S3 bucket in the same AWS account, it should show up in a drop down list within the field. If it’s in a different account, check your bucket settings to give CloudFront access permissions.

Giving access permissions enables CloudFront to read the objects from your bucket. You can also specify an origin path if you put all your objects in a subfolder.

From here, you can restrict access to your Amazon S3 origin. If you select yes, the system will ask you to create an Origin Access Identity or select an existing one, enabling CloudFront to read the objects from your bucket. You also have the option to allow CloudFront to update the bucket policy for you.

If you select not to restrict access, users may be able to bypass your CloudFront and access your content directly through the S3 bucket URL. For any private or sensitive content, it’s important to set the correct access restrictions.

In this section, you can also specify an Origin Path if you store all your objects in a subfolder. You can provide an Origin Custom Header with a specified value that CloudFront will forward to the origin on each request. This is useful for custom origins, as it shows which request came from CloudFront versus another client.

You then have various options under Default Cache Behavior Settings.

Viewer Protocol Policy allows you to choose how you handle HTTP and HTTPS protocols. You can select to Redirect HTTP requests to HTTPS, for example, enabling you to support requests using either protocol. You can also specify to support HTTPS Only, in which case HTTP traffic would get dropped. This ensures you are compliant with best practices in web security.

CloudFront allows you to specify which HTTP methods you want it to accept. The default setting is GET, HEAD. Selecting either of the other options (GET, HEAD, OPTIONS or GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE) will let you configure how CloudFront caches the options method.

You can then specify which HTTP headers you want to forward to your origin. It’s usually recommended to allow headers according to the relevant request and response behavior for your Amazon S3 origin. In particular, if your origin is looking at specific HTTP headers to decide which object to return, you should allow those. If you forward all HTTP headers, CloudFront will actually bypass the caching layers and not attempt to cache the object at all.

In this next section, you can specify the Time to Live (TTL), managing how long content stays in the cache before expiring. By default, Use Origin Cache Headers will be selected. Alternatively, you can customize the upper and lower time bounds for objects to be stored in your CloudFront cache.

If you choose to edit these settings, you will be prompted to enter a minimum and maximum TTL in seconds. Then, if your header returns a value outside of your minimum or maximum value, CloudFront will either use your minimum or maximum TTL. If it's within those bounds, then CloudFront will use the value returned from your origin.

If your origin returns no cache control header, the default TTL will be used instead. In our example video, the default value is set to 86,400 seconds, which is the equivalent of 24 hours.

In this next section, you can choose to cache content based on cookies and query string parameters.

As with HTTP headers, the recommendation is allowing only the cookies or query string values that are relevant to your origin. You can also forward these and the CDN will still try to cache them. Take care if choosing to forward all—it could greatly reduce your cache hit rate if CloudFront forwards everything. As a result, you might have a large number of objects cached multiple times because of the different possible variations of queries and cookie values.

You then have more options in the following fields:

• You can select Smooth Streaming if you're delivering video on demand (VOD) with CloudFront.
• You can choose to Restrict Viewer Access if users will be accessing private content in CloudFront.
• You can choose to Compress Objects Automatically if your CloudFront will be serving compressed files.
• You can create various functions to invoke using the Lambda@Edge Events section. For more information, see Customizing at the edge with Lambda@Edge.

Under Distribution Settings, you can specify which parts of the CloudFront network you want to use. By default, CloudFront will use all edge locations for best performance. This will help serve your content as fast as possible around the world.

If you only expect viewers in specific regions, such as the US, Canada, and Europe, then you can specify only those regions as a lower price class. This does not mean that viewers outside of those regions could not access your content—CloudFront would just route them to their nearest edge location. If you will use AWS Web Application Firewall (AWS WAF) with CloudFront, you can also configure those settings here.

Before you save your distribution, it’s important to manage your Secure Sockets Layer (SSL) certificate. There are two options here:

• Use the Default CloudFront Certificate.
• Upload or request a Custom SSL Certificate from AWS Certificate Manager (ACM) and associate it to your CloudFront distribution; this is suitable if you use a custom domain.

Finally, you can use the remaining settings to specify:

• Which Supported HTTP Versions you want to use.
• Whether you will use Logging, and which Bucket for Logs CloudFront should use to store any access logs.
• Whether Cookie Logging is active.

From there, you can enter a description and create the distribution. Once saved, it will take approximately 15 minutes for your distribution to deploy worldwide.

Once the distribution is ready, you can click on it to review your settings. The first screen will show you a number of tabs and the configuration settings that you’ve specified. From there, you can add additional origins and multiple cache behaviors, if required.

CloudFront also allows you to create custom error pages or change how long error responses stay in the cache by selecting Create Customer Error Response. You can adapt these settings for each HTTP error code. Let's say you wanted to retry for every 403, you could specify a Minimum TTL of 0 seconds. By default, CloudFront caches everything for 300 seconds to alleviate some of the load on the origin. You can also create custom error responses for each error code, if you wish.

In the Restrictions tab, you can Enable Geo-Restrictions to allow or disallow viewers in specific locations from seeing your content. The Invalidations tab will let you remove custom objects from CloudFront edge caches. Lastly, you can use the Tags tab to apply custom tags, helping you organize and identify your distributions.

Once completed, copy the domain and paste it into your browser to see your distribution in action. You can also learn how to deliver your app’s dynamic content using CloudFront with an Amazon EC2 web server instance.

The Amazon CloudFormation template will also help you get started with CloudFront. This template will launch an S3 bucket to store your static files at scale, then deliver that content to your users over the CloudFront CDN.

For more information, read the blog post titled Amazon S3 + Amazon CloudFront: A Match Made in the Cloud and get the CloudFormation template.

Not sure how to get started with CloudFront? See our getting started with content delivery networks guide, or head over to the Amazon Web Services Content Delivery Network Documentation hub.

Check out these resources on managing your CloudFront distribution on S3 in our Premium Support Knowledge Center:

• How do I use Amazon CloudFront to serve a static website hosted on Amazon S3?
• Use Amazon CloudFront to serve HTTPS requests for your Amazon S3 bucket