image icon indicating copy to clipboard operation
image copied to clipboard

Nuxt Image (_ipx) Not Working Externally with PM2 & Nginx

Open Trevor-Okwirri opened this issue 9 months ago • 3 comments

I'm running a Nuxt 3 app in production using PM2 (cluster mode) and Nginx as a reverse proxy. When making internal requests (curl -I http://localhost:3000/ipx//logo/my-image.png), the image loads fine. However, when accessing externally (https://app.xyz.com/ipx//logo/my-image.png), I get a 404 Not Found error.

This issue occurs only in production on external requests. But on internal request no issues. In development (npm run dev), images work fine.

Steps to Reproduce: Start a Nuxt app with @nuxt/image using pm2 in cluster mode: pm2 start ecosystem.config.js

Set up Nginx as a reverse proxy:

`server { listen 80; server_name app.xyz.com;

location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location /_ipx/ {
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

Try accessing the image: Works locally: curl -I http://localhost:3000/_ipx/_/logo/my-image.png

Fails externally:

curl -I https://app.xyz.com/_ipx/_/logo/my-image.png

Trevor-Okwirri avatar Mar 01 '25 22:03 Trevor-Okwirri

I've got the same problem but can't reproduce it when using a cloudflare tunnel but on my production server which uses HAProxy/PM2 it doesn't work anymore. I have a click handler on the images to download them.

pnpm dev --tunnel : images can be downloaded pnpm build && node .output/server/index.mjs and pnpm untun tunnel : images can be downloaded tar cf output.tar .output && scp remotehost && unpack && pm2 start webapp : images can't be download, path to the image doesn't have the /_ipx/_/ part. Manually adding the /_ipx/_/ part into the url downloads/show the image.

------------------------------
- Operating System: Linux
- Node Version:     v22.12.0
- Nuxt Version:     3.15.1 tried with 3.15.4
- CLI Version:      3.22.2
- Nitro Version:    2.10.4
- Package Manager:  [email protected]
- Builder:          -
- User Config:      modules, devtools, app, future, experimental, compatibilityDate, nitro, eslint, image, security, vite
- Runtime Modules:  @nuxt/[email protected], @nuxt/[email protected], [email protected], @nuxt/[email protected]
- Build Modules:    -
------------------------------

puzzle-it-nu avatar Mar 02 '25 16:03 puzzle-it-nu

Ok, I now have it working again, no idea what fixes it, seems rather flaky, will keep an eye on it.

puzzle-it-nu avatar Mar 06 '25 09:03 puzzle-it-nu

@Trevor-Okwirri does the issue still occur for you?

@puzzle-it-nu mentioned that the issue is no more so I wonder if the issue is still there for you? :)

Baroshem avatar Mar 19 '25 14:03 Baroshem