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.
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.
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)
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)
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.