如何使用 Next JS next/image 与 docker-compose 和 Minio 进行本地开发？答案

【问题标题】：How to use Next JS next/image with docker-compose and Minio for local development?如何使用 Next JS next/image 与 docker-compose 和 Minio 进行本地开发？
【发布时间】：2021-06-04 13:25:53
【问题描述】：

我正在开发一个 NextJS 应用程序，我正在使用新的 next/image 组件进行自动优化。我正在尝试设置我的本地开发环境，以便能够提供来自本地 Minio 服务的图像。整个本地应用程序通过 docker-compose 运行。

我的问题是，当 Next 尝试从 Minio 下载图像时，我收到错误消息，我不知道为什么。

这是我得到的错误：

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  | }

我知道我已经用 Minio 正确设置了所有内容，因为如果我在浏览器中打开一个简单的 HTML 文件，我的图像会显示得很好：

<!DOCTYPE html>
<html>
  <body>
    <img src="http://s3:9000/app-development/d5fc7f6b2d993e0e0eec8e2a2f4d3a50-image.jpeg" />
  </body>
</html>

我不确定接下来该做什么。任何帮助将不胜感激！

编辑：我刚刚记得/意识到我的 NextJS 应用程序是通过完全独立的 docker/docker-compose 设置在本地运行的。我想知道这是否是 NextJS 应用程序难以从其自己的容器内访问 localhost 或 s3 服务的问题...

【问题讨论】：

如果它的服务器端渲染（ssr），那么图像 url 将从容器中拉出，并且 url 可能无法访问。尝试使其客户端呈现，以便从浏览器中提取图像 url。如果您使用的是函数组件，则在 useEffects() 中初始化 url 以使其成为客户端。

标签： node.js docker docker-compose next.js minio

【解决方案1】：

您可能需要在下一个 js 项目中添加您希望从 Next.js 图像优化 API 提供的图像提供程序域。

https://nextjs.org/docs/api-reference/next/image#domains -- 为了保护您的应用程序免受恶意用户的攻击，您必须定义一个图像提供程序域列表，您希望从 Next.js 图像优化 API 提供这些域。这是在您的 next.config.js 文件中的 domain 属性中配置的，如下所示：

下一个项目的根目录中有一个名为“next.config.js”的配置文件。更新该文件并添加域如下：

 module.exports = {
  images: {
    domains: ['s3:9000', '<other_domains>'],
  },
}

此链接也可以帮助您： nextjs image docs

【讨论】：