Skip to content

Commit

Permalink
Add Dockerfile for serving containerised frontend (#252)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
alexcreasy authored Aug 8, 2024
1 parent 7e39377 commit 93f542d
Show file tree
Hide file tree
Showing 6 changed files with 89 additions and 1 deletion.
23 changes: 23 additions & 0 deletions clients/ui/docker-compose.yaml
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions clients/ui/frontend/.dockerignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
dist/
node_modules/
17 changes: 17 additions & 0 deletions clients/ui/frontend/Dockerfile
Original file line number Diff line number Diff line change
@@ -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"
13 changes: 13 additions & 0 deletions clients/ui/frontend/Makefile
Original file line number Diff line number Diff line change
@@ -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} .
14 changes: 13 additions & 1 deletion clients/ui/frontend/config/webpack.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'), {
Expand All @@ -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: [
Expand Down
21 changes: 21 additions & 0 deletions clients/ui/frontend/nginx.conf
Original file line number Diff line number Diff line change
@@ -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};
}
}

0 comments on commit 93f542d

Please sign in to comment.