[Lab] Configuring and Using Amazon CloudFront CDN With Amazon S3

We will configure and demo the use of CloudFront with an S3 bucket as the origin. This note assumes that you have setup your AWS account and are familiar with using S3.

Steps:

1. Create an S3 bucket in a region far from your region, keeping all defaults.

2. Upload a large image file, making it accessible for everyone to use (public).

3. Click on the image link in the overview page and view it.

4. Go to CloudFront

5. Click on ‘Create Distribution’

6. Click on ‘Get Started’ under Web Distribution

7. Click inside the text box for Origin Domain Name and it will show you all available origins to choose. Choose the bucket you had created for this demo.

8. ‘Origin Path’ can be used to specify any sub folders within your bucket. Leave it blank.

9. Leave the populated value for ‘Origin ID’ as is.

10. Select yes for Restrict Bucket Access. This will restrict users to always access your Amazon S3 content using CloudFront URLs, not Amazon S3 URLs.

11. Origin Access Identity, should be create a new identity (default).

12. ‘Grant Read Permissions on Bucket’ should be set to ‘Yes, Update Bucket Policy’. Now CloudFront will automatically grant read permission to the origin access identity when you create the distribution.

13. Leave other options as default, but click on the info button against each option and read the description.

14. Click on ‘Create Distribution’. You should see a message similar to: Using CloudFront to Serve Private Content… This is because we have restricted access to S3.

15. Click on ‘Distributions’ and you should see the new distribution. However, status will be ‘In Progres’ and can take some time to get deployed. Meanwhile you can explore all options under all tabs.

16. Go to the bucket and click on the file link (assuming everyone has read permission). First time it will take more time; but from second time, it will be faster due to caching at browser side.

17. Now remove your read permission and hit on the link. You will get it as it is cached in the browser. But if you refresh, you will get an access denied permission.

18. Now go to cloudfront distribution copy the domain name url (e.g. d2i3qlyu36thic.cloudfront.net). Replace part of the url before name of file (d2i3qlyu36thic.cloudfront.net/mypic.png) and execute. You should see the file loaded.

19. After experimenting, you need to go to CloudFront and first disable your distribution. It will take some time.

20. Once it is disabled, you can delete it.