Exercise: Amazon CloudFront

Natasha Ong
This is some text inside of a div block.
•
4 min read

Contents

Example H2
Example H3
Example H4
h5
Example H5
h6
Example H6

Exercise overview:

By the end of this hands-on exercise, you should be able to do the following:

  • Create a new Amazon CloudFront distribution
  • Use your Amazon CloudFront distribution to serve an image file
  • Delete your Amazon CloudFront distribution when it is no longer required

‍

Recap: Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, and high transfer speeds, all within a developer-friendly environment.

‍

Task 0: Accessing the AWS Management Console

  1. Sign in to your IAM user and open the AWS Management Console.

‍

Task 1: Store a publicly accessible image file in an Amazon S3 Bucket

In this task, you will store the file that you wish to distribute using Amazon CloudFront in a publicly accessible location. You will store the image file in a publicly accessible Amazon S3 bucket.

1. At the top of the page, search for and choose S3 in the search bar

2. Choose Create bucket and then configure:

3. Bucket name:  Choose a unique bucket name. Enter cfxxxx (Replace xxxx with a random number. For example, if the random number is 1379, then the bucket name is cf1379. Make sure to remember this bucket name - you'll need it again in the next task!

4. AWS Regions: You will launch your S3 bucket at US-East (N.Virginia) us-east-1 (it depends on what you prefer to launch your S3 bucket)

5. For Object Ownership, select ACLs enabled* and then select Object writer‍

In this exercise, you will enable S3 ACLs for fine-grained control of your individual objects. However, it's generally advised to avoid using ACLs for broader permissions management because it can become complex and lead to users using the wrong access settings, making the system vulnerable. Bucket policies or IAM policies offers a more efficient, secure approach - we'll use ACLs for a straightforward method.

6. Scroll to the bottom of the screen, then choose Create bucket

7. Click into the S3 bucket you created.

8. Choose the Permissions tab

9. In the Block public access section, choose Edit

10. Deselect the Block all public access option*, and then leave all other options deselected.

Deselecting the "Block all public access" option in Amazon S3 allows  buckets or objects within them to be accessible to the public. This setting is necessary if you need to provide broad, unauthenticated access (i.e. to anyone on the internet) for content on a website hosted in S3. Make sure only intended data is exposed and proper security measures are still enforced and accessible to authorised individuals or services.

11. Choose Save changes

12. Type confirm in the field to reassure AWS you want to do this, and then choose Confirm.

13. Choose Objects tab.

14. From the Objects tab, choose Upload.

15. Choose Add files.

16. Select an image that you would like to upload. Please upload images that end with .jpg, .jpeg or .png.

  • Note: If you don’t have an image file in your laptop, you can visit your favourite website and download one of its image to your desktop. Choose that file for this step.

17. Scroll to the bottom of the screen, then choose Upload.

18. In the Files and folders section, select the file that you've uploaded.

19. Go to the Permissions tab, and then under the Access control list (ACL)*, choose Edit.

💡 *Editing the ACL means changing whether users or the public can view/download the object you've just stored in S3. This is useful for sharing content with others without requiring them to have AWS credentials. However, it's crucial to manage these permissions carefully to avoid unauthorised data access.

20. Under Everyone (public access):

21. Select Read for both Objects and Object ACL.

22. A yellow warning pops up, you might need to scroll to the bottom to see it. The warning tells you that everyone in the world can access this project if we select Read - exciting! Select the checkbox I understand the effects of these changes on this object.

23. Click Save changes.

24. In the Properties tab (you should be here automatically after the previous step), copy the value of Key and paste it in a text file on your laptop. You'll be using this ins a second.

25. Copy the value of Object URL and paste it into a new browser tab, then press Enter/return on your keyboard.

  • Woah! It's showing your image. It also means that your content is publicly accessible. However, this is not the URL you will use when you are ready to distribute your content*. You will use CloudFront.

*Why?

Using the S3 object's URL is not recommended for content distribution  due to a lack of security and efficiency.

  • You risk unauthorised access if the objects are publicly accessible, leading to potential security breaches.
  • Direct links don't benefit from the performance enhancements provided by more suitable services like Amazon CloudFront, which optimises delivery and provides better access control mechanisms, caching, and usage analytics.

Task 2: Create an Amazon CloudFront Web Distribution

In this task, you will create an Amazon CloudFront web distribution that distributes the file stored in the publicly accessible Amazon S3 bucket.

  1. Search for CloudFront in the search bar at the top of your AWS Management Console. You could also click on the Services icon (with nine dots) on the top left-hand corner of the console, and select the Networking & Content Delivery option on the left-hand panel that pops up. CloudFront should be the fourth option on the list.
  2. Choose Create a CloudFront distribution.
  3. On the Create distribution page configure:
  4. Origin domain: Select the S3 bucket you created. Select the bucket that you've created from the previous steps.

5. On the Web Application Firewall (WAF) section, choose Do not enable security protections for now as this may incur a charge and we don't need to setup on this hands-on exercise.

6. Scroll to the bottom of the page, then choose Create Distribution.

7. The Last modified section shows Deploying. Once it's ready, it updates to a date and time value. It can take up to 10 minutes to be ready. Feel free to continue to the next step while you wait!

Task 3: Create a Link to Your Object

CloudFront knows where your Amazon S3 origin server is, and you know the domain name associated with the distribution. Create a link to your Amazon S3 bucket content with the distribution domain name. This will enable CloudFront to serve your content.

*An origin server is the S3 bucket where your web file is living in.
**In CloudFront, distribution refers to the setup configured to describe how content is delivered from AWS to the end user.
  1. Copy the following HTML into a new text file:

‍

  1. In your text file:
  2. Replace DOMAIN with your Amazon CloudFront Distribution domain name for your distribution.
  3. Replace OBJECT with the name (also known as Key) of the file that you uploaded to your Amazon S3 bucket. Refer to step 17 in Task 1.
  4. Then your HTML file should be similar to the following:

5. Save the text file to your computer as myimage.html.‍

6. Open the web page you just created in a browser to ensure that you can see your content. (This can be done by double-clicking the file or right-clicking the file and choosing Open with, and selecting any browser).

  • The browser returns your page with the image you uploaded, served from the edge location that Amazon CloudFront determined was appropriate to serve the object.

Don't see anything?

  • It could be because your distribution is still taking it's time to start up, head back to your distribution's page to check if it still says Deploying in the Last modified section.
  • If you encounter a problem running your HTML file in macOS, try pasting the URL you've pieced together directly into your browser instead. The URL is in your HTML file and should look like this: http://d2kjwbx4qyyat0.cloudfront.net/nextwork.jpg.

Task 4: Delete Your Amazon CloudFront Distribution

You can clean up your resources by deleting the Amazon CloudFront distribution and the Amazon S3 bucket.

  1. In the AWS Management Console, select the check box for your CloudFront distribution.
  2. At the top of the screen, choose Disable.
  3. Choose Disable.

4. The value of the State column immediately changes to Disabled.

5. Wait until the value of the Status column changes to Disabled. and Last modified column is updated with the last modified date and time.

6. Select the check box for your CloudFront distribution.

7. Choose Delete then:

8. Choose to Delete

Task 5: Delete Your Amazon S3 Bucket

  1. Navigate back to Amazon S3 by searching at the top of the page, in the unified search bar, search for and choose S3
  2. Choose the S3 bucket you created
  3. Select (check the box) your file
  4. Choose Delete
  5. Confirm the deletion by typing permanently delete
  6. Choose Delete objects
  7. Choose Close
  8. Click Buckets

9. Select your bucket again.

10. Choose Delete then:

11. Enter the name of your bucket.

12. Choose Delete bucket

You have now released the resources used by your CloudFront distribution and Amazon S3 bucket.

‍

Congratulations! You now have successfully:

  • Created a new Amazon CloudFront distribution
  • Used your Amazon CloudFront distribution to serve an image file
  • Deleted your Amazon CloudFront distribution when it is no longer required

‍