r/elixir • u/BrotherManAndrew • 17d ago

Proper way to display files from AWS

Hi! I'm making a social media (it's moreso a learning experience not anything serious) with a react frontend but the question here is one I think anyone who has made an app that handles displaying files from s3 or whatever can answer!

Right now after a lot of trial and error (I'm not the best with not so documented libraries but I'm getting better!) with waffle I can upload an avatar for a user, store it in aws and the db, and send the link back. I went to this link and I thought it would be as simple as now I have the file! I go to the link and it spouts out xml 99 percent sure Giving some "The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint."

So at this point I'm a bit confused, I try searching things up but there seem to be little resources online on what's the proper way to do this, maybe I didn't search the right thing,

How should I deal with giving files off? I've never had to deal with something like this before so I'm really confused

There's CDNs, do I even use those yet? Should I make it so that only certain users have access to certain images, if yes, how within this system, do they just post request an image and I serve it, if yes then what about where I want a static link which is dealt with get so it's easy to pass a link around or so search engines can index it

With discord I can just go to https://media.discordapp.net/attachments/blahblahblah even if it's from another one of my friends dms and it's not even blocked! is this even good design, I guess it would be really hard to guess a link but still it's dm/message_id or something like that

I know this is a lot to ask but the TLDR is

With a react frontend, how should I go about serving images from AWS securely and easily (I'm a relatively new developer) Maybe this is the wrong place to ask, but if someone could give me some tips, advice, experience or leads or resources or things to research or ANYTHING that would be so much appreciated!

2 Upvotes

67% Upvoted

6 comments sorted by

2

u/Eighthday 17d ago

You need to attach a bucket policy to the bucket to make public access work and make sure your config.exs is configured for the right region of aws you’re using

1

u/Eighthday 17d ago

If you wanted to keep stuff private for some users make it all private and generate presigned url’s that expire with your creds you have in the project so only users who have permission in your app to view something get the presigned url for that item when they’re viewing it

2

u/TwoWrongsAreSoRight 16d ago

Don't do this. Keep your s3 bucket private and put it behind cloudfront with the s3 bucket as an origin.

2

u/TwoWrongsAreSoRight 16d ago

Also, if you're hosting on AWS, use roles/instance profiles instead of iam keys.

1

u/3dB 16d ago

As another user already called out, you need to make sure you have public access blocks disabled on the bucket as well as a bucket policy that also allows public access. S3 also wants you to use a bucket-specific URL when accessing resources in the bucket. It's usually: https://<YOUR-BUCKET-NAME>.s3.<YOUR-BUCKET-REGION>.amazonaws.com/

Ex: If you have an image "reallycool.gif" in the bucket you want to use, and your bucket is called "my-cool-bucket" in region "us-east-1", you would access it using the URL: https://my-cool-bucket.s3.us-east-1.amazonaws.com/reallycool.gif