Redis – Problems accessing Laravel api from Vue(Nuxt js) app in docker

Currently I’m working on Nuxt js app that should connect to backend api made in Laravel.

The problem is that every request that is sent to the api via axios fails with one of this errors(Depending on the API_URL I use):

Error: connect ETIMEDOUT API_URL

Error: connect ECONNREFUSED API_URL

Example request:

axios.get(process.env.API_URL + 'api/something') ...

I just cant figure out what API_URL to use, here are some of the things I tried:

• http://172.19.0.4:8080/ -> this is the IP address of api container I’ve got from docker inspect {containername}
• http://172.19.0.4/ -> also tried without the port, actually all of these were tried with/without port
• http://localhost:8080/
• http://app/ -> app is the service name and alias of api in docker-compose.yml

API_URL is defined nuxt.config.js:

env: {
    'API_URL': 'http://172.19.0.4:8080/'
},

In the browser http://localhost:8080/ opens the API and http://localhost:8081/ opens the webapp.

docker-compose.yml:

version: "3.7"

services:
  app: #backend api
    build:
      context: .
      dockerfile: Dockerfile.debug
    ports:
      - "8080:80"
    environment:
      APP_URL: http://localhost:8080 #api
      WEB_URL: http://localhost:8081 #vue app
    volumes:
      - ./project:/app
    links:
      - mysql
      - redis
    networks:
      project-network-frontend:
        aliases:
          - app
      project-network-backend:
        aliases:
          - app

  frontend:
    build:
      context: ../frontend
      dockerfile: Dockerfile
    ports:
      - "8081:3000"
    environment:
      - API_URL=http://app:8080/
      - CHOKIDAR_USEPOLLING=true
    networks:
      project-network-frontend:
        aliases:
          - frontend
    volumes:
      - "../frontendproject:/app"
    stdin_open: true
    tty: true        

  mysql:
    image: mysql:5.7
    ports:
      - "3300:3306"
    volumes:
      - ./debug/mysql/data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: ***
      MYSQL_DATABASE: ***
      MYSQL_USER: ***
      MYSQL_PASSWORD: ****
    networks:
      project-network-frontend:
        aliases:
          - mysql
      project-network-backend:
        aliases:
          - mysql

  redis:
    image: redis:alpine
    ports:
      - "6379:6379"
    volumes:
      - ./debug/redis/data:/data
    restart: always
    environment:
      - ALLOW_EMPTY_PASSWORD=yes
    networks:
      project-network-frontend:
        aliases:
          - redis
      project-network-backend:
        aliases:
          - redis
networks:
  project-network-frontend:
    name: project-network-frontend
  project-network-backend:
    name: project-network-backend

Folder structure:

• ROOT
  • backend
    • docker-compose.yml
    • backendproject(laravel folder)
    • dockerfile
  • frontend
    • frontendproject(nuxt/vue folder)
    • dockerfile

I’ve also tried setting up axios baseURL like this:
https://stackoverflow.com/a/57368891/7657853