In this article, you will learn how to create an Amazon CloudFront distribution for Amazon S3 bucket within the Amazon Management Console.
Amazon CloudFront is a web service to speeds up distribution of your static and dynamic web content (such as HTML, CSS, JS, image, and media files) to end-users. CloudFront is a content delivery network offered by Amazon Web Services.
Please read on Amazon CloudFront key features:
See: https://aws.amazon.com/cloudfront/features/
Requirements
- AWS Account. Create your own AWS Account
- Amazon S3 Bucket. Learn how to create an Amazon S3 Bucket
- Domain name.
To get started, this guide will show you through step process how to create an Amazon CloudFront distribution for Amazon S3 bucket within the Amazon Management Console.
Step 1. Create Distribution
Signed to AWS Management Console and open the Amazon CloudFront console at https://console.aws.amazon.com/cloudfront/home.
On this screen, Select Create Distribution, and on the next page, you’ll find it below.
As described on the page itself:
- Web is distribution for static and dynamic content
- RTMP is distribution for streaming media files.
However, CloudFront is discontinuing to support for RTMP service until December 31, 2020.
Now choose Web as we working on static content for Amazon S3 bucket.
On this page, Click on Origin Domain Name boxes and select your source S3 bucket for your content files and next option is Origin Path, you can specify the folder on S3 bucket where all your content is saved, but at this time, leave it blank as default.
Next, choose all following options selected with red arrows to set up the right permission for your S3 bucket access. If you need more detailed information for each option, click on the right-side information icon.
Besides of Cache Behavior Settings, continue on step 2.
Step 2. Default Cache Behavior Settings
In this section, you only need to configure for important options. Select option Redirect HTTP to HTTPS, which helps your visitors automatically redirect to the secured (HTTPS) for your static content.
Next, set to default option GET, HEAD on Allowed HTTP methods and then set Compress objects automatically to Yes.
Apart from this, continue on the Distribution Settings section.
Step 3. Distribution Settings
In this section, all the following values will apply to the entire distribution. You can list all the domain names on Alternate Domain Names text area. Also, set Custom SSL Certificate and click on the text boxes to add your generated SSL certificate from AWS Certificate Manager.
See: How to Generate Free SSL Certificate using AWS Certificate Manager
Next, select Create Distribution to publish a new CloudFront distribution.
Note: Publishing an Amazon CloudFront distribution will take time, so be patient.
Step 4. Setup ALIAS Record for CloudFront Domain Name
While waiting for creating your CloudFront distribution, back to the CloudFront dashboard and navigate to Distributions. Next, Select your Distribution ID and copy the Domain Name value under the General tab.
We’re going to assign the CloudFront domain name to our business domains, rather than using this URL https://d3idxp1eyqsku3.cloudfront.net/san+francisco+bridge.jpg
Now, If you are using different DNS providers (such as GoDaddy, NameCheap, Bluehost, HostGator, more) and navigate to DNS settings, and then choose a CNAME Record and assign your CloudFront domain name.
However, If you are using Amazon Route 53 to manage to DNS record. Open your Route 53 console at https://console.aws.amazon.com/route53/home. Then navigate to Hosted Zone and select your domain name (e.g. geraldalinio.com) and then select Create Record Set.
In the right side panel under Edit Record Set enter the Name value (e.g static) and choose record type to A-IPv4 address and then paste the CloudFront domain name or select options under Alias Target to d3idxp1eyqsku3.cloudfront.net.
Then choose Create and you will see similar to this record:
After creating a new record, wait for a while after your domain propagated online and you will see similar to this URL using your browser.
That’s all.
I hope this tutorial helped you and feel free to comment section below for more suggestions.
Tags: aws, CDN, cloudfront, s3
