Angular CLI Proxy + Django Backend not working with Docker

Question

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"]

Can you also add the Dockerfile for the front-end, I see how you are running the application inside docker — Gangadhar Jannu
– Gangadhar Jannu, Commented Jan 23, 2024 at 21:45

Kyle Beechly · Accepted Answer · 2024-01-17 22:53:05Z

1

+50

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.

edited Jan 17, 2024 at 22:53

answered Jan 17, 2024 at 22:43

Kyle Beechly

765 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kevin B. Over a year ago

I've updated my code as you suggested and I think this is a step in the right direction because my backend is responding differently. However, by changing my proxy.conf.json to include the service as the url http://backend_local_django:8000/ is now yielding the result django.core.exceptions.DisallowedHost: Invalid HTTP_HOST header. In my django settings I have ALLOWED_HOSTS = ['*']

Gangadhar Jannu Over a year ago

@KevinB. Can you also include proxy.conf.json in your question ?

Kevin B. Over a year ago

@GangadharJannu Ok, I've added the edit

Collectives™ on Stack Overflow

Angular CLI Proxy + Django Backend not working with Docker

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related