Hosting a static website on AWS S3 and Cloudflare is not only cost-effective but also easy to set up and maintain. CodeRise Technologies Inc. recently completed a project related to Disney’s movie “Wish,” where we assisted in hosting a static website on S3 with Cloudflare. This architecture design successfully met the key requirements of scalability, cost-effectiveness, security, and ease of maintenance, resulting in a highly successful end product.
To provide a better understanding:
What is AWS S3?
Amazon Simple Storage Service (Amazon S3) is an object storage service known for its industry-leading scalability, data availability, security, and performance. It enables the storage of various types of data and facilitates the hosting of static websites.
What is CloudFlare?
Cloudflare operates as a vast network of servers designed to enhance the security, performance, and reliability of anything connected to the Internet. Acting as a reverse proxy for web traffic, Cloudflare plays a crucial role in optimizing online experiences.
Prerequisites:
To embark on hosting with AWS S3 and CloudFlare, ensure you have the following:
An AWS account
A CloudFlare account
A domain registered to the CloudFlare account.
By fulfilling these prerequisites, you can leverage the combined strengths of AWS S3 and Cloudflare for an efficient, secure, and cost-effective static website hosting solution.
In your AWS account console go to the S3 bucket section and press create on the S3 dashboard:
You will create buckets named for your root domain and your subdomains. In this case our subdomain will be our “www.” domain.
Here you can see what we make two buckets called “testsite.com” and “www.testsite.com”
For both of these buckets we need allow public access as seen here:
In the buckets add in your index.html file and other files for your website. As well apply the following policy to your buckets under the permissions section.
Enabling the S3 website hosting
Now to enable the buckets to host the website you must now go into the properties section and click edit for the “Static website hosting” section.
For the root domain bucket have it redirecting to the “www.” subdomain like this:
As a result of above changes, you should have bucket endpoint websites for both.
Enabling usage of AWS S3 and CloudFlare with SSL/TLS
First, under your SSL/TLS section in CloudFlare change it to flexible as the S3 buckets can only communicate to CloudFlare on HTTP.
Next, under your DNS management section you will add in CNAME records for your root domain and for your subdomains. Name the root as ‘@’ and set its target as the generated bucket website endpoint for the root domain. Similarly, name the ‘www’ bucket and set its target as the website endpoint for its respective bucket.
After placing the CNAME records, you can now access the website hosted in the buckets from the domain you registered. So, from the names we gave the buckets we would be able to reach the website at “testsite.com” and “www.testsite.com”.
Conclusion
In this blog, we covered how to host a static website with AWS S3 and Cloudflare. We recommend this pattern as it can prove to be very effective.
Checkout our other blogs here
