Angular container can't http request to my java container-CodePudding

I'm new to docker, but I'm trying to implement it in my job, here's the case, I have this angular application "vehicle-management-view" as frontend and this java application as backend "vehicle-management-api" from which my view do http requests. Both applications are already in containers and working fine individually, but the view can't request to the api no matter what I do, network, ports and all this stuff was configured but it just doesn't work, I may be forgeting something, here are my dockerfiles, docker compose and my request configurations...

API dockerfile:

FROM openjdk:8-alpine
WORKDIR /opt/docker/vehicle-management
COPY /target/vehicleManagementApi.jar /opt/docker/vehicle-management
ENTRYPOINT java -jar vehicleManagementApi-0.0.1-SNAPSHOT.jar

VIEW dockerfile:

FROM node:alpine as build-stage
WORKDIR /build/vehicle-management-view/
COPY package*.json /build/vehicle-management-view/
RUN npm install
COPY ./ ./
RUN npm run build

# DEPLOY STAGE
FROM nginx:alpine
COPY --from=build-stage build/vehicle-management-view/dist/vehicle-management-view/ /usr/share/nginx/html

Docker Compose:

version: '3'
networks:
  vehicle-management-network:
    driver: bridge
services:
  vehicle-management-api-service:
    build: 
      context: ./vehicleManagementApi
      dockerfile: vehicle-management-api.dockerfile
    image: cap/vehicle-management-api
    container_name: vehicle-management-api
    hostname: vehicle-management-api
    expose:
     - 8081
    networks:
      - vehicle-management-network
  vehicle-management-view-service:
    build:
      context: ./vehicle-management-view
      dockerfile: vehicle-management-view.dockerfile
    image: cap/vehicle-management-view
    container_name: vehicle-management-view
    hostname: vehicle-management-view
    depends_on:
      - vehicle-management-api-service
    ports:
      - 4200:80
    networks:
      - vehicle-management-network

On my view I tried some guesses on the request uri, each one gave me an error:

http://localhost:8081/ -> ERR_CONNECTION_REFUSED
http://vehicle-management-api:8081/ -> ERR_NAME_NOT_RESOLVED
vehicle-management-api:8081/ -> ERR_NAME_NOT_RESOLVED

I think the problem may be my lack of experience, any help is much appreciated!

CodePudding user response：

The requests from your Angular frontend don't come from the frontend container. They come from the browser that's running the Angular app.

So you need to map the API port to a host port so it'll be reachable from the outside.

Map your API port to a host port like this

  vehicle-management-api-service:
    build: 
      context: ./vehicleManagementApi
      dockerfile: vehicle-management-api.dockerfile
    image: cap/vehicle-management-api
    container_name: vehicle-management-api
    hostname: vehicle-management-api
    ports:
     - 8081:8081
    networks:
      - vehicle-management-network

Now you should be able to reach the API using http://localhost:8081/ as long as you're running the Angular app in a browser on the host machine and your API is listening on port 8081.

CodePudding user response：

To make things a bit more clear, I've rewritten your compose file:


version: '3'

services:

  api:
    build: 
      context: ./vehicleManagementApi
      dockerfile: vehicle-management-api.dockerfile
    image: cap/vehicle-management-api
    container_name: vehicle-management-api

  view:
    build:
      context: ./vehicle-management-view
      dockerfile: vehicle-management-view.dockerfile
    image: cap/vehicle-management-view
    container_name: vehicle-management-view
    depends_on:
      - api
    ports:
      - "4200:80"

With this docker-compose the API is reachable on http://api:8081/ from the View-application.

Since you have all services in 1 docker-compose, there is no need to create the network. Just use the default network created

Since you access the API from another Container in the same docker-compose network, there is no need to expose the port of the API. Exposing ports is only necessary if you want to access that service from the Host (or outside world).

That's why you do need to expose it on the View container because you probably want to access the View Container from outside the docker-compose network like. It is weird though that you use port 4200 for that. If you would use por 80, then you could have a standard http-webserver on the Host.