♻️ improve docker compose deployment + made controlpanel production i…

…mages

configmanager/server.js

@@ -4,7 +4,7 @@ const fs = require('fs');
 const hsts = require('hsts')
 const path = require('path')
 
-const API_URL = "http://controlpanel-api:8050";
+const API_URL = process.env.CONTROLPANEL_API_URL;
 
 app.use(hsts({
   maxAge: 31536000,

controlpanel/api/.env

@@ -1,10 +1,10 @@
-DB_USER=<POSTGRES_USER>
-DB_PASSWORD=<POSTGRES_PASSWORD>
-DB_HOST=<POSTGRES_HOST>
-DB_PORT=<POSTGRES_PORT>
+DB_USER=postgres
+DB_PASSWORD=postgres
+DB_HOST=controlpanel-db
+DB_PORT=5432
 
 # Number of minutes
 CRON_CONFIGMANAGER=60
 
-CONTROLPANEL_FRONTEND_URL=<FRONT_END_URL> #http://localhost:4200
-CONFIGMANAGER_URL=<CONFIGMANAGER_URL> #http://localhost:3000
+CONTROLPANEL_FRONTEND_URL=http://localhost:4200
+CONFIGMANAGER_URL=http://configmanager:3000

controlpanel/api/Dockerfile

@@ -4,11 +4,10 @@ WORKDIR /app
 
 COPY package*.json ./
 
-RUN npm install -g nodemon
 RUN npm install
 
 COPY . .
 
 EXPOSE 8050
 
-CMD ["nodemon", "--watch", ".", "--legacy-watch", "server.js"]
+CMD ["node", "server.js"]

controlpanel/api/Dockerfile-dev

@@ -0,0 +1,14 @@
+FROM node:21
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install -g nodemon
+RUN npm install
+
+COPY . .
+
+EXPOSE 8050
+
+CMD ["nodemon", "--watch", ".", "--legacy-watch", "server.js"]

controlpanel/cad/Dockerfile

@@ -1,14 +1,25 @@
-FROM node:21
+FROM node:21 AS build
 
 WORKDIR /app
 
 COPY package*.json ./
 
-RUN npm install -g @angular/cli
-RUN npm install
+RUN npm ci
 
 COPY . .
 
-EXPOSE 4200
+RUN npm run build --prod
 
-CMD [ "ng", "serve", "--host", "0.0.0.0", "--port", "4200", "--poll", "1000"]
+FROM nginx:alpine
+
+RUN rm /etc/nginx/conf.d/default.conf
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist/cad/browser /usr/share/nginx/html
+COPY replace-env.sh /docker-entrypoint.d/99-replace-env.sh
+
+RUN chmod +x /docker-entrypoint.d/99-replace-env.sh
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

controlpanel/cad/Dockerfile-dev

@@ -0,0 +1,14 @@
+FROM node:21
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install -g @angular/cli
+RUN npm install
+
+COPY . .
+
+EXPOSE 4200
+
+CMD [ "ng", "serve", "--host", "0.0.0.0", "--port", "4200", "--poll", "1000"]

controlpanel/cad/angular.json

@@ -52,8 +52,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kB",
-                  "maximumError": "4kB"
+                  "maximumWarning": "8kB",
+                  "maximumError": "10kB"
                 }
               ],
               "outputHashing": "all"

controlpanel/cad/nginx.conf

@@ -0,0 +1,16 @@
+server {
+    listen 80;
+
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}

controlpanel/cad/replace-env.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+
+for file in /usr/share/nginx/html/*.js; do
+  echo "Processing $file ...";
+  sed -i 's|<REPLACE_CONTROLPANEL_API_URL>|'${CONTROLPANEL_API_URL}'|g' $file
+done
+
+exec "$@"

controlpanel/cad/src/app/services/global-state.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ProtectedApp } from '../models/protected-app';
 import { BehaviorSubject } from 'rxjs';
+import { environment } from '../../environments/environment';
 
 @Injectable({
   providedIn: 'root'
@@ -9,7 +10,7 @@ export class GlobalStateService {
 
   private selectedAppSubject = new BehaviorSubject<ProtectedApp>(this.selectedApp);
   selectedApp$ = this.selectedAppSubject.asObservable();
-  readonly API_URL = 'http://localhost:8050'; // http://controlpanel-api:8050
+  readonly API_URL = environment.CONTROLPANEL_API_URL;
 
   get selectedApp(): ProtectedApp {
     const local = localStorage.getItem('protectedApp');

controlpanel/cad/src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+    CONTROLPANEL_API_URL: '<REPLACE_CONTROLPANEL_API_URL>',
+}

docker-compose.yaml

@@ -15,6 +15,8 @@ services:
     - configvolume:/data/blocklist
     ports:
       - "3000:3000"
+    environment:
+      - CONTROLPANEL_API_URL=http://controlpanel-api:8050
 
   proxy:
     container_name: proxy
@@ -39,6 +41,8 @@ services:
     ports:
       - "24224:24224"
       - "24224:24224/udp"
+    environment:
+      - CONTROLPANEL_API_URL=controlpanel-api
 
   clone:
     container_name: clone
@@ -58,10 +62,47 @@ services:
     logging:
       driver: fluentd
 
+  # controlpanel-api-dev:
+  #   container_name: controlpanel-api-dev
+  #   build: 
+  #     context: controlpanel/api
+  #     dockerfile: Dockerfile-dev
+  #   image: api-dev
+  #   ports:
+  #     - 8050:8050
+  #   depends_on:
+  #     config:
+  #       condition: service_started
+  #     controlpanel-db:
+  #       condition: service_healthy
+  #     fluent:
+  #       condition: service_started
+  #   volumes:
+  #     - ./controlpanel/api:/app:cached
+  #     - /app/node_modules
+
+  # controlpanel-dev:
+  #   container_name: controlpanel-dev
+  #   build: 
+  #     context: controlpanel/cad
+  #     dockerfile: Dockerfile-dev
+  #   image: controlpanel-dev
+  #   ports: 
+  #   - 4200:4200
+  #   depends_on:
+  #     - controlpanel-api-dev
+  #   volumes:
+  #     - ./controlpanel/cad:/app
+  #     - /app/node_modules
+  #   environment:
+  #     - CHOKIDAR_USEPOLLING=true
+
   controlpanel-api:
     container_name: controlpanel-api
-    build: controlpanel/api
-    image: api
+    build: 
+      context: controlpanel/api
+      dockerfile: Dockerfile
+    # image: ghcr.io/sap/controlpanel-api:latest
     ports:
       - 8050:8050
     depends_on:
@@ -71,23 +112,27 @@ services:
         condition: service_healthy
       fluent:
         condition: service_started
-    volumes:
-      - ./controlpanel/api:/app:cached
-      - /app/node_modules
+    environment:
+      - DB_USER=postgres
+      - DB_PASSWORD=postgres
+      - DB_HOST=controlpanel-db
+      - DB_PORT=5432
+      - CRON_CONFIGMANAGER=60
+      - CONTROLPANEL_FRONTEND_URL=http://localhost
+      - CONFIGMANAGER_URL=http://configmanager:3000
 
   controlpanel:
     container_name: controlpanel
-    build: controlpanel/cad
-    image: controlpanel
+    build:
+      context: controlpanel/cad
+      dockerfile: Dockerfile
+    # image: ghcr.io/sap/controlpanel-frontend:latest
     ports: 
-    - 4200:4200
+    - 80:80
     depends_on:
       - controlpanel-api
-    volumes:
-      - ./controlpanel/cad:/app
-      - /app/node_modules
     environment:
-      - CHOKIDAR_USEPOLLING=true
+      - CONTROLPANEL_API_URL=http://localhost:8050
 
   controlpanel-db:
     image: postgres
@@ -102,7 +147,7 @@ services:
     volumes:
     - postgres_data:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      test: ["CMD-SHELL", "pg_isready"]
       interval: 10s
       timeout: 5s
       retries: 5

fluentbit/fluent-bit.conf

@@ -14,7 +14,7 @@
 [OUTPUT]
     Name    http
     Match   **
-    Host    controlpanel-api
+    Host    ${CONTROLPANEL_API_URL}
     Port    8050
     URI     /logs
     Format  json