Image from AWS not displaying on fly.io, but does on localhost

Questions / Help
1

The above is the result of the code below. But the identical html displays the image on localhost.

<img src="/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaXdEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--0d3460760fbe341400c9afea68f94694cd9cdbb7/1917%20Los%20Angeles%20City%20Directory.%20p2557.%20Restaurants.jpg">

The html.erb

  <%= image_tag url_for(@doc.image) %>

Live log


[Removed <timestamp> app[90801e0dbe9418] lax [info]]
 => Booting Puma

 => Rails 8.0.0 application starting in production

 => Run `bin/rails server --help` for more startup options

 Puma starting in single mode...

 * Puma version: 6.4.3 (ruby 3.3.6-p108) ("The Eagle of Durango")

 * Min threads: 3

 * Max threads: 3

 * Environment: production

 * PID: 322

 * Listening on http://0.0.0.0:8080

 Use Ctrl-C to stop

 [1b91d72a-3bb5-4d28-9e50-ffad5e3e316d] Started GET "/docs/172" for 66.241.124.137 at 2024-11-13 01:11:26 +0000

 [1b91d72a-3bb5-4d28-9e50-ffad5e3e316d] Processing by DocsController#show as HTML

 [1b91d72a-3bb5-4d28-9e50-ffad5e3e316d] Parameters: {"id"=>"172"}

 [1b91d72a-3bb5-4d28-9e50-ffad5e3e316d] Rendered layout layouts/application.html.erb (Duration: 282.1ms | GC: 94.4ms)

 [1b91d72a-3bb5-4d28-9e50-ffad5e3e316d] Completed 200 OK in 338ms (Views: 233.0ms | ActiveRecord: 93.8ms (22 queries, 3 cached) | GC: 94.4ms)

 [f0db3397-a7f5-4041-81e8-47d54d731e9e] Started GET "/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaXdEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--0d3460760fbe341400c9afea68f94694cd9cdbb7/1917%20Los%20Angeles%20City%20Directory.%20p2557.%20Restaurants.jpg" for 66.241.124.137 at 2024-11-13 01:11:26 +0000

 [f0db3397-a7f5-4041-81e8-47d54d731e9e] Processing by ActiveStorage::Blobs::RedirectController#show as JPEG

 [f0db3397-a7f5-4041-81e8-47d54d731e9e] Parameters: {"signed_id"=>"eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaXdEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--0d3460760fbe341400c9afea68f94694cd9cdbb7", "filename"=>"1917 Los Angeles City Directory. p2557. Restaurants"}

 [f0db3397-a7f5-4041-81e8-47d54d731e9e] Redirected to https://crores5.fly.storage.tigris.dev/uvwpojbpwz8334apv7mf1fcnmp83?response-content-disposition=inline%3B%20filename%3D%221917%20Los%20Angeles%20City%20Directory.%20p2557.%20Restaurants.jpg%22%3B%20filename%2A%3DUTF-8%27%271917%2520Los%2520Angeles%2520City%2520Directory.%2520p2557.%2520Restaurants.jpg&response-content-type=image%2Fjpeg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASTLUUACC44INHNNI%2F20241113%2Fus-west-1%2Fs3%2Faws4_request&X-Amz-Date=20241113T011127Z&X-Amz-Expires=300&X-Amz-SignedHeaders=host&X-Amz-Signature=ec8503a5d265d2b043bbafcf703753e4f172044c8cb8cfcfa9a8f446b27173a5

 [f0db3397-a7f5-4041-81e8-47d54d731e9e] Completed 302 Found in 41ms (ActiveRecord: 3.3ms (1 query, 0 cached) | GC: 0.6ms)

Thanks for any help

2

aws or tigris? what does your console log show? It might be blocked by origin?

3

I thought what I attached were the logs. If they aren’t how do I get them?

4

browser logs

5

browser console only shows application.starting and application.start. No errors.

But until now I didn’t see `Response was blocked by CORB (Cross-Origin Read Blocking)
Cross-Origin Read Blocking (CORB) blocked a cross-origin response.

1 request

1917%20Los%20Angeles%20City%20Directory.%20p2557.%20Restaurants.jpg
`
which I had suspected, but now know that’s the problem.

How do I fix that? When I looked before, I saw that it should just work. I way over my head on this. But before you go too far, let me and ChatGPT have a go at it.

Thanks for pointing me in the right direction.

6

Worked through recommendations for setting up S3. Should the URL for “AllowedOrigins” “http://www.example1.com” be https://croatian-restaurants-la.fly.dev/? Doesn’t seem to make a difference.

Are there settings at fly for CORS at S3?

7

You say S3 but why is it going through tigris.

8

I wondered about that, and glad you pointed it out. Suggests problem is with fly set-up. More digging

9

Where would the settings to serve images from S3 be? At fly.io or in Rails?

I’ve tried about everything ChatGPT came up with to no avail. This can’t be that unusual. I’m serving images from S3.

10

if chatGPT is lost, the likelihood of someone knowing the answer is slim… you serve S3 images by literally pointing to its resource URI. Your application is doing something weird.

11

What is the value of config.active_storage.service in config/environments/production.rb? Can you share your config/storage.yml file?

12

config.active_storage.service = :amazon

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

amazon:
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  region: us-west-1
  bucket: crores5 # -<%= Rails.env %> # Breaks localhost

Note that these settings work on localhost.

fly site

13

So my guess on what is happening here is that at some point during the launch we provided the option to use tigris, and it wasn’t super obvious how to decline and now you have a tigris bucket and a number of secrets were set to make this work. Since your configuration is correct, I’m guessing that those secrets take precedence (I don’t know this for sure, but it is a reasonable guess.)

If you run fly secrets list you should see something like:

 % fly secrets list
NAME                 	DIGEST          	CREATED AT 
AWS_ACCESS_KEY_ID    	e940a3b07537d2f4	3m40s ago 	
AWS_ENDPOINT_URL_S3  	85e8ac62d7de0c23	3m40s ago 	
AWS_REGION           	274e16452b90854d	3m40s ago 	
AWS_SECRET_ACCESS_KEY	0a76aa4996e38604	3m40s ago 	
BUCKET_NAME          	4f759d8b6e70e598	3m40s ago 	
RAILS_MASTER_KEY     	8ef9d9e6fe817aea	3m41s ago

And fly storage list will return something like:

% fly storage list
NAME            	ORG      
winter-leaf-9890	personal

Since you are not using tigris, run fly storage destroy winter-leaf-9890 (substituting your name).

Finally, run:

fly secrets unset AWS_ACCESS_KEY_ID AWS_ENDPOINT_URL_S3 AWS_REGION AWS_SECRET_ACCESS_KEY BUCKET_NAME
1 Like
14 
âžś fly secrets list
NAME                    DIGEST                  CREATED AT       
AWS_ACCESS_KEY_ID       39c0deabd802f689        Nov 7 2024 23:25
AWS_ENDPOINT_URL_S3     85e8ac62d7de0c23        Nov 7 2024 23:25
AWS_REGION              274e16452b90854d        Nov 7 2024 23:25
AWS_SECRET_ACCESS_KEY   5663dff34a86660b        Nov 7 2024 23:25
BUCKET_NAME             29506611440743e7        Nov 7 2024 23:25
DATABASE_URL            38ebd05b48bb5304        Nov 7 2024 23:25
RAILS_MASTER_KEY        0e2a859d2b14ed02        Nov 7 2024 23:25

Same except DATABASE_URL, presumably postgres

âžś fly storage list
NAME                    ORG      
still-night-7784        personal
wandering-frog-7234     personal
old-breeze-7415         personal
solitary-rain-3531      personal
divine-dream-9627       personal

All seem to be associated with this project. So somehow in my floundering I created all of these and they are all tigris?

If I look at (https://fly.io/apps/croatian-restaurants-la/machines None of these are listed. Also looked at Sign in to Your Account · Fly and none of these are listed. This is all over my head, but they show up in my project and not here.

Update which answers some of my questions:

image
image1258Ă—760 58.3 KB

@rubys rubys Thank you. Thank you. Thank you. Works now. Although now still have CORB issues on other pages, but that’s for another thread.

15

Yes. If you aren’t currently using them, delete them. If you ever change your mind, you can create a new tigris bucket with a single command…

16

I did delete them all and ran the secrets unset and that problem is solved. CORS issues on other files. A subject for another post if I can’t figure it out.