Connect Docker Containers: Frontend to GraphQL Backend via Docker Compose on the same Host

Suppose I’m on a host machine with docker-compose running 2 containers/services:

  • backend graphql (ports: 8000:8000)
  • frontend react (ports: 8081:8081)

In the frontend container, where my react + apollo code lives, I need to set this const:

  • Docker-compose start fail
  • docker: command not found ( mac mini ) only happens in jenkins shell step but work from command prompt
  • Error start mysql docker
  • Use environment variables in docker
  • Docker For Windows - Java app deployed on a container gets a connection refused error when calling another java app deployed on another container
  • What command can I use to find out the version of docker swarm I am using?
  • // frontend container code
    export const APOLLO = {
        uri: 'http://0.0.0.0:8000/graphql' // << not working, what to use here?
    };
    

    However, the uri value is not able to connect successfully to the backend graphql endpoint. I’m receiving errors such as Error Network error: request to http://0.0.0.0:8000/graphql failed, reason: connect ECONNREFUSED 0.0.0.0:8000

    The containers work fine on their own. I am able to navigate to http://0.0.0.0:8000, http://0.0.0.0:8000/graphql, http://0.0.0.0:8081 to interact with them individually. I am also able to enter each container and reach the other via their service name-spaces with ping backend or ping frontend.

    However, when I do uri: 'http://backend:8000/graphql' or uri: 'http://backend/graphql' in my code, i get the error Error Network error: only absolute urls are supported.

    On docker inspect backend, I get the backend container’s IP address as: '172.18.0.5'. Which i tried to plug into the uri as uri: 'http://172.18.0.5/graphql', but I get Error Network error: Network request failed with status 403 - "Forbidden"

    How should I connect backend docker container to the frontend within the code given these scenarios?

    Thanks!

  • Specify Docker date on image build or container start without affecting host
  • Running MongoDB and Redis on two different containers in the same host machine
  • azk - How to increase a VM memory in azk?
  • docker-compose: using multiple Dockerfiles for multiple services
  • How to read environment variable in Nodejs?
  • Docker daemon fails
  • One Solution collect form web for “Connect Docker Containers: Frontend to GraphQL Backend via Docker Compose on the same Host”

    Fixed it by running the servers locally instead of Docker and found that backend was rejecting frontend entry due to CORS headers not set. Whitelisted frontends’ ip and it worked. Tested again in Docker containers with the backend ip http://172.18.0.5/graphql and connection was perfect.

    Hope this helps!

    Edit: Referring to the container name in the url hostname i.e. http://backend/graphql also works thanks to the docker network bridge setup by docker compose. This is a better solution than hardcoding the docker container ip above.

    Docker will be the best open platform for developers and sysadmins to build, ship, and run distributed applications.