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 <[email protected]>

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

clients/ui/frontend/.dockerignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

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"

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} .

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: [

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};
+         }
+    }
+