exanubes

Static Hosting #2Creating a cloudfront distribution for an s3 bucket

This article is part of a series:

  1. Hosting a static website on Amazon S3 with SSL
  2. Creating a cloudfront distribution for an s3 bucket
  3. Fix Cloudfront 404 errors when visiting direct URLs
  4. AWS Code Pipeline with S3 Deployment from Github Repository

Thus far, we have registered a domain name and were able to launch a static website from an S3 Bucket using the aws-provided URL. In this part of the series we will create a Cloudfront distribution to increase website's availability across the globe as well as request and add an SSL certificate to attain secure https connection.

What is Cloudfront? #

Cloudfront is amazon's content delivery network. We're going to use this to have high availability and low latency website. Amazon has servers spread out accross the globe in strategic locations. When you're serving your blog from the US and someone wants to visit it from Germany, the request would have to travel to States and back which would increase latency.

To eliminate this, CDN servers will check if they have the website cached if not they will reach out to the main server and take a longer time initially but then for every other request to that CDN from anyone in that region, it will be much faster. Because the website is cached, it also means that when static files are updated, the changes take a longer time to propagate to all edge locations depending on the TTL.

Create a distribution #

When creating a Cloudfront Distribution, select the S3 bucket's url from the dropdown menu. Origin ID will populate automatically. Leave rest as default.

Origin settings

Go down to Default Cache Behavior Settings and set Viewer Protocol Policy to Redirect HTTP to HTTPS

Scroll further down to Distribution Settings and add CNAMEs for your domain, each on separate line. Usually it's www and apex e.g. www.exanubes.com exanubes.com but if you'd like to have a separate subdomain for running a blog e.g blog.exanubes.com then you should add that as well.

Select Custom SSL Certificate option and use your SSL certificate or request a new one from AWS. When requesting a certificate I'd recommend doing apex and wildcard(*) for subdomain. That way you get a certificate for all subdomains.

Request custom certificate

Scroll down until you find Default Root Object field and enter the default file that's supposed to be sent should the file path not be completely precise, usually it's index.html. For example, when visiting exanubes.com/blog/some-blog-post the file structure is actually blog/some-blog-post/index.html, but index.html is served none-the-less.

Finally, create distribution, copy the distribution's domain name and move on to Route 53 where we will Alia your domain name to point to the cloudfront distribution, once it has been deployed (look at status).(add pictures)

Cloudfront distributions list

In Route 53, Create a new A Record for all your subdomains and your apex domain. For example, www.exanubes.com and exanubes.com. Switch the Alias toggle to yes and enter the alias target - the cloudfront distribution domain name. (add pictures)

A Record alias pointing to cloudfront distribution

If you're not familiar with Route 53 you can read up on it here

Summary #

This time we've been able to serve our website via the Cloudfront CDN under our very own domain name. The website is also served on a secure and encryped connection thanks to the SSL Certificate we requested from aws. In the last article of the series we will look into issues with some endpoints and how to resolve them using Lambda functions.

Thanks!

A verification email has been sent to

Keep in Touch

Join other developers in Exanubes Newsletter

© 2022