Let's say that users' avatars are uploaded and stored on the Amazon S3 and we have a domain called mywebsite.com
and I want to use CloudFlare
in order to cache the files from the S3 bucket. How would I do that?
The docs that we can find on the cloudflare site are rather implicit and I had to google quite a lot to make it work. So here's my solution that may not be comprehensive but it may be good enough to get started.
Create a bucket called avatars.example.com
Set the following policy on it.
{
"Version": "2012-10-17",
"Id": "http referer policy",
"Statement": [
{
"Sid": "CloudFlare Requests",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::avatars.example.com/*",
"Condition": {
"IpAddress": {
"aws:SourceIp": [
"173.245.48.0/20",
"103.21.244.0/22",
"103.22.200.0/22",
"103.31.4.0/22",
"141.101.64.0/18",
"108.162.192.0/18",
"190.93.240.0/20",
"188.114.96.0/20",
"197.234.240.0/22",
"198.41.128.0/17",
"162.158.0.0/15",
"104.16.0.0/13",
"104.24.0.0/14",
"172.64.0.0/13",
"131.0.72.0/22",
"2400:cb00::/32",
"2606:4700::/32",
"2803:f800::/32",
"2405:b500::/32",
"2405:8100::/32",
"2a06:98c0::/29",
"2c0f:f248::/32"
]
}
}
}
]
}
This restricts access to the bucket to the Cloudflare IPs only, which are taken from their docs (you may want to check for updates). The Id
and Sid
can contain any description you want.
Add a CNAME record in the CloudFlare
DNS manager. Name should be avatars
and value avatars.example.com.s3.amazonaws.com
Now, if you want to access a file in the bucket with a path like user/1/avatar.jpg
from your
website, use the following src: https://avatars.example.com/user/1/avatar.jpg
It's worth pointing out that it may be required to change the SSL level from Full(Strict)
to Full
in the CloudFlare
dashboard if HTTPS is used.