skip to Main Content

I am trying a simple angular app with a spring boot backend using docker compose. But my front end cant seem to find the backend api when called. Below are the relevant files.

Docker File for Backend

#
# Build
#
FROM maven:3.6.0-jdk-11-slim AS build
COPY src /home/app/src
COPY pom.xml /home/app
RUN mvn -f /home/app/pom.xml clean package

#
# Package stage
#
FROM openjdk:11-jre-slim
COPY --from=build /home/app/target/demo-0.0.1-SNAPSHOT.jar /usr/local/lib/demo.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","/usr/local/lib/demo.jar"]

Docker File for frontend angular

FROM node:alpine AS builder

WORKDIR /app

COPY . .

RUN npm install && 
    npm run build

FROM nginx:alpine

COPY --from=builder /app/dist/* /usr/share/nginx/html/
COPY /nginx.conf /etc/nginx/conf.d/default.conf

NGINX conf file used

server {
    include /etc/nginx/extra-conf.d/*.conf;
    
    listen 80;
    server_name frontend;
    
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
    
    location /api/ { 
        proxy_http_version 1.1;
        #proxy_pass http://<ContainerName>:<PortNumber>; 
        # In our case Container name is as we setup in docker-compose `beservice` and port 8080
        proxy_pass http://backend:8080/api/;   
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_cache_bypass $http_upgrade;
    } 
}

Docker Compose Yml

version: "3.9"

services:
    backend:
        image: demo
        container_name: demo
        build:
            context: ./demo
        ports:
            - 8080:8080
    frontend:
        image: demo-ui
        container_name: demo-ui
        build:
            context: ./my-demo-ui
        ports:
            - 80:80
        depends_on:
            - backend
        links: 
            - backend

The Front end application comes up but when I hit the backend app (through angular/nginx) it gives a 502 Bad Gateway Error.

Also I see these printed in NGINX console in docker

 [error] 30#30: *1 connect() failed (110: Operation timed out) while connecting to upstream, client: 172.18.0.1, server: , request: "GET /api/demoMethod HTTP/1.1", upstream: "http://172.17.0.2:8080/api/demoMethod", host: "localhost", referrer: "http://localhost/home"

2

Answers


  1. Here you’re missing the network configuration in the Docker-compose file, you need to link your two container so they can see one another.

    Login or Signup to reply.
  2. In your docker-compose file you have

    container_name: demo
    

    but in the nginx configuration you’re using the name backend. You have to use the container name demo in the nginx configuration. The service name backend can only be used inside the docker-compose file.

    Additionally:

    Warning

    The –link flag is a legacy feature of Docker. It may eventually be removed. Unless you absolutely need to continue using it, we recommend that you use user-defined networks to facilitate communication between two containers instead of using –link.

    One feature that user-defined networks do not support that you can do with –link is sharing environmental variables between containers. However, you can use other mechanisms such as volumes to share environment variables between containers in a more controlled way.

    Docker Composer doc

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search