using subdomain for s3 bucket but domain is hosted with vercel

[thorn dagger]

How do i for example have example.com with vercel but maybe i want cdn.example.com for s3 bucket with aws? i've been trying but still cant make it work..

[odd sundial]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[raven nest]

have you tried to create a CNAME record?

[thorn dagger]

yup but more confuse is, do i set it on vercel like cdn.example.com or aws side?

[raven nest]

where is your domain hosted?

[thorn dagger]

vercel

[raven nest]

create it on vercel

[thorn dagger]

created media CNAME cname.vercel-dns.com.

[raven nest]

what is that?

like this

[thorn dagger]

oo, i added here thats why they say create media CNAME cname.vercel-dns.com.

🫠

[raven nest]

where is that?

you should add it in DNS records

[thorn dagger]

i've added media cdn with bucket value

so if i visit media.example.com its saying 404 not_found

404: NOT_FOUND
Code: DEPLOYMENT_NOT_FOUND
ID: sin1::92c4p-1711068857287-e457b4043b0d

[raven nest]

what is your bucket value?

[thorn dagger]

hyperfuse-media-storage-aliyakhbar-mybucket-cecrctoa.s3-website-ap-southeast-1.amazonaws.com

[raven nest]

could you show the record?

of the cname

[raven nest]

nslookup media.example.com
and what do you see?

run it on terminal

[thorn dagger]

-removed

[raven nest]

look like it is set

[thorn dagger]

so in my s3 static website hosting, i should point it to to media.xxx.com?

[raven nest]

you have a site hosting on s3?

[thorn dagger]

do i need to set anything on aws side?

[raven nest]

no

[raven nest]

this is your s3 bucket url right?

[thorn dagger]

err base on what im reading they say i have to on this?

if i dont have to turn this on, then how do i get the url?

am i not suppose to use that + cloudfront?

[raven nest]

how did you get this url?
hyperfuse-media-storage-aliyakhbar-mybucket-cecrctoa.s3-website-ap-southeast-1.amazonaws.com

[thorn dagger]

from Static website hosting

i enabled it just now

and it creates a url for me

if i enable

[raven nest]

it redirect me to other site

[thorn dagger]

im confused 🤣

so what url do i have to put at vercel cname?

bucket url? but how do i get that?

[raven nest]

choose host a static website

and put media.example.com to host name

[raven nest]

is your hompage on index.html?

[thorn dagger]

no, i got no page tho

i just wanna run a s3 bucket using a subdomain that is hosted at vercel

[raven nest]

oh then you don't need to enable it

[thorn dagger]

okay so i have hyperfuse.studio as my main site right ~

then i just wanna use media.hyp... as s3 bucket cdn?

[raven nest]

yeah

[thorn dagger]

so the thing is, what url do i put with media cname then

[raven nest]

http://s3.amazonaws.com/[bucket_name]/
http://[bucket_name].s3.amazonaws.com/

hyperfuse-media-storage-aliyakhbar-mybucket-cecrctoa.s3.amazonaws.com

this one

[thorn dagger]

okay added

[raven nest]

it should work

[thorn dagger]

let me try

[thorn dagger]

hmm how to fix the https thingy ?

[raven nest]

I think you need to create a cloudfront distribution for your bucket

and set media.example.com as a alternative name

then change the value to the cloudfront address in DNS record on vercel

[thorn dagger]

hmm okay, lemme try

[raven nest]

but it will double the cost
the cost on cloudfront and the cost on vercel for bandwidth

[thorn dagger]

whats the best solution

[drifting surge]

@thorn dagger Use CloudFront on a private S3 bucket using OAC. Adding a custom domain to CloudFront is much easier, and it should even make you a free SSL certificate. https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.SimpleDistribution.html

This is how you can use a CNAME in Vercel DNS to point at your CloudFront distro https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/using-https-alternate-domain-names.html

It does not make an SSL certificate automatically but you can request a free one from ACM to use with CloudFront. You basically just say you want to use SNI and choose the generated cert. https://docs.aws.amazon.com/acm/latest/userguide/gs-acm-request-public.html

The DNS verification is still pretty easy with Vercel DNS, you just add the verification records it tells you to

The price is not even bad, data egress from S3 to CloudFront is free! https://aws.amazon.com/s3/pricing/

[thorn dagger]

@drifting surge in your opinion should i use WAF when creating distribution?

[drifting surge]

@thorn dagger for your case I think maybe the WAF wouldn't have much to do, there is not really a web app or anything to hack on your S3 origin

[thorn dagger]

hmm make sense, then i can turn it off cause i saw while i was testing im getting charged $5 + for waf

so i've finally able to create ACM, im trying to assign the acm to my cloudfront now

[drifting surge]

yeah, definitely not worth that. It is more for if you have like a wordpress site behind cloudfront and it will try to filter out common/known exploit traffic

everything in AWS is really a headache

[thorn dagger]

yes 😦

so basically

on vercel side, i just need to create cname pointing to s3 bucket url

then create cdn for that bucket

then im good to go?

[drifting surge]

so yeah, you get the ACM cert for like cdn.yoursite.dev

then in vercel make the cname for cdn -> 1234543.cloudfront.net

and tell the cloudfront distro to use the ACM cert for requests from your custom domain

the main (and non-negligible) risk of using AWS is that there is not way to set a hard upper limit on budget

One kind of legit attack is to use a botnet to just like download a bunch of crap from your CDN and run up the bill

[thorn dagger]

im confused again AHHAA

so we have this

[drifting surge]

yeah that is not right

[thorn dagger]

^ on vercel

i need to add d146bq8hgj23er.cloudfront.net too?

[drifting surge]

exclusively

delete the url for the s3 bucket

wait 60 seconds... profit?

[thorn dagger]

[drifting surge]

delete the cname for media

[thorn dagger]

okay

so i add new one, media > cname > cloudfront url?

[drifting surge]

yeah

exactly

I have an application with a lot of images in S3 and use twicpics as the cdn instead of cloudfront

it has a handy url scheme for resizing/compressing images

[thorn dagger]

whats your recommendation tho

i just wanna store

[drifting surge]

its ok, I know how to use cloudfront & s3 for a reason too

[thorn dagger]

it works now!

https://media.hyperfuse.studio/media/ab842c44-d259-4050-9893-92cd9bc0f65c

[drifting surge]

there you go!

[thorn dagger]

i read too many tuts/docs on this with 0 leads

🤣

[drifting surge]

AWS can be really frustrating

friendly life advice: if you ever consider using S3 object lambdas please seriously consider an image CDN instead ☠️

https://aws.amazon.com/blogs/aws/introducing-amazon-s3-object-lambda-use-your-code-to-process-data-as-it-is-being-retrieved-from-s3/

[thorn dagger]

you lost me at object lambdas 🤣

[drifting surge]

they are a kind of... the raw materials to process media before serving it, just not convenient

[thorn dagger]

will take note on this!

[drifting surge]

it can be handy to store the size of images in the filename if you don't keep the size anywhere else

because your image component can always parse the sizes out and do stuff like have the right aspect ratio

without making a fetch

The Storyblok CDN encodes the original dimension info the URLs it provides https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/

but you can fake it using names (ahem, keys) of files in S3