One of the popular ways of serving S3 web hosting with SSL/TLS is to use CloudFront Distributions. Cloudflare is another great choice as it is free and offers a lot of features. That’s what we are going to use today. It allows HTTPS traffic in between the clients and the Cloudflare network.

Requirements:

  • Have a valid non-expired domain (skip this if you already own a domain)
  • Enable public access on S3 permissions and config bucket policy
  • Enable version control and static website hosting on S3
  • Change to Cloudflare’s name server on the domain registrar
  • Add DNS records and config SSL/TLS on Cloudflare

Have a valid non-expired domain (skip this if you already own a domain)

It’s not important which registrar you buy your domain, as long as the domain is still valid. Personally I prefer buying the domain from Route 53, as it’s easier for me to manage the billings in one place. It also offers auto renew and privacy protection so that I wouldn’t have to worry about renewing the domain or having my personal information publicly accessible on the Internet. To buy a domain on Route 53:

  1. Open the Route 53 console.
  2. Click Registered domains on the left bar.
  3. Choose Register Domain.
  4. Enter a domain that you’d like to register. Click Check to see if the domain is available. If it’s available, click Add to cart then continue.
  5. Enter your contact information. Note that if the privacy protection is available and enabled. Your contact information won’t be publicly available. This is great if don’t want anyone that look up your domain to see your contact information.
  6. Enable the auto renew option if you want the domain to be automatically renewed and billed. Check the Terms and Conditions and proceed with the order.
  7. Now you might see you domain in the pending status on Pending requests. You can check your email inbox and verify the domain request.
  8. If everything goes well, you will see you domain on the Registered domains.

Enable public access on S3 permissions and config bucket policy

  1. Open the S3 console
  2. Select Create bucket
  3. Enter a unique name and select an AWS Region. Uncheck Block all public access so that objects in the bucket can be opened to public. Enable Bucket Versioning on the same page as this is needed for static website hosting. Click Create bucket.
  4. Select the bucket you just created, go to Properties, copy the ARN of the bucket. The ARN will be something like arn:aws:s3:::bucketname. It will be used for the next step.
  5. Go to Permissions. You should see the access is ‘Public’ under Permissions overview. Under Bucket policy, select edit and paste the following code, don’t forget to replace [ARN of the bucket] with the ARN that you just copied in the previous step:
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "[ARN of the bucket]/*"
        }
    ]
}

The above code enables every object inside this bucket to be publicly accessible. This is needed for hosting a public website. Don’t enable this on your private bucket.

  1. Go to Properties again, this time scroll down and find the section Static website hosting, choose Edit and enable static website hosting here. The hosting type is the default ‘host a static website’. For the index document, a common one would be ‘index.html’. You can leave the Error document empty if you don’t have one. The error document is what S3 will return when there is a 4XX error. Save changes to proceed.

Change to Cloudflare’s name server on the domain registrar

Now as we are trying to enable HTTPS for the S3 website with Cloudflare, we need to change the name server setting on Route 53 to Cloudflare. If you’re not using Route 53 for your domain you can look up how to change the name server setting for your registrar on the Internet. There is a guide available on Cloudflare as well.

  1. Register a Cloudflare account if you don’t have one.
  2. Select Add a site on the home page.
  3. Enter the domain name you have and click Add a site.
  4. A free plan is sufficient as of now. You can choose to upgrade for more features later.
  5. Now Cloudflare will try to scan and search the DNS records currently existed for your domain, simply click Continue to proceed with next step.
  6. Copy the Cloudflare’s name servers, it will be used for the next step. In my case, the name servers are aria.ns.cloudflare.com and darwin.ns.cloudflare.com. It might be different in your case.
  7. Go back to the AWS Route 53 console, select Registered domains and select your domain.
  8. Choose Add/Edit Name Servers, and replace the name servers with the Cloudflares’ that you copied in the previous step.
  9. Go back to the Cloudflare console, select your site, and you can initiate a name server check to speed up the process by clicking Check name servers.
  10. Once the name servers are changed, allows up to 24 hours for Cloudflare to process the update. It will also send an email to you once it’s completed. In my case, it takes less than 10 minutes.

Add DNS records and config SSL/TLS on Cloudflare

Finally we can setup the SSL/TLS settings for Cloudflare, but before that, let’s add some DNS records that points to our S3 bucket website.

  1. Go to S3 console and select your bucket, click Properties. Scroll down to the Static website hosting section and copy the Bucket website endpoint. This is the URL for your bucket and it will be used for later steps.
  2. Go to Cloudflare console, select DNS, and Add a record. There are two records to be added.

For the first record, select Type ‘CNAME’, the Name is ‘@’, Target would be the Bucket website endpoint you copied in the previous step, removed ‘http://’ from the URL and paste it in the Target. Click Save.

For the second step, select Type ‘CNAME’, this time the Name is ‘www’, the Target would be the same as the first record.

  1. Now that the DNS records are added. Select SSL/TLS and Overview on the left bar, select Flexible for your SSL/TLS encryption mode. Flexible mode doesn’t require you to install a certificate on the web server, yet still offers the benefit of the HTTPS traffic between the clients and Cloudflare network.
  2. Select Edge Certificates on the left bar, I recommend enabling Always Use HTTPS and Automatic HTTPS Rewrites. This way you can ensure that HTTPS is used whenever possible.
  3. It might take a few hours for the DNS to update the record. After that, enjoy your SSL/TLS static website hosted on S3!

If you domain is registered with Route 53, AWS will automatically create a hosted zone for the domain and charge around $0.5USD per month. Now that the DNS records are hosted on Cloudflare, the hosted zone for the domain can be safely removed.

  1. Go to Route 53 console, select the hosted zone for your domain and click Delete.