Failed to load resource: net::ERR_NAME_NOT_RESOLVED error

Issue

I am writing an application. I write .net for the backend and Angular for the frontend. When dockering, I put my frontend application inside nginx. Dockerfile is like this

FROM node:20.10-alpine AS build
WORKDIR /app
COPY package*.json .
RUN npm install
RUN npx ngcc --properties es2023 browser module main --first-only --create-ivy-entry-points
COPY . .
RUN npm run build --prod

FROM nginx:stable
COPY --from=build /app/dist/librari-fy/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

nginx.conf is as follows:

worker_processes 1;


events {
    worker_connections 1024;
}


http {
    server {
        listen 80;
        server_name http://backend:80;

        root /usr/share/nginx/html/browser;
        index index.html index.htm;
        include /etc/nginx/mime.types;


        gzip on;
        gzip_http_version 1.1;
        gzip_disable      "MSIE [1-6]\.";
        gzip_min_length   256;
        gzip_vary         on;
        gzip_proxied      expired no-cache no-store private auth;
        gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_comp_level   9;

        location / {
            try_files $uri $uri/ /index.html;
            add_header Access-Control-Allow-Origin *;
            add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
        }
    }
}

Docker-compose file :

version: '3.8'

services:
  postgres:
    image: postgres:16-alpine
    container_name: postgredatabase
    restart: always
    environment:
      POSTGRES_PASSWORD: UArA0CGd5y1g5sE7U0OH
      POSTGRES_USER: libraryadmin
      POSTGRES_DB: Library
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - app_internal_network
    healthcheck:
      test: pg_isready
      interval: 10s
      timeout: 60s
      retries: 5
      start_period: 80s 
    
  backend:
    image: sahinyakici/librarybackend:latest
    restart: always
    container_name: backend
    depends_on:
      postgres:
        condition: service_healthy
    networks:
      - app_internal_network
    ports:
      - "8080:80"

  frontend:
    container_name: librarify
    image: sahinyakici/librarify:latest
    restart: always
    depends_on:
      - backend
    networks:
      - app_internal_network
    ports:
      - 80:80
    expose:
      - 80

volumes:
  postgres_data:

networks:
  app_internal_network:
    driver: bridge

The applications run successfully, but I get the following error in the console in the website: "Failed to load resource: net::ERR_NAME_NOT_RESOLVED". If I go into the UI container and try with curl, I can fetch data from the backend. What do you think is the problem?

Error screenshot Error2 Error3

I tried using Curl from within the container.

Solution

Frontend code is executed client side, meaning the browser processes the code and not the NGINX web server. When you request your Frontend container, the NGINX server returns the HTML, CSS and Javascript files of your website, which are interpreted by browser.

Therefore you're browser, and by extend your computer, will be the one making requesting the backend API. So the backend URL configured within the frontend should be http://localhost:8080 rather than http://backend

Your NGINX server should only be serving the Frontend files. Fix the server_name to localhost and fix the Backend URL within your Frontend code to http://localhost:8080

Answered By - ABWassim