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.