Docker and angular circling communication with api

Question

I started using Docker a short time ago, I tried the deployment of two applications the angular frontend and an api in python, problem that even in the same network in Docker I can only access the api with the external ip of the internal container presents the error below, wanted only the front container host to be exposed at the end and communication to be fully internal between the 2 containers

Docker-Compose.yml

services:
  backend:
    build:
      context: ./api
      dockerfile: Dockerfile
    ports:
      - "80"
    networks:
      - devtest

  frontend: 
    container_name: frontend 
    build: ./ProjectCremona 
    volumes: # Volume binding
      - './ProjectCremona:/usr/src/app'
    ports:
      - '4200:4200'
    networks:
      - devtest

    command: >
      bash -c "npm install && ng serve --host 0.0.0.0 --port 4200"

networks:
    devtest:
      driver: bridge

Answer 1

What you want to do is not possible.

When you access your application, it is running in your Browser (Outside of the Docker network). That’s why it doesn’t work..

In order for this to be feasible, you would have to run the browser inside the Docker as well.

Answer 2

You can use the Discovery service that Docker has, you wouldn’t need to expose the backend port, just put it in the communication url: name_do_service:port_do_service, in your case, put it in the url: http://backend:80. Remove ports from the backend and also use the link on your Docker-Compose.