Setup Cloudfront for SSL and Edge Cache

Section Explanation

This section is a walkthrough to setup CloudFront as a CDN in front of a website in S3.

Requirements

This section depends on having a website published to S3 as described in the Publish to S3.

Get a Free SSL Certificate

Start by going to your AWS Console and selecting the Certificate Manager Section.

Then click Get Started.  As shown in the below screenshot.

Next, fill in the hostname for the website.  In this example I am setting up www.beerontap.org so that is what I type, then I click review and request.

Simply click to confirm your request, as shown below.

Click Continue to go the management console.

At this point, we have a request for a Cert which the domain owner must approve.  Your screen should look like the screenshot below.

Next check your email, you will need to click on the link provided.  As shown in the screenshot below.

When the window opens in your browser from the email link click ‘I Approve’.

This should take you to a Success Page.

If you refresh you Certificate Manager Tab in the AWS console you should see your new certificate status as Issued.

Get S3 Information for CloudFront

Start by going to your AWS Console and selecting the S3 Section.

Next Select your S3 Bucket and click on the Properties Tab.

Next Select Click on the static website hosting box.

Copy the URL for the S3 Site.  As shown in the below screenshot.

Setup CloudFront Distribution

Go to the CloudFront section of the AWS Console, and click Create Distribution.

 

or

Click Get Started under the Web section.  As shown in the screenshot below.

Fill in the Origin Information.

A. The Origin Domain Name is the URL we got from the S3 bucket earlier.  Also, set the Origin Path to /.  Shown below.

 

B. It is recommended to set ‘Viewer Protocol Policy’ to ‘Redirect HTTP to HTTPS’.

 

 

 

 

C. It is recommended to set ‘Compress Objects Automatically’ to Yes.

 

 

D. Distribution Settings

– Under ‘Alternate Domain Names’ type the website hostname you intend to use.  In example www.beerontap.org.

– Select Custom SSL

– Use the pulldown to select the SSL we created earlier.

Scroll to the bottom of the page and click Create Distribution.

Now its time to wait, this can take up to 20 minutes.  For the distribution to transition from In Progress to Deploy.
We are Deployed!
 
Click on the Distribution ID for the Distribution Detail.
Copy the Domain Name so we can configure our DNS Record.

Setup CloudFront in Route53

Go into the Hosted Domain Section of Route53 in the AWS Console.

 Click on the domain you want to manage, and Click Create Record Set.
In this example, we are setting up DNS for www.beerontap.org.
  • Set Name to www.
  • Alias is set to Yes
  • Alias Target is our Distribution Domain Name.  d2oj7n7qjvji9n.cloudfront.net
 
 After creating the IPv4 record create the IPv6 record.

You’re Done!

At this point, you should have a working website stored in S3 and backed by CloudFront which provides edge caching and SSL.  If you are publishing your S3 static content via WordPress ensure you are publishing as https and not http.

What Next?

Next, is should Clear Cloudfront Cache on S3 Bucket Change.