Step by step instructions on how to use CloudFront as a reverse proxy to point a subdirectory to an S3 static site.
This solution is often a more suitable choice than self-hosting a content management system such as WordPress, which requires maintenance and updates, scaling configuration, and incurring the cost of running one or more virtual machines (ie. EC2).
The challenge we faced when deciding to go the S3 static site route for this blog, was the undesirable scenario of having to point a subdomain to the bucket - https://blog.uphail.com. Using a subdomain bifurcates the website, which may have SEO implications according to the age-old subdomain vs. subdirectory debate. Evidence suggest that the subdirectory is the more desirable approach. Furthermore, subdomains add additional overhead such as separate profiles for Google Search Console and configuring cross domain tracking in Google Analytics.
Our www and apex domain - https://www.uphail.com/ point to a CloudFront distribution in front of our Elastic Loader Balancer (ELB) as our application runs on EC2 instances via Elastic Beanstalk.
The solution we implemented in order to have https://www.uphail.com/ point to our ELB and https://uphail.com/blog point to S3, is by using CloudFront multiple origins, similar to the reference architecture below:
Here are step by step instructions how we configured it:
In conclusion, S3 is a great place to host a blog, and you can use the subfolder approach as we have done by using CloudFront as a reverse proxy.
Questions, comments, feedback: info at uphail dot com.