Quick interesting story time.
So I use @cloudinary to handle image optimization and transformations on kentcdodds.com (more details: kentcdodds.com/blog/building-…). However, their pricing for bandwidth is outrageously high and with the amount of traffic I get it's...
So I use @cloudinary to handle image optimization and transformations on kentcdodds.com (more details: kentcdodds.com/blog/building-…). However, their pricing for bandwidth is outrageously high and with the amount of traffic I get it's...
... just way more than I'm willing to pay.
So I decided that since @Cloudflare is dirt cheap for bandwidth I could put that in front of @cloudinary and save big time. One problem here is that @cloudinary's HTTP cache-control header marks its images as "private" and ...
So I decided that since @Cloudflare is dirt cheap for bandwidth I could put that in front of @cloudinary and save big time. One problem here is that @cloudinary's HTTP cache-control header marks its images as "private" and ...
... doesn't provide an s-maxage value (which makes sense because @cloudinary doesn't really want you to do this). Unless I missed something, this means @Cloudflare won't be able to cache these images with those headers. So ...
... I decided to proxy @cloudinary behind my @flydotio-hosted node server under the /img via express-http-proxy (which works great). With that I can change the cache-control header to exactly what I need: public, max-age=86400, immutable, s-maxage=31536000 ...
... So I got @Cloudflare set up to cache everything on my proxy (/img/*) and things were running great. My bandwidth on @cloudinary dropped considerably as pictured and I was thinking I could downgrade my account and save a ton of money. 
But then I started noticing some images weren't loading on my blog... Cloudinary was sending me images that were jp2 (jpeg 2000) which my macbook doesn't support and if I navigate straight to the URL it just downloads rather than displays. Really weird.
I tried messing with my user agent and everything. I couldn't figure out why cloudinary was sending me the wrong image format for my user agent. That format works fine for like iPad and stuff, but not for a macbook I guess.
Finally I figured it out! Here's what happened:
1. iPad user visits a post
2. @cloudinary sends them a good image for their device 3. @Cloudflare caches the image for their device in the globally shared cache
4. I visit that blog post and get *their* cached version of the image!
1. iPad user visits a post
2. @cloudinary sends them a good image for their device 3. @Cloudflare caches the image for their device in the globally shared cache
4. I visit that blog post and get *their* cached version of the image!
The solution was simple. I just needed to add a `Vary` header to tell @Cloudflare to basically "namespace" their global cache by the "User-Agent".
I purged my @Cloudflare Cache and things are working again. Huzzah! The end.
Source code: github.com/kentcdodds/ken… 🔥
I purged my @Cloudflare Cache and things are working again. Huzzah! The end.
Source code: github.com/kentcdodds/ken… 🔥
Oh, and that's not in TypeScript yet because I haven't taken the time to setup the build tooling for TypeScript for non-remix code in my app 🤷♂️😅
Anyway, hope that was a fun story!
Anyway, hope that was a fun story!
• • •
Missing some Tweet in this thread? You can try to
force a refresh
