Implement redirect for /api in docker deployment

docker-compose.yml

@@ -21,8 +21,6 @@ services:
     depends_on:
       - "db"
     restart: always
-    ports:
-      - "8080:8080"
   frontend:
     build:
       context: ./frontend
@@ -35,12 +33,4 @@ services:
     ports:
       - "4200:80"
     environment:
-      # change this env-variable in prod
+      BACKEND_URL: http://backend:8080
-      BACKEND_URL: http://backend/
-    # alternative way manipulate the api.json:
-    #{
-    #  "api": "http://backend/"
-    #}
-    # bind-mount it read-only via:
-    #volumes:
-    #  - ./api.json:/usr/share/nginx/html/assets/api.json:ro

frontend/Dockerfile

@@ -12,7 +12,12 @@ RUN apt-get update
 RUN apt-get upgrade -y
 RUN apt-get install iputils-ping -y
 COPY --from=build /app/dist/frontend /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/nginx.conf
+COPY nginx.conf.template /etc/nginx/nginx.conf.template
+COPY docker-entrypoint.sh /app-entrypoint.sh
+
+RUN chmod +x /app-entrypoint.sh
+
+ENTRYPOINT [ "/app-entrypoint.sh" ]
 
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

frontend/docker-entrypoint.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+cd /etc/nginx/
+envsubst '$BACKEND_URL' < nginx.conf.template > nginx.conf
+exec "$@"

frontend/nginx.conf.template

@@ -34,7 +34,7 @@ http {
          add_header "Access-Control-Allow-Headers" 'X-Requested-With,Accept,Content-Type, Origin';
 
         location /api {
-           proxy_pass http://backend/;
+           proxy_pass ${BACKEND_URL};
            add_header "Access-Control-Allow-Origin" "*";
            add_header "Access-Control-Allow-Methods" 'GET, POST, OPTIONS, PUT, DELETE';
            add_header "Access-Control-Allow-Headers" 'X-Requested-With,Accept,Content-Type, Origin';

frontend/src/app/app.module.ts

@@ -6,7 +6,7 @@ import { AppComponent } from './app.component';
 import {LoginComponent} from "./auth/login/login.component";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {HttpClient, HttpClientModule, HttpHandler} from "@angular/common/http";
-import {ApiModule, Configuration} from "../api";
+import {ApiModule, Configuration, ConfigurationParameters} from "../api";
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MatToolbarModule} from "@angular/material/toolbar";
 import {MatIconModule} from "@angular/material/icon";
@@ -178,7 +178,7 @@ import {MatLegacySliderModule} from "@angular/material/legacy-slider";
             // context
             "API_TOKEN": authService.getAccessToken.bind(authService)
           },
-          //basePath: environment.api
+          basePath: environment.api,
         }
       ),
       deps: [AuthService],

frontend/src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  api: "api"
+  api: "http://localhost:8080/api"
 };
 
 /*