DEV Community

Cover image for Securely host your static website in Amazon S3 using Cloudflare's CloudConnector

Securely host your static website in Amazon S3 using Cloudflare's CloudConnector

I am going to demonstrate how to use Amazon S3 to host your objects or a static website and use Cloudflare as a Content Distribution Network (CDN).

Amazon S3 is an industry-leading object storage service offering unrivaled scalability, performance, and availability.

Cloudflare is one of the leading stand-alone Content Distribution Network (CDN), Amazon CloudFront is AWS's service that offers CDN and a host of other powerful features.

Normally users would use Amazon S3 and CloudFront to achieve the demo below, but some organizations have deployed Cloudflare as a dedicated CDN service in their infrastructure

Image description

Amazon S3

We will create a simple static website: http://stellar-landing.s3-website-us-east-1.amazonaws.com

It's usually a breeze using AWS CLI or SDK since you only run a couple of commands to get up and running. As you may be aware, every service in AWS can be interacted with through an API call.

So let me demonstrate, how we can set up stellar-landing bucket using AWS CLI.

Create the bucket using AWS CLI

  • aws s3 mb s3://stellar-landing
  • Access the console and enable public access for the bucket, allowing you to run the subsequent commands. Image description
  • On your terminal, create a json file, we can name it "public-read.json" and inside it, you can place this policy which tells the bucket to allow everyone on the internet denoted by principal "*" to GET objects

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"PublicReadGetObject",
      "Effect":"Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource":"arn:aws:s3:::stellar-landing/*"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode
  • We need to run a put-bucket-policy that updates the bucket's policy to allow for accessibility to the public.

    aws s3api put-bucket-policy --bucket stellar-landing --policy file://public-read.json

  • To configure the bucket for static web hosting, you can use the put-bucket-website command:

    aws s3 website s3://stellar-landing/ --index-document index.html --error-document error.html

As you can see, AWS CLI only has three commands to get a static site hosted. I can demonstrate how to do the same via the Console (point and click)

Create the bucket using AWS Console

Image description
Log into the console, then search for Amazon S3, click on it and the click on Create Bucket. Give it a name and leave the other options as is.

Image description
Go to the permissions tab, then uncheck the checkbox for block all public access

Image description
Attach the bucket policy to enable GetObjet requests for all users (principals)

Image description
Go to the properties tab; you will need to make two key change, under Static website hosting select on Enable then under Hosting type select Host a static website

Image description
Afterwards, you'll notice an endpoint provisioned for your public bucket, it follows this pattern; the name of the bucket stellar-landing followed by s3-website-us-east-1.amazonaws.com thus the final link Link

CloudFlare CDN

Now that we have our bucket up and running, before Cloudflare's connector service, it was nearly impossible to use CloudFlare as a CDN for Amazon S3 buckets to be hosted in CloudFlare, most methods were too complex as detailed in this link by Jaroslav Link

Then came Cloud Connector Link from CloudFlare, a service that enables us to route matching incoming traffic from our static website hosted in Amazon S3 bucket Link.

Steps to enable and configure Cloud Connector

Step 1

Image description
Log in to your CloudFlare console, then under Rules, click on Select Amazon S3

Step 2

Image description
Enter your bucket URL where your traffic can be directed to the URL via CNAME, select your bucket URL from your Amazon S3 console, it should be stellar-landing.s3-website-us-east-1.amazonaws.com

Step 3

Image description

  • Configure your Cloud Connector, give it a name such as stellar-landing-cdn under If incoming requests match Select custom filter expression
  • Under When incoming requests match; Select Field as URI Full, then under Operator select Contains, then for Value enter your preferred friendly URL that you wish your bucket to be referred to e.g https://stellar-landing.nation.africa

** Step 4**

Image description

  • Still in Cloudflare under DNS menu on the left, select Records
  • Then click on Add record
  • For **Type* select CNAME, then under Name provide an ideal name for your Amazon S3 hosted website e.g stellar-landing and finally under Target, enter your S3 bucket endpoint stellar-landing.s3-website-us-east-1.amazonaws.com
  • To enable SSL for your new endpoint on Cloudflare, click the Proxy status toggle; it should change to orange. This indicates that requests will now be proxied securely through CloudFlare.

You can now securely access your statically hosted website via this link Link i.e https://stellar-landing.nation.africa as opposed to non secure Amazon S3 endpoint: http://stellar-landing.s3-website-us-east-1.amazonaws.com/

PS: The template for the static website is owned by @ajlkn Link

Billboard image

Monitor more than uptime.

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

Create a simple OTP system with AWS Serverless cover image

Create a simple OTP system with AWS Serverless

Implement a One Time Password (OTP) system with AWS Serverless services including Lambda, API Gateway, DynamoDB, Simple Email Service (SES), and Amplify Web Hosting using VueJS for the frontend.

Read full post

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay