next.js - Requests to GET images from my NextJs frontend are being proxied by nginx - Stack Overflow

admin管理员组

文章数量:1424963

I have my NextJs (version 14.2.18) application with a frontend that fetches images that are on the public/ directory. This instance is running on my local server that has a nginx proxy. Every time the frontend requests images to the public/ directory of the same instance of the application, nginx logs this requests as a proxy. It still works, it manages to fetch the image, but since its a lot of them, I believe its highly suboptimal for the deployment.

My nginx.conf (there are two instances of the same app running):

events {
    worker_connections 1024;
}

http {
    upstream app_servers {
        server app1:3000;
        server app2:3000;
    }

    server {
        listen 80;
        
        location / {
            proxy_pass http://app_servers;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Server $host;
        }

        location /images/ {
            proxy_pass http://app_servers;
            proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504;
            proxy_cache_valid 200 30m;
            expires 30m;
        }
    }
}

And my next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'www.example',
      },
    ],
    minimumCacheTTL: 60,
  },
  crossOrigin: 'anonymous',
  
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: '/api/:path*',
      },
      {
        source: '/images/:path*',
        destination: '/images/:path*',
      },
    ];
  },

  async headers() {
    return [
      {
        source: '/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=3600, stale-while-revalidate=60',
          },
        ],
      },
    ];
  },
};

export default nextConfig;

Sample from Nginx's logs:

本文标签： nextjsRequests to GET images from my NextJs frontend are being proxied by nginxStack Overflow