react can't access API docker-compose

Question

I have three containers: MySQL 8, Spring Boot and React, and made the docker-compose.yml, totally based on Callicoder https://github.com/callicoder/spring-security-react-ant-design-polls-app

Also tried a dev environment version with npm start instead of build, and without nginx, and got nodejs api error ECONNREFUSED. However I can go to postman and use the api in localhost:8080 normally, so it's a docker container communications issue I guess, but have no clue how to solve it

docker-compose.yml

version: "3.8"

services:
  app-server:
    build:
      context: olimpoback
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
    restart: always # "no" always unless-stopped
    depends_on:
      - mysqldb
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://mysqldb:3306/Olimpo?useSSL=false&serverTimezone=UTC&useLegacyDatetimeCode=false
      SPRING_DATASOURCE_USERNAME: admin
      SPRING_DATASOURCE_PASSWORD: senha
    networks:
      - backend
      - frontend
    #volumes:
    #  – /data/spring-boot-app

  # Frontend Service
  app-client:
    build:
      context: olimpoFront
      dockerfile: Dockerfile.prod
      args:
        REACT_APP_API_BASE_URL: http://localhost:8080/
    ports:
      - "80:80"
    restart: always
    depends_on:
      - app-server
    networks:
      - frontend

  mysqldb:
    image: mysql:8.0.21
    container_name: mysqlDB
    command: --default-authentication-plugin=mysql_native_password
    ports:
      - "3306:3306"
    restart: always
    environment:
      - MYSQL_DATABASE=Olimpo
      - MYSQL_USER=admin
      - MYSQL_PASSWORD=senha
      - MYSQL_ROOT_PASSWORD=senha
    volumes:
      - mysql_data:/var/lib/mysql
      - ./mysql-dump:/docker-entrypoint-initdb.d
    networks:
      - backend

volumes:
  mysql_data:
    driver: local

networks:
  backend:
  frontend:

DockerFile(front end)

FROM node:14.15.1 as build

WORKDIR /app

EXPOSE 3000

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json package-lock.json ./

RUN npm install --silent && npm install react-scripts@3.3.0 -g --silent

COPY . ./

ARG REACT_APP_API_BASE_URL
ENV REACT_APP_API_BASE_URL=${REACT_APP_API_BASE_URL}

RUN npm run build

FROM nginx:1.20.1

WORKDIR /usr/share/nginx/html

RUN rm /etc/nginx/conf.d/default.conf

COPY --from=build /app/build /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

ENTRYPOINT ["nginx", "-g", "daemon off;"]

package.json

...
"proxy": "http://127.0.0.1:8080",
...

Answer 1

Docker's localhost isn't the same localhost you are trying to access using Postman. This happens because app-server , app-client and mysqldb are 3 distinct containers running in the same.network. Each of them has its name.

So, to access your app-server from inside your container, you may use: http://app-server:8080

For example, take a look at your database url:

jdbc:mysql://mysqldb:3306/Olimpo?useSSL=false&serverTimezone=UTC&useLegacyDatetimeCode=false

You may notice that you are trying to access the url mysqldb instead of localhost for this same reason. You are referring to the database url as the container name.

You can take a deeper look here