Shrine

Broken images when using derivation endpoint + cached files

Question
#1

I’m using the derivation_endpoint plugin which is working great, however if I try to view a page with an image that is still in the cache, it shows an error.

Guessing as the image is still on S3 and has not yet been promoted.

  • How can I make derivation_endpoint work on images in the cache?
  • Or how can I upload to main storage directly? (Using Uppy JS)
  • Or is there a way I can make my page wait for the images to be promoted to storage?

Here is my view code:

<% if image_file_data.present? %>
    <%= image_file.derivation_url(:demand, 80, 80) %>
<% end %>

And the error from S3 when I try to view this image when the page loads:

<Code>AccessDenied</Code>
<Message>Query-string authentication requires the Signature, Expires and AWSAccessKeyId parameters</Message>

(Assuming this is because the credentials are for Cloudfront, not S3).

#2

So after hours of trying to fix the issue in AWS console, I realized that Shrine wasn’t setting the correct display URL for images in cache, only images in store. Doh!

Here is what fixed the issue instantly. Added “cache” to url_options:

Before:

Shrine.plugin :url_options, store: { host: Rails.application.credentials.aws[:cloudfront] }

(Because “cache” isn’t here, it defaults to the S3 URL but with a Cloudfront signature = broken images)

After:

Shrine.plugin :url_options, store: { host: Rails.application.credentials.aws[:cloudfront] }, cache: { host: Rails.application.credentials.aws[:cloudfront] }

(Hooray!)