Docker container cannot access another container via VIRTUAL_HOST environment variable – SEO

I am new to docker, so I’m not really sure if I am correct on everything, but I will try my best to describe my situation.

I have two separate docker containers, one for the API and one for the frontend project. I used jwilder/nginx-proxy so I can access them both using hostnames(VIRTUAL_HOST environment variable on docker-compose). I can open my frontend project on the browser, and I can access my API using postman.

However, when I try to access my API endpoint using a httpclient on my frontend site, it returns:

cURL error 6: Could not resolve host

What I’ve tried:

1. Connect the containers using networks. I can confirm that it works, because when I ping the container name, it returns a response.
2. Add extra_hosts to docker-compose on the frontend project. When I curl the hosts I added using the container bash, I get a response from the API.

Still, when I try to open the site, the error still persist. What am I missing?

Here is my docker-compose for my projects

Frontend:

version: "2"

services:      
  pixel_nginx:
    build: docker/nginx
    networks:
      default:
        aliases:
          - nginx
    depends_on:
      - pixel_phpfpm
    volumes:
      - ./docker/nginx/symfony.conf:/etc/nginx/conf.d/default.conf
      - ./:/www/
    environment:
      - VIRTUAL_HOST=pixel-project.local
    extra_hosts:
      - "auth-xx-dev.pixel.local:172.18.0.7"
      - "listing-xx-dev.pixel.local:172.18.0.7"

  pixel_phpfpm:
    build: docker/phpfpm
    volumes:
      - ~/.ssh/known_hosts:/root/.ssh/known_hosts
      - ~/.ssh/id_rsa:/root/.ssh/id_rsa
      - ./:/www/
      - ./data/pixel-project/tmp/:/tmp/
    networks:
      default:
        aliases:
          - php
    depends_on:
      - mysql
    environment:
      - ENV=development

networks:
  default:
    external:
      name: pixelstack_pixel

Backend:

version: "2"

volumes:
  # this is the mysql data volume we are going to host the data inside
  dev_mysql_data:

services:
  # database container for local development purposes
  dev_database:
    image: mysql:5.6
    networks:
      default:
        aliases:
          - database
    ports:
      - 3400:3306
    volumes:
      # mount the mysql_data docker volume to host the local development database
      - dev_mysql_data:/var/lib/mysql
      # the provision file helps when trying to use the provision script to clone databases
      - ./provision.cnf:/provision.cnf
    environment:
      MYSQL_ROOT_PASSWORD: pixel

  # This is the local development version of the nginx container
  dev_nginx:
    image: api-nginx:latest
    build: ./nginx
    networks:
      default:
        aliases:
          - nginx
    depends_on:
      - dev_phpfpm
    volumes_from:
      - dev_phpfpm
    environment:
      - VIRTUAL_HOST=~^(api|location|feedback|user|phone|loancalculator|seo|media|listing|development|kpi|newsletter|auth|worker|search)-xx-dev.pixel.local

  # This is the local development version of the phpfpm container
  dev_phpfpm:
    image: api-phpfpm:latest
    build:
      context: ./
      args:
        # this build might fail, if so, run in a terminal: export SSH_KEY=$(cat ~/.ssh/id_rsa)
        - SSH_KEY=$SSH_KEY
    networks:
      default:
        aliases:
          - phpfpm
    depends_on:
      - dev_database
    volumes:
      # we override the images /www directory with the code from the live machine
      - ./:/www
    env_file:
      # inside this file, are the shared database secrets such as username/password
      - ./env/common
      - ./env/dev

networks:
  default:
    external:
      name: pixelstack_pixel

Edit:
I’m using Ubuntu, and I set the hostnames on /etc/hosts

Update:

When using staging domain hosted on AWS, the frontend project got response data as intended. So I can say that there is no problem on that side.