How to host a static website using AWS S3 and Cloudflare


How to host a static website using AWS S3 and Cloudflare

I’ve been noticing a previous post about how to host a static site using various AWS services has been gaining in popularity.

Most recently a blog post by Thom Greene (@tbgree00) had mentioned the previous article and while all the steps in the previous post are accurate and works – I wanted to share how I now host static websites using AWS S3 and Cloudflare.

But first, why the change? It’s a simpler process.

In the previous post several AWS services (Route 53, Cloudfront, & Cert Manager) was needed to do what Cloudflare does by itself. It’s also cheaper as there is a cost that comes with Route 53 and Cloudfront, whereas Cloudflare is FREE.

It is more secure. In the previous post we created an S3 bucket and gave it public read access, using the process detailed below the bucket is no longer publicly accessible and only accessible if coming through Cloudflare. This ensures no one can try to side step all the protections that Cloudflare offers when trying to reach my static sites.

Requirements before getting started:

  • An Amazon Web Services account.
  • Domain name – I use and suggest either Namecheap or NameSilo to register new domains if you haven’t already. (Use coupon SAVE1OFFNAMESILO at NameSilo to save $1.00)
  • Already have a static HTML page designed and ready to upload.

Host a static website using AWS S3 and Cloudflare

Amazon S3 Bucket Setup

and set an index and error document file names and click SAVE. Be sure to make note of the bucket endpoint URL

AWS S3 non-www bucket setup

We need to create a second S3 bucket so that when users try to access domainname.com they will be redirected to www.domainname.com.

s3 static website redirect

  1. Create a second S3 bucket with the same name as your domain name, this one WITHOUT the www.
  2. Enable static website hosting for the bucket, but this time set it to redirect to your www.domainname.com bucket.

That’s it for the second bucket, now lets setup Cloudflare!

Cloudflare Setup for your static HTML site

Then type in your domain name and click on “Add Site“.

  • Create a CNAME record with the name www and for the server field enter the www.yourdomain.com bucket endpoint URL without the https://
  • Create a second CNAME record with the name of your domain (without the www.) and for it’s server field enter the yourdomain.com bucket endpoint URL, also without the https://

At this point you’ll just need to wait for DNS to update. This could potentially take 24-48 hours, but in most cases this is much faster.

There you have it, you now have a static website being hosted on S3 and the protections and speed improvements from Cloudflare.

Similar Posts

Backup Synology NAS to Amazon Glacier

Recently I replaced my Synology DS1815+ with a new Synology DS1621+ NAS.

After migrating all the data from the old to new NAS and re-setting up Backblaze on the new Synology, I wanted to have a second backup of everything… just in case.

If you already have an AWS account and want to know how to backup your Synology NAS to Amazon Glacier then keep reading.

Passed: AWS Solutions Architect – Associate Exam Tips

aws-solutions-architect-associate

Yesterday morning I finally took the AWS Solutions Architect – Associate and even managed to pass it!

While everything about the exam is still fresh in my mind I wanted to share my experience taking the Solutions Architect – Associate exam as well as share a few tips that certainly helped me in taking the exam in hopes that it might help others as well.

How to migrate a VMware virtual machine to AWS

Migrate VMware VM's to AWS

At work we’ve been toying with the idea of moving some of our VMware workload off to AWS and I’ve been tasked with migrating a couple VMware virtual machines to AWS as a proof of concept for the time being.

In this post I’ll show how I setup the AWS Connector and did the migration from VMware to AWS using the AWS Server Migration Service.

How to host a static website using AWS S3, CloudFront, Route 53 and Cert Manager

In addition to running this blog I also run several online forum communities, but in the past I never had a place to showcase these communities in one place. This post will detail my steps I took to host a static website using AWS S3, CloudFront, Route 53 and Certificate Manager to showcase those communities all in one place. All without the need to worry manage another server.

Requirements before getting started:

  • An Amazon Web Services account.
  • Domain name – I use and suggest either Namecheap or NameSilo to register new domains if you haven’t already. (Use coupon SAVE1OFFNAMESILO at NameSilo to save $1.00)
  • Already have a static HTML page designed and ready to upload.

So briefly I’ll explain why I choose these services and what they will offer.

How to add Security Headers to an AWS S3 static website

How to add Security Headers to an AWS S3 static website

I’ve created a couple posts in the past on how to create a static website using AWS S3 bucket and Cloudfront and using S3 with Cloudflare. Recently I’ve been getting more questions on how to add security response headers to an AWS S3 static website.

