Amazon CloudFront
The CloudFront service offers delivery of the website contents in a more faster way by linking it with 50+ edge locations. The CloudFront uses a global network of edge locations.
CloudFront improves the user experience in a faster, reliable and scalable way.
Step 1: Take the CloudFormation page from the Services, the stacks will already be created and the status should be CREATE_COMPLETE
- Select the Outputs tab at the bottom of the screen, it will show the S3 Bucket and StaticWebsiteURL.
- Copy the S3 bucket name and StaticWebsiteURL to a text file.
Step 2: Here, we should explore the Static Website contents in the S3 bucket.
- From S3 page, select the bucket name which we copied earlier and you can view the 6 files inside it.
- Select the cf_lab1.html, in the Overview tab please load the link in the browser to see the static page.
- The permission section will show permission of the website files. In this demo, the permission is given as public.
Step 3: Next, we are proceeding with the creation of CloudFront
- Under the CloudFront, go to Create Distribution and Get started with the web section.
- In the origin domain name section, a list of items will be displayed where we need to select the Amazon S3 bucket we copied earlier.
- Keep the default values for Origin ID and Restrict Bucket Access and also the Default Cache Behaviour Settings
These default settings will cache the files for 24 hours allowing HTTP and HTTPs connections. Also, it forward requests to the CloudFront.
Step 4: Under Distribution Settings, Select the options as follows
- Price Class: Default
- Alternate Domain Names (CNAMEs): (Optional)
- SSL Certificate: Default CloudFront Certificate
- Default Root Object: (Optional)
- Logging: (Optional)
- Cookie Logging: Off
- Comment: (Optional)
- Distribution State: Enabled
Click the Create Distribution and wait till the status changes to Deployed.
Step 5: Testing the website from the Amazon CloudFront
- Make sure that the distribution status is deployed before you proceed.
- Copy the Domain Name section of that CloudFront distribution and save it for later use.
Now, we would try creating a webpage to browse with the CloudFront domain name
- Copy the codes on a text file and save it as HTML file
<html>
<head>My CloudFront Test</head>
<body>
<p>My text content goes here.</p>
<p> <img src=”http://<CloudFront domain
name>/grand_canyon.jpg” alt=”my test image” />
</body>
</html>
- Replace the <CloudFront domain name> with the amazon CloudFront distribution domain name.
- Save the text file with a name cf_lab1_test.html
Opening the page will show an embedded file server from the edge location that CloudFront determined was the fastest to serve the image file.
Step 6: In the next step, we would check the site hosting with CloudFront
- This lab environment is created on an Amazon S3 bucket, we can fully host the site using CloudFront
- Open the browser and load the URL like “CloudFront domain name/cf_lab1.html”
- Right-click on the image and Select the Open link in new tab and you will see that the image is served from the CloudFront.
Step 7: Updating an Object
Now, the website is hosted in CloudFront and the data is cached along all the edge locations so that the objects will be closer to the user and server them quickly. But when we change an object or remove an object, we need to distribute the changes along all the edge location. In this step, we will check how to do that
- The simplest method of updating an object is File Versioning. Upload the new picture to use the S3 bucket. Once you upload the image, we must change the file name on that HTML file.
<html>
<head>My CloudFront Test</head>
<body> <p>My text content goes here.</p>
<p> <img src=”http://<CloudFront domain
name>/grand_canyon_v2.jpg” alt=”my test image” />
</body>
</html>
Step 8: Removing an object
In case the file versioning does not work, removing the file from the S3 bucket will not take effect as the content is already cached in all edge locations.
- Load the URL/cf_lab1.html fro both the S3 and CloudFront
- CloudFront URL look like — http://d235fbn2b5.cloudfront.net/cf_lab1.html
- Amazon S3 URL — http://qlstack2.labinstance-34r235rerwe-s3bucket-sdfst4fsef.s3.amazonaws.com/cf_lab1.html
Step 9: We now test the link after removing the html file cf_lab1.html
- Take the S3 bucket and select the file cf_lab1.html, delete the file from the Actions Tab
- Now, try to reload the URLs and you could see the website from Amazon CloudFront. Whereas, you will see an XML error in the Amazon S3 bucket.
The CloudFront now display the cached content evenif the source is deleted.
Step 10: We will now try to rename another file to the name of the deleted image file.
- In the S3 bucket, select the cf_lab1-highlands.html and Rename the file as cf_lab1.html
- Now refresh the URLs and still you can see the old image from the CloudFront URL but in the S3 URL, the new image is displayed.
Step 11: To remove displaying the old image, Invalidation need to be done
- Go to the CloudFront page and Click the Distribution Settings.
- On the Invalidation tab, select Create Invalidation
- Type the file name, you want to invalidate: cf_lab1.html
- Click on Invalidate and wait for the status to change to Completed.
Now the new image will be displayed as the invalidation took effect and removed the cache from the edge location.
Another option you configure the cache in such a way that to expire it in less time. The expiration time of the cache can be customized.
TECHNETWORKZ 