Serve images in /public with a NGINX Reverse Proxy
Unanswered
West African Lion posted this in #help-forum
West African LionOP
Does anyone know which ports/network shares are needed to provide images locally with next/image i.e. the _next directory?
To block access directly through the port and only allow access through my NGINX reverse proxy, I blocked all access through port 3000 (port of the next app) and only allowed access from my reverse proxy's IP. That works, but...
Images of a remote resource can be displayed without any problems.
Unfortunately the images located locally in the /public folder do not load. There is only the error: "url" parameter is valid but upstream response is invalid.
Without blocking the general access that works too.
Does anyone have experience with how to secure a NextJS application like this?
To block access directly through the port and only allow access through my NGINX reverse proxy, I blocked all access through port 3000 (port of the next app) and only allowed access from my reverse proxy's IP. That works, but...
Images of a remote resource can be displayed without any problems.
Unfortunately the images located locally in the /public folder do not load. There is only the error: "url" parameter is valid but upstream response is invalid.
Without blocking the general access that works too.
Does anyone have experience with how to secure a NextJS application like this?
3 Replies
are you Using Next's Image Component to load the images? if yes then in which way you are passing src attribute to it, like '/myimgae.png' or 'https://example.com/myimage.png'
@ShriekDj are you Using Next's Image Component to load the images? if yes then in which way you are passing src attribute to it, like '/myimgae.png' or 'https://example.com/myimage.png'
West African LionOP
I use next/image. Images are loaded from external resources aka "https://...". Only images that are integrated locally in the /public folder ("/images/....png") do not load. Should I change all images to an absolute URL?
@West African Lion I use next/image. Images are loaded from external resources aka "https://...". Only images that are integrated locally in the /public folder ("/images/....png") do not load. Should I change all images to an absolute URL?
yeah, i am suggesting that you should try changing the image component src to absolute url because next js first finds a file under it if it has access while running under 3000 port for processing like converting it to webp and making srcset, but making it absolute url resolves the issue because the content under public is fetched through reverse proxy.