node.js - 在生产服务器上部署后，Nextjs 不使用图像 url 获取图像

Question

对于生产部署，我们有一个由 3 台 Linux 机器组成的网络。其中两个用于部署，一个是 nginx 代理。对于开发部署，我们有一台单独的 Linux 机器。

在前端(这是一个 nextjs 框架)中，设置了一个 http-proxy-middleware 来解析浏览器的 cors 请求。以下是 http-proxy-middleware 的代码:

import { API_URL } from "../../../config/";
import { createProxyMiddleware } from "http-proxy-middleware";

// Create proxy instance outside of request handler function to avoid unnecessary re-creation
const apiProxy = createProxyMiddleware({
  target: `${API_URL}`,
  changeOrigin: true,
  pathRewrite: { [`^/api/proxy`]: "" },
  secure: false,
});

export default function handler(req, res) {
  console.log(
    `Method: ${req.method} URL: ${req.url} Status Code: ${res.statusCode}`
  );
  apiProxy(req, res, (result) => {
    if (result instanceof Error) {
      throw result;
    }

    throw new Error(
      `Request '${req.url}' is not proxied! We should never reach here!`
    );
  });
}
export const config = { api: { externalResolver: true, bodyParser: false } };

要获取图像，我们只需在 next/image 组件的 src 属性中提供图像 url。像这样:

<Image
      src={currentImage.imageurl}
      alt={currentImage.imageurl} 
      layout="fill"
      className={styles.imageSize}  />

这是 next.config.js 文件:

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ["exam105.s3.amazonaws.com"],
  },
  async headers() {
    return [
      {
        source: "/(.*)",
        headers,
      },
    ];
  },
};

正如您在上面的 next.config.js 文件中看到的，我也添加了图像的域。而且我还取消了 dockerfile 中这一行的注释，以上传 next.config.js 文件中的更改: COPY --from=builder /app/next.config.js ./这就是为什么 当前端部署在开发服务器上时，图像被获取并显示在浏览器上。但是，当前端部署到生产环境时，并没有显示图像，而是弹出错误:在浏览器上，它给出 500 Internal Server Error .这是出现在 nginx 日志中的错误:

"GET /_next/image?url=https%3A%2F%2Fexam105.s3.amazonaws.com%2Fimage.jpg&w=128&q=75 HTTP/1.1" 500 32 "https://exam105.com/search/6176cdfe27612732e98a25d9/6176cdfe27612732e98a25d6" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62"

并且前端日志打印出这个错误:

FetchError: request to https://exam105.s3.amazonaws.com/image.JPG failed, reason: getaddrinfo EAI_AGAIN exam105.s3.amazonaws.com
     at ClientRequest.<anonymous> (/app/node_modules/node-fetch/lib/index.js:1461:11)
     at ClientRequest.emit (node:events:390:28)
     at TLSSocket.socketErrorListener (node:_http_client:447:9)
     at TLSSocket.emit (node:events:390:28)
     at emitErrorNT (node:internal/streams/destroy:157:8)
     at emitErrorCloseNT (node:internal/streams/destroy:122:3)
     at processTicksAndRejections (node:internal/process/task_queues:83:21) {
   type: 'system',
   errno: 'EAI_AGAIN',
   code: 'EAI_AGAIN'
 }

正如我们从 nginx 日志中的错误中看到的那样，图像 URL 是用某些字符编码的，在我看来这可能是问题所在。当我通过单击浏览器中损坏的图像进入检查元素时，此 url 也可见。前端发送编码的 url 而它没有被解码从而抛出错误。 我们如何去除 next/image 组件的编码？或者如果无法阻止编码，我们如何在我们的架构上下文中对其进行解码？因为我尝试更换 <Image.../>与 <img.../>标签和图像也开始显示在部署在生产环境中的前端。而这一次，当我在浏览器中检查图像时，没有在 URL 中看到任何编码。所以 next/image 组件正在做编码，但是当部署在生产服务器上时它不会被解码，但是当它部署在开发服务器上时，它会被解码并且图像也可以使用 next/image 组件看到.

我希望你能理解这个问题。如果不清楚，请发表评论。谢谢。

Answer 1

看起来 next 的加载器正在对 url 进行编码，要解决这个问题，您可以定义自己的加载器，它只返回 src，如下所示:

  const loaderProp =({ src }) => {
    return src;
  }

然后在您的 <Image> 中引用它作为:

<Image
      src={currentImage.imageurl}
      alt={currentImage.imageurl} 
      layout="fill"
      className={styles.imageSize} 
      loader={loaderProp} />