This section is a walkthrough to setup CloudFront as a CDN in front of a website in S3.
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.
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.
Setup CloudFront in Route53
Go into the Hosted Domain Section of Route53 in the AWS Console.
- Set Name to www.
- Alias is set to Yes
- Alias Target is our Distribution Domain Name. d2oj7n7qjvji9n.cloudfront.net
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.
Next, is should Clear Cloudfront Cache on S3 Bucket Change.