From 93f542d092d2f712539d54485b420c73ae88ac40 Mon Sep 17 00:00:00 2001
From: Alex Creasy <alex@creasy.dev>
Date: Thu, 8 Aug 2024 13:28:40 +0100
Subject: [PATCH] Add Dockerfile for serving containerised frontend (#252)

* Dockerfile for serving the frontend and proxying calls to the bff.
  * An example docker-compose for running the stack.
  * Webpack config for proxying and url rewriting for the frontend in dev mode.
  * A frontend Makefile for building the docker image

Signed-off-by: Alex Creasy <alex@creasy.dev>
---
 clients/ui/docker-compose.yaml            | 23 +++++++++++++++++++++++
 clients/ui/frontend/.dockerignore         |  2 ++
 clients/ui/frontend/Dockerfile            | 17 +++++++++++++++++
 clients/ui/frontend/Makefile              | 13 +++++++++++++
 clients/ui/frontend/config/webpack.dev.js | 14 +++++++++++++-
 clients/ui/frontend/nginx.conf            | 21 +++++++++++++++++++++
 6 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 clients/ui/docker-compose.yaml
 create mode 100644 clients/ui/frontend/.dockerignore
 create mode 100644 clients/ui/frontend/Dockerfile
 create mode 100644 clients/ui/frontend/Makefile
 create mode 100644 clients/ui/frontend/nginx.conf

diff --git a/clients/ui/docker-compose.yaml b/clients/ui/docker-compose.yaml
new file mode 100644
index 000000000..6c5f4bd74
--- /dev/null
+++ b/clients/ui/docker-compose.yaml
@@ -0,0 +1,23 @@
+services:
+  frontend:
+    build: ./frontend
+    container_name: model-registry-ui
+    ports:
+      - 8080:8080
+    environment:
+      API_URL: http://model-registry-bff:4001
+    networks:
+      - model_registry
+    depends_on:
+      - bff
+  bff:
+    build: ./bff
+    container_name: model-registry-bff
+    command:
+      - "--mock-k8s-client=true"
+    networks:
+      - model_registry
+
+networks:
+  model_registry:
+    name: model_registry
diff --git a/clients/ui/frontend/.dockerignore b/clients/ui/frontend/.dockerignore
new file mode 100644
index 000000000..1eae0cf67
--- /dev/null
+++ b/clients/ui/frontend/.dockerignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/clients/ui/frontend/Dockerfile b/clients/ui/frontend/Dockerfile
new file mode 100644
index 000000000..2b20d06f0
--- /dev/null
+++ b/clients/ui/frontend/Dockerfile
@@ -0,0 +1,17 @@
+FROM node:18 AS build-stage
+
+WORKDIR /usr/src/app
+
+COPY . /usr/src/app
+
+RUN npm cache clean --force
+RUN npm ci --omit=optional
+RUN npm run build
+
+FROM nginxinc/nginx-unprivileged
+
+ENV API_URL="http://localhost:4001"
+ENV NGINX_ENVSUBST_FILTER="API_URL"
+
+COPY --from=build-stage /usr/src/app/dist/ "/usr/share/nginx/html"
+COPY --from=build-stage /usr/src/app/nginx.conf "/etc/nginx/templates/default.conf.template"
diff --git a/clients/ui/frontend/Makefile b/clients/ui/frontend/Makefile
new file mode 100644
index 000000000..f11445091
--- /dev/null
+++ b/clients/ui/frontend/Makefile
@@ -0,0 +1,13 @@
+CONTAINER_TOOL ?= docker
+IMG ?= model-registry-ui:latest
+
+.PHONY: all
+all: docker-build
+
+.PHONY: help
+help: ## Display this help.
+	@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n  make \033[36m<target>\033[0m\n"} /^[a-zA-Z_0-9-]+:.*?##/ { printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
+
+.PHONY: docker-build
+docker-build:
+	$(CONTAINER_TOOL) build -t ${IMG} .
diff --git a/clients/ui/frontend/config/webpack.dev.js b/clients/ui/frontend/config/webpack.dev.js
index 0fe077e71..311a91196 100644
--- a/clients/ui/frontend/config/webpack.dev.js
+++ b/clients/ui/frontend/config/webpack.dev.js
@@ -6,6 +6,9 @@ const common = require('./webpack.common.js');
 const { stylePaths } = require('./stylePaths');
 const HOST = process.env.HOST || 'localhost';
 const PORT = process.env.PORT || '9000';
+const PROXY_HOST = process.env.PROXY_HOST || 'localhost';
+const PROXY_PORT = process.env.PROXY_PORT || '4000';
+const PROXY_PROTOCOL = process.env.PROXY_PROTOCOL || 'http:';
 const relativeDir = path.resolve(__dirname, '..');
 
 module.exports = merge(common('development'), {
@@ -21,7 +24,16 @@ module.exports = merge(common('development'), {
     },
     client: {
       overlay: true
-    }
+    },
+    proxy: {
+      '/api': {
+        target: {
+          host: PROXY_HOST,
+          protocol: PROXY_PROTOCOL,
+          port: PROXY_PORT,
+        },
+      },
+    },
   },
   module: {
     rules: [
diff --git a/clients/ui/frontend/nginx.conf b/clients/ui/frontend/nginx.conf
new file mode 100644
index 000000000..5e36e5d96
--- /dev/null
+++ b/clients/ui/frontend/nginx.conf
@@ -0,0 +1,21 @@
+server {
+        listen       8080 default_server;
+        listen       [::]:8080 default_server;
+        server_name  _;
+        root         /usr/share/nginx/html;
+        gzip         on;
+        access_log   /dev/stdout main;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        location /api/ {
+            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 ${API_URL};
+         }
+    }
+