Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Trevor-Okwirri opened this issue Mar 1, 2025 · 3 comments
Open

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

Trevor-Okwirri opened this issue Mar 1, 2025 · 3 comments
Labels
details-needed Use when additional details are needed by the issue author

Comments

@Trevor-Okwirri
Copy link

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

@puzzle-it-nu
Copy link

puzzle-it-nu commented Mar 2, 2025

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
Copy link

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

@Baroshem
Copy link
Collaborator

@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 Baroshem added the details-needed Use when additional details are needed by the issue author label Mar 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
details-needed Use when additional details are needed by the issue author
Projects
None yet
Development

No branches or pull requests

3 participants