Angular CLI Proxy + Django Backend not working with Docker

Issue

I have an Angular + Django project where I am providing an api to angular with django. When I run the angular service without docker everything works as expected. When I run the angular service using docker compose, angular is suddenly unable to connect to the backend api service. I have seen a similar post on stack but the difference is I am using a single compose file to include two different compose files so I'm not sure how to "link" the backend services to the frontend service like the answers suggest in this post. So what can I do to make this work within docker?

Error: [webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/api/project_types/ to http://api:8000/ [ENOTFOUND] (https://nodejs.org/api/errors.html#errors_common_system_errors)

Project Layout:

Note: I've dockerized the two services and am using one compose file in the root folder to include both the backend and frontend compose files.

- root
  - backend 
    - backend-compose.yml
  - frontend
    - frontend-compose.yml
  - docker-compose.yml

Root Compose:

version: '3.7'

include:
  - ./frontend/compose.yml
  - ./backend/local.yml

Frontend Compose:

services:
  web:
    build:
      context: .
      target: builder
    ports:
      - 4200:4200
    volumes:
      - ./angular:/app
      - /project/node_modules

Backend Compose: (Note: built with cookiecutter django)

version: '3'

volumes:
  backend_local_postgres_data: {}
  backend_local_postgres_data_backups: {}

services:
  django:
    build:
      context: .
      dockerfile: ./compose/local/django/Dockerfile
    image: backend_local_django
    container_name: backend_local_django
    depends_on:
      - postgres
    volumes:
      - .:/app:z
    env_file:
      - ./.envs/.local/.django
      - ./.envs/.local/.postgres
    ports:
      - '8000:8000'
    command: /start

  postgres:
    build:
      context: .
      dockerfile: ./compose/production/postgres/Dockerfile
    image: backend_production_postgres
    container_name: backend_local_postgres
    volumes:
      - backend_local_postgres_data:/var/lib/postgresql/data
      - backend_local_postgres_data_backups:/backups
    env_file:
      - ./.envs/.local/.postgres

  docs:
    image: backend_local_docs
    container_name: backend_local_docs
    build:
      context: .
      dockerfile: ./compose/local/docs/Dockerfile
    env_file:
      - ./.envs/.local/.django
    volumes:
      - ./docs:/docs:z
      - ./config:/app/config:z
      - ./backend:/app/backend:z
    ports:
      - '9000:9000'
    command: /start-docs

EDIT

proxy.conf.json

{
    "/api/*": {
      "target": "http://django:8000/",
      "secure": false,
      "changeOrigin": true
    }
  }

Frontend Dockerfile

# syntax=docker/dockerfile:1.4

FROM --platform=$BUILDPLATFORM node:17.0.1-bullseye-slim as builder

RUN mkdir /project
WORKDIR /project

RUN npm install -g @angular/cli@13

COPY package.json package-lock.json ./
RUN npm ci

COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

FROM builder as dev-envs

RUN <<EOF
apt-get update
apt-get install -y --no-install-recommends git
EOF

RUN <<EOF
useradd -s /bin/bash -m vscode
groupadd docker
usermod -aG docker vscode
EOF
# install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /

CMD ["ng", "serve", "--host", "0.0.0.0"]

Solution

Have you tried Docker networks, as suggested in this answer?

I think you could add something like this to both compose files for all necessary services to connect to:

networks:
  backend-net:
    driver: bridge

Then add something like this under each of your services that need it:

networks:
  - backend-net

And make sure your proxy.config.json is updated as suggested in that answer as well.

More info on setting up networking between containers can be found here in the Docker docs.

Answered By - Kyle Beechly