title: Web container cannot call backend container from docker compose
body: <p>I am still finding my feet in the docker world. I am trying to dockerize my small pet project. The frontend is a vue-cli app which communicates with backend containing restful APIs made by spring boot. </p>
  
  <p>So my approach was to declare two separate dockerfile for backend and frontend and combine them via one docker compose file. So the folder structure is -</p>
  
  <pre><code>backend/
         - Dockerfile
  frontend/
         - Dockerfile
  docker-compose.yml
  </code></pre>
  
  <p>As frontend needs to be able to call backend services, I created a bridge network and shared the network between them. This is my docker compose file -</p>
  
  <pre><code>version: "2"
  services:
    backend:
      build: backend/.
      networks:
        - movie-network
      ports:
        - "8098:8098"
    frontend:
      build: frontend/.
      ports:
        - "8812:8080"
      networks:
        - movie-network
  
  networks:
    movie-network:
      driver: bridge
  </code></pre>
  
  <p>I have an endpoint exposed at backend called <code>/api/findAll</code>. Now if the frontend service calls the API via <code>http://localhost:8098:/api/findAll</code> (host network), I can view it from my browser (<a href="http://localhost:8812" rel="nofollow noreferrer">http://localhost:8812</a>), everything works fine.</p>
  
  <p>But If frontend calls the same API using <code>backend:8098/api/findAll</code>; utilizing bridge network - it gives error in my browser -</p>
  
  <p><a href="https://i.stack.imgur.com/7XFjz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7XFjz.png" alt="error"></a></p>
  
  <p>If I do a <code>docker exec</code> in the frontend and ping backend, the ping is successful</p>
  
  <p>So, why is it giving error in my browser (<a href="http://localhost:8812" rel="nofollow noreferrer">http://localhost:8812</a>)? Am I conceptually doing anything wrong? Seeking suggestions.</p>
  
  <p>Frontend Dockerfile -</p>
  
  <pre><code>FROM node:lts-alpine
  
  # install simple http server for serving static content
  RUN npm install -g http-server
  
  # make the 'app' folder the current working directory
  WORKDIR /app
  
  # copy both 'package.json' and 'package-lock.json' (if available)
  COPY package*.json ./
  
  # install project dependencies
  RUN npm install
  
  # copy project files and folders to the current working directory (i.e. 'app' folder)
  COPY . .
  
  # build app for production with minification
  RUN npm run build
  
  EXPOSE 8080
  </code></pre>
  
  <p>Backend Dockerfile -</p>
  
  <pre><code>FROM openjdk:11-jre-slim
  # Creating app directory
  WORKDIR /usr/src/movies
  # Copying Jar (didn't use FROM maven to save some time)
  COPY target/movies*.jar movies.jar
  
  RUN pwd
  
  RUN ls -la
  # Exposing Port
  EXPOSE 8098
  # Running App
  ENTRYPOINT ["java","-jar","/usr/src/movies/movies.jar"]
  </code></pre>