What is Amazon CloudFront?
- As per Amazon Web Services (AWS)
"Amazon CloudFront is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the request is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance."
"If the content is already in the edge location with the lowest latency, CloudFront delivers it immediately."
"If the content is not in that edge location, CloudFront retrieves it from an origin that you've defined—such as an Amazon S3 bucket, a MediaPackage channel, or an HTTP server (for example, a web server) that you have identified as the source for the definitive version of your content."
Please visit my GitHub Repository for S3 articles on various topics being updated on constant basis.
Let’s get started!
Objectives:
1. Sign in to AWS Management Console
2. Create an S3 Bucket
3. Upload a file to the S3 bucket.
4. Create Custom Error pages.
5. Make the objects public.
6. Create a new Amazon CloudFront distribution.
7. Accessing images through Cloudfront.
8. Configuring custom Error Page
9. Restricting the Geographic Distribution of your content.
Pre-requisites:
- AWS user account with admin access, not a root account.
Resources Used:
Steps for implementation to this project:
1. Sign in to AWS Management Console
- Make sure you're in the N. Virginia (us-east-1) region
2. Create an S3 Bucket
- Object Ownership: Select ACLs enabled option and choose Object writer as Object owner
- Uncheck the Block all Public Access and acknowledge the change.
- take all defaults
- Create bucket
3. Upload a file to the S3 bucket.
4. Create Custom Error pages.
- These pages will be displayed when you get an HTTP 4xx or 5xx error.
- Create custom-errors folder
Create folder
create 001-error.html
<html><h1>This is Error Page</h1></html>
- create 001-block.html
<html><h1>This content is blocked in your location!!!</h1></html>
- upload error.html and block.html files to the custom-errors folder
5. Make the objects public.
- Copy the Object URL and paste it into a new tab.
https://mys3bucket123456.s3.amazonaws.com/001-Community-Builder.png
- AccessDenied message, meaning the object is not publicly accessible
- Create bucket policy to give access the object
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": ["s3:ListBucket"],
"Principal": {"AWS": "*"},
"Resource": "<YOUR_BUCKET_ARN>"
},
{
"Effect": "Allow",
"Action": ["s3:GetObject", "s3:PutObject"],
"Principal": {"AWS": "*"},
"Resource": "<YOUR_BUCKET_ARN>/*"
}
]
}
- copy the S3 ARN
arn:aws:s3:::mys3bucket123456
- click the Permissions tab, edit
- Copy and paste the below policy and save the policy.
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": ["s3:ListBucket"],
"Principal": {"AWS": "*"},
"Resource": "arn:aws:s3:::mys3bucket123456"
},
{
"Effect": "Allow",
"Action": ["s3:GetObject", "s3:PutObject"],
"Principal": {"AWS": "*"},
"Resource": "arn:aws:s3:::mys3bucket123456/*"
}
]
}
Open the Image Object URL again or refresh the one already open
you can see the object image
6. Create a new Amazon CloudFront distribution.
- Navigate to Cloudfront
- Create a CloudFront distribution
- Origin Domain Name: Select your S3 bucket - mys3bucket123456.s3.us-east-1.amazonaws.com
- Do not enable security protections under Web Application Firewall(WAF).
- take defaults
- Create distribution, takes 4-5 minutes to complete
- The domain name that Amazon CloudFront assigns to your distribution appears in the list of distributions.
7. Accessing images through Cloudfront.
Amazon CloudFront is now pointed to Amazon S3 bucket origin and you know that the domain name is associated with the distribution. - You can create a link to the image in the Amazon S3 bucket with that domain name.
For testing your distribution, copy your domain name and append your image name after the domain name.
https://<Domain name>/<object image>
https://d2hnyt6s1otxz8.cloudfront.net/001-Community-Builder.png
Open the CloudFront URL in a new tab. You can see your uploaded image.
You can see how much faster the CloudFront URL image loads as compared to the S3 URL.
When end users request an object using a CloudFront domain name, they are automatically routed to the nearest edge location for high-performance delivery of your content.
8. Configuring custom Error Page - This is Error Page
On to the CloudFront Dashboard and select the distribution created.
Select the Error pages tab.
Click on the Create custom error response button.
set up our custom error page
- Create custom error response
- back to Distributions and wait for your distribution to complete state to change Deploy.
- Note: This process will take around 5-10 minutes.
- Once the state has been changed to Deploy, we will test the error page.
- Enter the URL of an image that does not exist in your S3 bucket with the CloudFront domain name.
https://d2hnyt6s1otxz8.cloudfront.net/noimage.png
9. Restricting the Geographic Distribution of your content.
- need to prevent users in some countries from accessing your content
- you can specify either
- a whitelist (countries where they can access your content) or
a blacklist (countries where they cannot) by using restrictions.
On the distribution settings page, select Geographic locations tab and click on Edit button.
Restriction Type: Select Block list
Select the country where you are currently and click on it to check this option.
On enabling this option, the request from the specified country which is "Blacklisted", will not be displayed and a default error message is displayed.
Save changes
- Go to the distribution list and wait for your distribution to complete the state changed to deployed.
- takes about 4-5 minutes
- test the restriction through CloudFront in the browser.
https://d2hnyt6s1otxz8.cloudfront.net/001-Community-Builder.png
You can see the following error message:
403: Error The Amazon CloudFront distribution is configured to block access from your country.??
configure a custom error page - This content is blocked in your location!!!
Navigate back to CloudFront Dashboard and select the distribution you have created.
On the settings page, select Error pages tab.
Click on the Create custom error response button.
set up our custom error page:
- Go to the distribution list and wait for your distribution to complete the state changed to deployed.
- takes about 4-5 minutes
- Once the state has been changed to Deploy, we will test the restriction through CloudFront in the browser.
https://d2hnyt6s1otxz8.cloudfront.net/001-Community-Builder.png
Cleanup
- Delete S3 bucket
- Delete Cloudfront Distribution
What we have done so far
- We have successfully
created an Amazon CloudFront distribution and published an image through CloudFront.
configured Custom Error Pages for CloudFront Distribution.
configured restrictions based on Geo-location.
Top comments (0)