How to use Next JS next/image with docker-compose and Minio for local development?
Question
I have a NextJS app that I am working on and I am using the new next/image component for its automatic optimizations. I am trying to set up my local development environment to be able to serve images from a local Minio service. The entire local app is running via docker-compose.
My issue is that I am getting an error from Next when it tries to download the images from Minio and I cannot figure out why.
Here is the error I am getting:
app_1 | FetchError: request to http://s3:9000/app-development/d5fc7f6b2d993e0e0eec8e2a2f4d3a50-image.jpeg failed, reason: connect ECONNREFUSED 127.0.0.1:9000
app_1 | at ClientRequest.<anonymous> (/usr/src/app/node_modules/node-fetch/lib/index.js:1461:11)
app_1 | at ClientRequest.emit (events.js:314:20)
app_1 | at Socket.socketErrorListener (_http_client.js:427:9)
app_1 | at Socket.emit (events.js:314:20)
app_1 | at emitErrorNT (internal/streams/destroy.js:92:8)
app_1 | at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
app_1 | at processTicksAndRejections (internal/process/task_queues.js:84:21) {
app_1 | type: 'system',
app_1 | errno: 'ECONNREFUSED',
app_1 | code: 'ECONNREFUSED'
app_1 | }
I know that I have everything set up correctly with Minio because my images display just fine if I open up a simple HTML file in my browser like this:
<!DOCTYPE html>
<html>
<body>
<img src="http://s3:9000/app-development/d5fc7f6b2d993e0e0eec8e2a2f4d3a50-image.jpeg" />
</body>
</html>
I am not sure what to do next here. Any help would be greatly appreciated!
Edit: I just remembered/realized that my NextJS app is running locally via a completely separate docker/docker-compose setup. I wonder if this is an issue with the NextJS app struggling to access localhost or s3 service from within its own container...
1 answers
solution1
0 2022-01-30 12:49:56
you probably need to add the image provider domains that you want to be serve from the Next.js Image Optimization API in your next js project.
https://nextjs.org/docs/api-reference/next/image#domains -- To protect your application from malicious users, you must define a list of image provider domains that you want to be served from the Next.js Image Optimization API. This is configured in with the domains property in your next.config.js file, as shown below:
there is a config file in your root directory of next project named 'next.config.js'. update that file and add domains as below:
module.exports = {
images: {
domains: ['s3:9000', '<other_domains>'],
},
}
also this link could help you: nextjs image docs
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.