Connecting two docker-compose containers

Question

I have a Ubuntu remote server with port 80 open. Port 80 is for the frontend and the backend of my application is on port 8080.

My docker-compose.yml file:

version: '3.3'

services: 
  frontend: 
    image: bloomingthebrand/developers:frontv0.0.12
    ports:
      - 80:80
    depends_on:
      - backend
  backend:
    image: bloomingthebrand/developers:backv0.0.4
    ports: 
      - 8080:8080

Since I don't have port 8080 open on the server, I want them to communicate internally.

I have tried putting the network property but I can't access http://mynet:8080/api

version: '3.3'

services: 
  frontend: 
    image: bloomingthebrand/developers:frontv0.0.12
    ports:
      - 80:80
    depends_on:
      - backend
    networks:
    - mynet
  backend:
    image: bloomingthebrand/developers:backv0.0.4
    ports:
      - 8080:8080
    networks:
    - mynet
networks:
  mynet:
    driver: bridge
    ipam:
      driver: default

I have also tried to access http://host.docker.internal:8080/ but that only works on widows and my server is on ubuntu

Answer 1

When using compose for angular and react development you will typically need to have angular/react proxy your api calls, by default these frameworks don't do that and your browser will try to make those calls, which is what is happening in your case. Take a look at this angular example and how it sets up proxy to the api in the app-ui/proxy.conf.json: https://github.com/bbachi/angular-nodejs-docker-compose

In your case your proxy conf should be something like:

{
  "/api": {
    "target": "http://backend:8080",
    "secure": false
  }
}

By the way you don't really need to specify a network, by default all services in the same compose file will communicate with each other via a default network automatically setup for them, so your compose should work fine like so:

version: '3.3'

services: 
  frontend: 
    image: bloomingthebrand/developers:frontv0.0.12
    ports:
      - 80:80
    depends_on:
      - backend
  backend:
    image: bloomingthebrand/developers:backv0.0.4