Exposing s3 bucket to next-config.ts
Answered
Bigheaded ant posted this in #help-forum
Bigheaded antOP
To be able to access remote images, i need to include it over in the next-config.ts. But my images are stored in s3 bucket. This s3 bucket stores all my user's image (recipe image).
Is it safe to actually expose it over in the next-config.ts?
Is it safe to actually expose it over in the next-config.ts?
Answered by B33fb0n3
I assume you mean the "remotePattern" inside your nextjs config. You can expose your s3 origin server. However, I wouldnt do that. You pay a lot to serve files directly via your bucket. There is no caching, there is no edge, there is no ... In general a lot of things are missing there and because of that you would pay a lot.
I recommend you:
S3 = Saving files
CDN = Serving files
Thats what a CDN is made for. As CDN service you have several options:
1. Cloudfront (from AWS)
2. BunnyCDN (my personal favorite - cheap and good)
3. Cloudflare
4. ...
I recommend you:
S3 = Saving files
CDN = Serving files
Thats what a CDN is made for. As CDN service you have several options:
1. Cloudfront (from AWS)
2. BunnyCDN (my personal favorite - cheap and good)
3. Cloudflare
4. ...
3 Replies
@Bigheaded ant To be able to access remote images, i need to include it over in the next-config.ts. But my images are stored in s3 bucket. This s3 bucket stores all my user's image (recipe image).
Is it safe to actually expose it over in the next-config.ts?
I assume you mean the "remotePattern" inside your nextjs config. You can expose your s3 origin server. However, I wouldnt do that. You pay a lot to serve files directly via your bucket. There is no caching, there is no edge, there is no ... In general a lot of things are missing there and because of that you would pay a lot.
I recommend you:
S3 = Saving files
CDN = Serving files
Thats what a CDN is made for. As CDN service you have several options:
1. Cloudfront (from AWS)
2. BunnyCDN (my personal favorite - cheap and good)
3. Cloudflare
4. ...
I recommend you:
S3 = Saving files
CDN = Serving files
Thats what a CDN is made for. As CDN service you have several options:
1. Cloudfront (from AWS)
2. BunnyCDN (my personal favorite - cheap and good)
3. Cloudflare
4. ...
Answer
@B33fb0n3 I assume you mean the "remotePattern" inside your nextjs config. You can expose your s3 origin server. However, I wouldnt do that. You pay a lot to *serve* files directly via your bucket. There is no caching, there is no edge, there is no ... In general a lot of things are missing there and because of that you would pay a lot.
I recommend you:
S3 = Saving files
CDN = Serving files
Thats what a CDN is made for. As CDN service you have several options:
1. Cloudfront (from AWS)
2. BunnyCDN (my personal favorite - cheap and good)
3. Cloudflare
4. ...
Bigheaded antOP
Thank you for telling me. I am new developer, experimenting with next js and aws. If you don't mind, i would like to tell you my current flow in detail
I have an api that returns something like this
right now in the content of my API i have something like this
{
"recipeId": "gadf43124312",
"title": "Spaghetti Carbonara",
"prepTimeMinutes": 10,
"cookingTimeMinutes": 15,
"servingSize": 4,
"imageUrl":
"https://.s3.ap-northeast-3.amazonaws.com/thumbnail.jpg",
"authorName": "Clara Cook",
"authorAvatarUrl": null
},
Today, when i created my first next js project, i need to register the s3 origin server to be able to solve the "remotePattern" error. It works, but i was hesitant in exposing my s3 origin. Although, i already configured it to just allow anyone to read it but just my IAM user to update / delete
Regarding your recommendation, in my API server, I assume you are telling me that it is better to get the cached image url from CDN and return it to my API response rather than getting the actual s3 bucket object url.
Ok, i will do that ! Thank you once again for the advice
I have an api that returns something like this
right now in the content of my API i have something like this
{
"recipeId": "gadf43124312",
"title": "Spaghetti Carbonara",
"prepTimeMinutes": 10,
"cookingTimeMinutes": 15,
"servingSize": 4,
"imageUrl":
"https://.s3.ap-northeast-3.amazonaws.com/thumbnail.jpg",
"authorName": "Clara Cook",
"authorAvatarUrl": null
},
Today, when i created my first next js project, i need to register the s3 origin server to be able to solve the "remotePattern" error. It works, but i was hesitant in exposing my s3 origin. Although, i already configured it to just allow anyone to read it but just my IAM user to update / delete
Regarding your recommendation, in my API server, I assume you are telling me that it is better to get the cached image url from CDN and return it to my API response rather than getting the actual s3 bucket object url.
Ok, i will do that ! Thank you once again for the advice
happy to help