net::ERR_FAILED api call to backend from nextjs with nginx docker-CodePudding

The

What is the reason for this behaviour ?

Thanks.

docker-compose.yml

version: '3.9' services: backend: image: backend-image build: context: ./backend dockerfile: Dockerfile.prod args: NODE_ENV: production environment: - NODE_ENV=production ports: - '5055:5055' volumes: - ./backend/uploads/:/app/uploads frontend: image: frontend-image build: context: ./frontend dockerfile: Dockerfile.prod args: NODE_ENV: production environment: - NODE_ENV=production ports: - '3000:3000' depends_on: - backend nginx: image: nginx-image build: context: ./nginx ports: - '80:80' depends_on: - backend - frontend

backend - Dockerfile.prod

FROM node:19.0.1-slim WORKDIR /app COPY package.json . RUN yarn install COPY . ./ ENV PORT 5055 EXPOSE $PORT CMD ["npm", "run", "start"]

frontend - Dockerfile.prod

FROM node:19-alpine # Set working directory WORKDIR /usr/app # Install PM2 globally RUN npm install --global pm2 # Copy "package.json" and "package-lock.json" before other files # Utilise Docker cache to save re-installing dependencies if unchanged COPY ./package*.json ./ # Install dependencies RUN npm install # Copy all files COPY ./ ./ # Build app RUN npm run build # Expose the listening port EXPOSE 3000 # Run container as non-root (unprivileged) user # The "node" user is provided in the Node.js Alpine base image USER node # Launch app with PM2 CMD [ "pm2-runtime", "start", "npm", "--", "start" ]

nginx - Dockerfile

FROM public.ecr.aws/nginx/nginx:stable-alpine # Remove any existing config files RUN rm /etc/nginx/conf.d/* # Copy config files # *.conf files in "conf.d/" dir get included in main config COPY ./default.conf /etc/nginx/conf.d/ # Expose the listening port EXPOSE 80 # Launch NGINX CMD [ "nginx", "-g", "daemon off;" ]

nginx - default.conf

# Cache zone proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off; upstream frontend { server frontend:3000; } upstream backend { server backend:5055; } server { listen 80 default_server; server_name _; server_tokens off; gzip on; gzip_proxied any; gzip_comp_level 4; gzip_types text/css application/javascript image/svg xml; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; location /api { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; # change localhost -> backend when you run in mac proxy_pass http://backend; proxy_redirect off; client_max_body_size 20m; client_body_buffer_size 256k; proxy_connect_timeout 90; proxy_send_timeout 90; proxy_read_timeout 90; proxy_buffers 32 4k; } # BUILT ASSETS (E.G. JS BUNDLES) # Browser cache - max cache headers from Next.js as build id in url # Server cache - valid forever (cleared after cache "inactive" period) location /_next/static { proxy_cache STATIC; proxy_pass http://frontend; } # STATIC ASSETS (E.G. IMAGES) # Browser cache - "no-cache" headers from Next.js as no build id in url # Server cache - refresh regularly in case of changes location /static { proxy_cache STATIC; proxy_ignore_headers Cache-Control; proxy_cache_valid 60m; proxy_pass http://frontend; } # DYNAMIC ASSETS - NO CACHE location / { proxy_pass http://frontend; } }

frontend - .env.local

NEXT_PUBLIC_API_BASE_URL=http://backend:5055/api

frontend - httpServices.js

import axios from 'axios' import Cookies from 'js-cookie' const instance = axios.create({ baseURL: `${process.env.NEXT_PUBLIC_API_BASE_URL}`, timeout: 500000, headers: { Accept: 'application/json', 'Content-Type': 'application/json', }, }) // Add a request interceptor instance.interceptors.request.use(function (config) { // Do something before request is sent let userInfo if (Cookies.get('userInfo')) { userInfo = JSON.parse(Cookies.get('userInfo')) } return { ...config, headers: { authorization: userInfo ? `Bearer ${userInfo.token}` : null, }, } }) // console.log(process.env.API_BASE_URL); const responseBody = (response) => response.data const requests = { get: (url, body) => instance.get(url, body).then(responseBody), post: (url, body, headers) => instance.post(url, body, headers).then(responseBody), put: (url, body) => instance.put(url, body).then(responseBody), } export default requests

Edit

nginx logs (docker logs -f nginx 2>/dev/null)

172.20.0.1 - - [14/Nov/2022:17:02:36 0000] "GET / HTTP/1.1" 200 31635 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36" "-" 172.20.0.1 - - [14/Nov/2022:17:02:39 0000] "GET /_next/image?url=/slider/slider-1.jpg&w=1080&q=75 HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36" "-" 172.20.0.1 - - [14/Nov/2022:17:02:39 0000] "GET / HTTP/1.1" 200 31635 "http://localhost/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36" "-" 172.20.0.1 - - [14/Nov/2022:17:02:40 0000] "GET /_next/image?url=/slider/slider-2.jpg&w=1080&q=75 HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36" "-" 172.20.0.1 - - [14/Nov/2022:17:02:41 0000] "GET /service-worker.js HTTP/1.1" 304 0 "http://localhost/service-worker.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36" "-" 172.20.0.1 - - [14/Nov/2022:17:02:41 0000] "GET /fallback-B639VDPLP_r91l2hRR104.js HTTP/1.1" 304 0 "http://localhost/service-worker.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36" "-" 172.20.0.1 - - [14/Nov/2022:17:02:41 0000] "GET /workbox-fbc529db.js HTTP/1.1" 304 0 "http://localhost/service-worker.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36" "-" 172.20.0.1 - - [14/Nov/2022:17:02:42 0000] "GET /_next/image?url=/slider/slider-3.jpg&w=1080&q=75 HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36" "-"

curl request is working well from nginx container to backend container (curl backend:5055/api/category/show)

CodePudding user response：

in nginx.conf you need to specify the backend port too and also the base path (/api):

location /api { ... proxy_pass http://backend:5055/api; }

CodePudding user response：

Docker configuration is all correct

I've read the question again, with the given logs, it seems your configuration is correct all along. However, what you're doing on browser is access violation.

Docker compose service(hosts) access

Docker services are connected to each other, that means making a request inside another service to another service is possible. What's impossible is a user outside from that service is not accessible to another service. Here's a simpler explanation:

# docker-compose.yaml service-a: ports: - 3000:3000 # exposed to outside # ... service-b: ports: - 5000:5000 # exposed to outside # ...

# ✅this works! case A (service-a) $ curl http://service-b:5000 (service-b) $ curl http://service-a:3000 (local machine) $ curl http://localhost:5000 (local machine) $ curl http://localhost:3000 # ❌this does not work! case B (local machine) $ curl http://service-a:3000 (local machine) $ curl http://service-b:3000

When I was reading the question initially, I've missed the part that the frontend code is accessing unexposed backend service in browser. This is clearly falls into case B, which will not work.

Solution: With server side rendering...

A frontend app is merely a javascript code on your browser. It cannot access to internals. Therefore the request should be corrected:

# change from http://backend:5055/api NEXT_PUBLIC_API_BASE_URL=http://localhost:5055/api

But here's better way to solve it. Try access the api inside server-side code. Since your frontend is Next.js, it is possible to inject backend result to frontend.

export async function getServerSideProps(context) { const req = await fetch('http://backend:5055/api/...'); const data = req.json(); return { props: { data }, // will be passed to the page component as props } }