0

Before we get to the "this is a repost" and "this question has already been answered" comments, I will reference 3 of the other questions that I've already combed through, none of which is fixing my issue.

First Similar Question

Second Similar Question

Third Similar Question

There were a few other questions that I've reviewed but they all propose very similar solutions. I'm hoping this is a simple fix, but 10 hours of debugging later with the other solutions, I'm having the same issue: my Angular front-end refuses to connect to my Java back-end when deployed inside docker containers. Here are the relevant code snippets I believe will be requested. I'm happy to add additional snippets as requested.

proxy.conf.json

{
    "/raid-api": {
      "target": "http://172.20.0.4:8080",
      "secure": false
    }
}

package.json

{
  "name": "ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -H 0.0.0.0 --proxy-config proxy.config.json",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "docker": "docker build -t ng-ui .",
    "ng-notes": "docker run -p 4200:80 ng-ui",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "angular": "^1.8.2",
    "npm-check-updates": "^11.8.5",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.7",
    "@angular/cli": "~12.2.7",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "gulp": "^3.9.1",
    "gulp-cli": "^1.4.0",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5"
  },
  "description": "This project was generated with [Angular CLI]                (https://github.com/angular/angular-cli) version 12.2.7.",
  "main": "karma.conf.js",
  "author": "",
  "license": "ISC"
}

Dockerfile (UI)

# syntax=docker/dockerfile:1
FROM node:lts-alpine3.14 AS build

COPY package.json /usr/local/app/
WORKDIR /usr/local/app
RUN npm install
#RUN npm install -g @angular/cli@12.2.12 && npm install

COPY . /usr/local/app
RUN npm run build


FROM nginx:1.21.3-alpine

COPY --from=build /usr/local/app/dist/ui /usr/share/nginx/html

EXPOSE 80

Docker-Compose.yml

version: "3.9"
services:
    web:
        build: ./RaidAPI
        container_name: web
        ports:
            - "8080:8080"
        depends_on:
            - postgres
    ui:
        build: ./RaidAPI/src/main/ui
        container_name: ui
        ports:
            - "4200:80"
        depends_on:
            - web
        volumes:
            - ui:/usr/local/app/app-ui
            - /usr/local/app/app-ui/node_modules
    pgadmin:
        restart: always
        image: dpage/pgadmin4
        container_name: pgadmin
        ports:
            - "5050:80"
        volumes:
            - pgadmin:/var/lib/pgadmin
        environment:
            - PGADMIN_DEFAULT_EMAIL=(login email)
            - PGADMIN_DEFAULT_PASSWORD=(login password)
        depends_on:
            - postgres
    postgres:
        image: postgres
        restart: always
        container_name: postgres
        ports:
            - "5432:5432"
        volumes:
            - raid-db:/var/lib/postgresql/data
        environment:
            - POSTGRES_DB=(db)
            - POSTGRES_USER=(user)
            - POSTGRES_PASSWORD=(password)
networks:
    default:
        name: raid-net
        external: true
volumes:
    raid-db: {}
    pgadmin: {}
    ui: {}

nginx.conf

upstream web {
  server web:8080;
}

server {
  listen 80;

  root    /usr/share/nginx/html;
  index   index.html index.htm;

  gzip on;
  gzip_min_length 1000;
  gzip_proxied expired no-cache no-store private auth;
  gzip_types text/plain text/css application/json application/javascript     application/x-javascript text/xml application/xml application/xml+rss text/javascript;

  location / {
    try_files $uri /index.html;
  }

  location /raid-api {
      rewrite ^/raid-api/(.*) /$1 break;
      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-Forwarded-Proto $scheme;
      proxy_pass http://web:8080/raid-api;
  }
}

I am happy to provide whatever additional files requested. I've tested the Angular UI deployment outside of the Docker container and it fully completes REST calls and pulls the data as expected (after I revert proxy.conf.json back to localhost:8080 from web:8080). Once the UI is deployed into the container, I always get the same error:

DriveService: getDrives failed: Http failure response for http://localhost:4200/raid-api/drives: 404 Not Found

Any help that you can provide would be great. Thanks in advance!

Phil
  • 1
  • 1

0 Answers0