incorrect hostname for :8000 ist used to fetch data

[tendermonster]

Summary

It seems that nextjs attempts to fetch data using incorrect IP. Namely ::1 even though the the .env is setup like so:

NEXT_PUBLIC_SALEOR_API_URL=http://192.168.64.8:8000/graphql/
# make sure to add it on production for correct canonical URLs
NEXT_PUBLIC_STOREFRONT_URL=http://localhost:3000
ENABLE_SSL=False
# Token used for fetching channels
SALEOR_APP_TOKEN=

the error message after "docker compose up"

Both saleor platform and storefront are on the same network. I do not seem to understand why this is happening.
A very very dirty fix is to edit /etc/hosts in the docker container to resolve localhost to the 192.168.64.8. Of course, this is not sustainable.

Dues anyone know where use of the API_URL can be enforced?

This is the error log snippet when accessing localhost:3000 storefront:

`saleor-storefront  |    ▲ Next.js 14.1.3
saleor-storefront  |    - Local:        http://73d45b2fd981:3000
saleor-storefront  |    - Network:      http://192.168.64.9:3000
saleor-storefront  | 
saleor-storefront  |  ✓ Ready in 656ms
saleor-storefront  |  ⨯ TypeError: fetch failed
saleor-storefront  |     at node:internal/deps/undici/undici:12618:11
saleor-storefront  |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
saleor-storefront  |     at async globalThis.fetch (/app/.next/server/chunks/957.js:1:36484)
saleor-storefront  |     at async fetchExternalImage (/app/node_modules/.pnpm/next@14.1.3_@babel+core@7.24.6_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/server/image-optimizer.js:563:17)
saleor-storefront  |     at async NextNodeServer.imageOptimizer (/app/node_modules/.pnpm/next@14.1.3_@babel+core@7.24.6_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/server/next-server.js:604:48)
saleor-storefront  |     at async cacheEntry.imageResponseCache.get.incrementalCache (/app/node_modules/.pnpm/next@14.1.3_@babel+core@7.24.6_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/server/next-server.js:179:65)
saleor-storefront  |     at async /app/node_modules/.pnpm/next@14.1.3_@babel+core@7.24.6_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/server/response-cache/index.js:90:36
saleor-storefront  |     at async /app/node_modules/.pnpm/next@14.1.3_@babel+core@7.24.6_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/lib/batcher.js:41:32 {
saleor-storefront  |   cause: Error: connect ECONNREFUSED ::1:8000
saleor-storefront  |       at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
saleor-storefront  |       at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:128:17) {
saleor-storefront  |     errno: -111,
saleor-storefront  |     code: 'ECONNREFUSED',
saleor-storefront  |     syscall: 'connect',
saleor-storefront  |     address: '::1',
saleor-storefront  |     port: 8000
saleor-storefront  |   }
saleor-storefront  | }`

Steps to reproduce

How I build the docker container:

0. follow the instruction on https://github.com/saleor/saleor-platform to get the api up and running

1. docker build --network host -t storefront-saleor-storefront:latest --build-arg NEXT_PUBLIC_SALEOR_API_URL=http://192.168.64.8:8000/graphql/ --build-arg NEXT_PUBLIC_STOREFRONT_URL=http://192.168.64.9:3000 --build-arg ENABLE_SSL=False --build-arg DEBUG=True .

2. docker compose up

3. storefront container will not be able to fetch data from the api

p.s the step 1. is a workaround so that during build the network is accessible. Building using docker compose does not work.

A link to a reproduction repository

No response

Output from envinfo

pnpm --version -> is unavailable after docker build ...

npx envinfo --system --binaries --browsers --markdown -> it seems to hand and never return inside docker container