Speed Up Your Website by Using AWS CloudFront

[00:00] I have a static website, staticsite.willbutton.co. I want to speed up the performance of that website around the globe using Amazon AWS CloudFront service. To get started, I'll choose my AWS console and go into the CloudFront service. I'll start by creating a new distribution and I want to create a web distribution.

[00:22] When I click in the origin domain name, there's a prepopulated dropdown that appears. You can see that it's already populated with what appears to be the correct choice for my website. That's not actually the case. What you see listed here is the name of the bucket. What I need to put in this in this textbox is the name of the http endpoint.

[00:46] To get that, I need to go to S3, choose my S3 bucket, look under properties and under static web hosting, the endpoint is listed here. That's the value we want to put in the textbox. I'll copy that, return to CloudFront. We didn't actually save anything. I'll click create new distribution again, and then paste that value in there.

[01:14] The origin ID is automatically populated for me. For my website purposes, http only is going to be just fine. There's an option to include custom headers if those are needed. We have our default cache behavior settings. For simple static sites such as mine, the defaults are going to be just fine.

[01:34] Under distribution settings, I can select whether I want US and Europe, US, Europe, and Asia, or all locations. I'm going to want to choose that based on where my expected traffic is going to benefit the most from this. There's also the option to integrate with the AWS Web Application Firewall if you're using that.

[01:53] Under ultimate domain names, this is where we're going to enter the domain name for my website, which is staticsite.willbutton.co. I can accept the default CloudFront certificate or I can upload my own SSL certificate. Since I'm using http only, that's not necessary.

[02:11] The default root object is going to be index.html. I want to turn logging on as well and choose the logs bucket. This time, I can choose the location because I do want to specify the bucket. For the log prefix, I'm going to choose CDN. There will be a folder called CDN created in this bucket where all my logs are stored.

[02:34] Final thing is making sure that distribution state is enabled and then we can go ahead and create that. My status has changed to deployed. A lot of times in AWS documents, it says something may take 15 minutes but it happens pretty instantly. I can tell you in this case that it did take the full 15 minutes for the deployment to complete.

[02:56] Let's test it out and see how it works. Under domain name, I'm going to expand that column so I can grab the complete URL where this is hosted. I'm going to copy that to my clipboard, open a new tab, and paste the value in, and my website loads. I need to do one more thing to complete this.

[03:15] In my AWS console, I'm going to go to route 53 which provides a DNS service for my website. I'm going to choose my domain where it's hosted. The CNAME entry for static site, it's currently pointed to the S3 bucket that's hosting it. I'm going to change that to the CloudFront to DNS name and then save that record set.

[03:35] Let's test and see if that works. We'll open a new tab, go to staticsite.willbutton.co, and the page loads. But did it load from CloudFront? Let's go see. I switched to my console. I'm going to type digstaticsite.willbutton.co. The result, you can see that the answer section includes the CloudFront distribution URLs. I can also do curl-Istaticsite.willbutton.co. You can see that it hit Amazon S3 from CloudFront in the response headers.