Frontend unable to access backend within Docker setup

Frontend
1

I’m working on a Dockerized project with an Angular frontend and backend services. My Dockerfile for the Angular app looks like this:

FROM node:latest AS build
WORKDIR /usr/local/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:latest
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/local/app/dist/restaurant_frontend /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Additionally, I have this in my docker-compose:

services:
  auth_db:
    image: postgres:latest
    container_name: auth_db_container
    environment:
      POSTGRES_DB: auth_db
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: 123456
    volumes:
      - ./backup_auth_db.sql:/docker-entrypoint-initdb.d/backup_auth_db.sql
    ports: ["5434:5432"]
    networks:
      - db_network

  restaurant_db:
    image: postgres:latest
    container_name: restaurant_db_container
    environment:
      POSTGRES_DB: restaurant
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: 123456
    volumes:
      - ./backup_restaurant.sql:/docker-entrypoint-initdb.d/backup_restaurant.sql
    ports:
      - "5433:5432"
    networks:
      - db_network

  auth:
    container_name: auth
    restart: always
    build: ./demo_auth_ver2
    ports:
      - "9000:9000"
    depends_on:
      - auth_db
      - gateway
    environment:
      JAVA_OPTS: "-Xmx512m"
      SPRING_PROFILES_ACTIVE: "dev"
    networks:
      - db_network

  resourceserver:
    container_name: resourceserver
    restart: always
    build: ./restaurant_backend
    ports:
      - "8080:8080"
    depends_on:
      - restaurant_db
      - gateway
    environment:
      JAVA_OPTS: "-Xmx512m"
      SPRING_PROFILES_ACTIVE: "dev"
      SPRING_APPLICATION_JSON: '{"server.servlet.context-path":"/"}'
    networks:
      - db_network

  frontend:
    container_name: frontend
    restart: always
    build: ./restaurant_frontend
    ports:
      - "80:80"
    depends_on:
      - resourceserver
      - auth
      - gateway
    networks:
      - db_network

  gateway:
    container_name: gateway
    restart: always
    build: ./gateway
    ports:
      - "8081:8081"
    environment:
      JAVA_OPTS: "-Xmx256m"
      SPRING_PROFILES_ACTIVE: "dev"
    networks:
      - db_network
networks:
  db_network:
    driver: bridge

All containers are running and can be pinged. However, when I access the frontend, I encounter some issues:

Console output in frontend

Moreover, using curl http://gateway:8081/menu/lunches from within the frontend container returns the expected results. It appears that while the internal service URLs work successfully in Docker, the frontend can’t connect to them when accessed through a browser.

2

hmm interesting issue there! sounds like a classic browser vs container networking problem. are you trying to call the backend from your angular code using the container names like gateway:8081? browsers cant resolve those internal docker names - only works inside containers. what urls is your frontend actually trying to hit?

3

The issue stems from your Angular application being compiled at build time with hardcoded API endpoints. When you run npm run build in your Dockerfile, Angular creates static files that get served by nginx to the browser. At this point, any API calls are made from the user’s browser, not from within the Docker container network. The browser cannot resolve internal Docker service names like gateway:8081 because it operates outside the Docker network context. You need to configure your Angular environment files to use localhost:8081 or your server’s external IP address for API calls, ensuring these endpoints are accessible from outside the Docker network. Alternatively, configure nginx to proxy API requests to your backend services, which would allow the frontend to make relative API calls that nginx forwards internally.

4

yeah this happens alot with docker setups. your nginx config should proxy the api calls to backend services. add something like proxy_pass http://gateway:8081; in your nginx.conf for /api routes then your angular app can just call /api/menu/lunches instead of full urls