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
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.
- 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/*"
}
]
}
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
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.
Go to the permissions tab, then uncheck the checkbox for block all public access
Attach the bucket policy to enable GetObjet requests for all users (principals)
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
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
Log in to your CloudFlare console, then under Rules, click on Select Amazon S3
Step 2
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
- 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**
- 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 endpointstellar-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
Top comments (0)