vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.14k stars 27.02k forks source link

Docs: #55183

Closed ustuncem closed 1 year ago

ustuncem commented 1 year ago

What is the improvement or update you wish to see?

Image Optimization API

Is there any context that might help us understand?

Hello Vercel Team,

Here is the problem that I have with the Image API. If things are on Vercel or a server that supports Node.js, everything runs perfectly fine. But sometimes clients insists on keeping things on a server for example: IIS. Now since IIS doesn't directly supports Node.js there is library that I think all Next.js developers use when they deploy their app to IIS: iisnode. When I use this library some images aren't loaded and they throw this error to console:

upstream image response failed for /_next/static/media/pixel_money.6f782415.gif TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async invokeRequest (C:\inetpub\wwwroot\testdimesclub\node_modules\next\dist\server\lib\server-ipc\invoke-request.js:17:12)
    at async C:\inetpub\wwwroot\testdimesclub\node_modules\next\dist\server\next-server.js:359:35
    at async imageOptimizer (C:\inetpub\wwwroot\testdimesclub\node_modules\next\dist\server\image-optimizer.js:537:13)
    at async cacheEntry.imageResponseCache.get.incrementalCache (C:\inetpub\wwwroot\testdimesclub\node_modules\next\dist\server\next-server.js:598:60)
    at async C:\inetpub\wwwroot\testdimesclub\node_modules\next\dist\server\response-cache\index.js:99:36 {
  cause: Error: connect ECONNREFUSED ::1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000
  }
}

I researched this a bit and I think by design, Image Optimization API runs on the localhost:3000 but when I go to production, I can't constantly run localhost:3000 because obviously I'll have a domain name like example.com. I don't have any solution to fix this really other than disabling the image optimization. Maybe my server.js file is wrong?

const {createServer} = require('http');
const {parse} = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const port = process.env.PORT || 3000;
const app = next({dev});
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true);
    const {pathname, query} = parsedUrl;

    if (pathname === '/a') {
      app.render(req, res, '/a', query);
    } else if (pathname === '/b') {
      app.render(req, res, '/b', query);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

I opened this issue for image optimaztion because everything else runs perfectly fine with this script but I think this should be clearly indicated on the "Deploying" part of the docs as well and also I still dont know if I can run the built in image optimization api in the production.

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/building-your-application/optimizing/images

leerob commented 1 year ago

Hey there, we do not recommend ejecting from the default Node.js server through next start, which is where the deployment documentation is mentioning that Image Optimization works out of the box.

ustuncem commented 1 year ago

Is there any other way to deploy to IIS? This seems to be the only solution right now.

github-actions[bot] commented 1 year ago

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.