If you’re not familiar with security headers, basically security headers is another layer used to protect your websites. Web.dev has a good article here is a good article on many of the popular security header types. You’ll also want to check out securityheaders.com to easily check the security headers of your own site too.

With that, lets see how to add these security headers to your own static website.

How I backup my VPS servers to AWS S3 bucket

VPS backup to AWS S3 bucket

Lately I’ve been asked or seen questions regarding how to backup a WordPress site or VPS server. I know many use WordPress plugins, though I’m not a fan of this process.

My answer has always been that I use a script that backups up my website files and databases to an AWS S3 bucket. While I’ve shared the scripts with a few people that have asked, I figured I’d make a post and share the information with everyone.

In this post I’ll share my setup on how I backup all the VPS servers I manage to Amazon S3 buckets.

Leave a Reply Cancel reply

54 Comments

Thanks for the guide.

If you also use the domain for mail (e.g. via G Suite), does not having an A record affect mail delivery (e.g. recipients flagging your email as spam)?

I keep getting “Invalid hostname: Use ‘@’ to represent the root domain.” at step 8 and can’t create any of the 2 CNAME records recommended there. Are you sure a step was not skipped? Maybe there should be a record there already before we can create those records in step 8. Any ideas?

Make sure you’re creating a CNAME record and not another type of record. Also make sure you are NOT including the http:// in the CNAME value field.

I had the same problem. Took me a while to work out that the bucket endpoint URL you get when you create it is different from the path of the data uploaded.

When you get the location of index.html, for example, it shows up as
s3-website-ap-southeast-2.amazonaws.com/www.domain.com.

This won’t work in Cloudflare, though. There, it has to be formatted as
http://www.domain.com.s3-website-ap-southeast-2.amazonaws.com, as this is the endpoint you get when the bucket is created.

I had to delete the bucket and start again to get it to work.

I guess that works, though it does waste a bucket for every variation of domain name you want to point at that bucket. Even though the 100 bucket limit is a soft limit, it’s still sort of annoying. Thanks for the article.

I too wish AWS would offer a better way of handling this, even the ability to hide the extra bucket would be nice.

Thanks for a great article, I’ll definitely be implementing this into my next website. Will this work for user generated content? I have an s3 bucket which I want to use that will allow users to upload images. These images will be deleted after 1 calendar month, however I want to make sure that I’m taking as many precautionary measures as I can in the event that my website was targeted.

I completed all the points.
Result:
1) http://www.mydomain.com – is working
2) mydomain.com – is not working

Maybe my site is not working because this is wrong?

When you try to go to “mydomain.com” are you getting any kind of error message?

I am facing the same error and I gave a try to curl:

➜ ~ curl -X GET http://instadetox.org -vvv
Note: Unnecessary use of -X or –request, GET is already inferred.
* Could not resolve host: instadetox.org
* Closing connection 0
curl: (6) Could not resolve host: instadetox.org

So long as you’ve followed the above instructions as listed you should be good. Curious, have you made any changes to any of the Cloudflare settings?

In CLOUDFLARE on the SSL/TLS tab what is your SSL set to (Off, Flexible, Full, or Full Strict)?

I tried with ssl flexible. Same otuptu of curl.

That’s what it should be set to, the default value of “Flexible”.

Recently, I made the decision to migrate my site from 1and1 (host and domain registrant) to Cloudflare and AWS. After doing so, I started scouring the net for tutorials on how to set these services up to talk to each other and get my content back online. I read a lot of confusing things and did a lot of even more confusing things in the process.

This article cleared up some of that confusion and I appreciate you creating it.

But with that, I do have a few questions.

1. Since Cloudflare is my new domain registrant, I assume I won’t be doing anything with list #9, Change Your Nameservers.

2. If I understand correctly… the CNAME in the DNS on Cloudflare are setup to target the S3 End Points. This creates the handshake from Cloudflare to S3. And the bucket policy applied to the http://www.mysite.com means that all calls for information will be routed through Cloudflare’s IPs and anything not from those IPs will be prevented access. So the Access should say “Objects can be public” correct? Do I need to add the policy to both buckets or just the one acting as the host bucket?

3. After following these steps; I’m am getting an error. Error 522, Connection timed out. It’s showing that it’s going through Cloudflare, but that I’m not connected to the host. I only have one index.html file on the server for the time being. For testing reasons, it’s a redirect that will connect to Google when the connection is made.

Thanks again for the great article. I appreciate the effort it took to get it put together and shared with noobs like myself.

So if I follow what you are saying here I do not need to set the bucket public as it is all handled through the bucket policy that allows access only to the cloudflare IPs


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *