Revamp deployment files to get UI in one container

Signed-off-by: lucferbux <[email protected]>

.github/workflows/build-and-push-ui-images.yml

@@ -10,7 +10,7 @@ on:
 env:
   IMG_ORG: kubeflow
   IMG_UI_REPO: model-registry-ui
-  IMG_BFF_REPO: model-registry-bff
+  IMG_UI_REPO_STANDALONE: model-registry-ui-standalone
   DOCKER_USER: ${{ secrets.DOCKERHUB_USERNAME }}
   DOCKER_PWD: ${{ secrets.DOCKERHUB_TOKEN }}
   PUSH_IMAGE: true
@@ -36,11 +36,11 @@ jobs:
         env:
           IMG_REPO: ${{ env.IMG_UI_REPO }}
         run: ./scripts/build_deploy.sh
-      - name: Build and Push BFF Image
+      - name: Build and Push Standalone UI Image
         shell: bash
         env:
-          IMG_REPO: ${{ env.IMG_BFF_REPO }}
-        run: ./scripts/build_deploy.sh
+          IMG_REPO: ${{ env.IMG_UI_REPO_STANDALONE }}
+        run: MOCK_AUTH=true DEPLOYMENT_MODE=standalone ./scripts/build_deploy.sh
       - name: Tag Latest UI Image
         if: env.BUILD_CONTEXT == 'main'
         shell: bash
@@ -52,14 +52,14 @@ jobs:
           docker tag ${{ env.IMG }}:$VERSION ${{ env.IMG }}:latest
           # BUILD_IMAGE=false skip the build, just push the tag made above
           VERSION=latest ./scripts/build_deploy.sh
-      - name: Tag Latest BFF Image
+      - name: Tag Latest UI Image
         if: env.BUILD_CONTEXT == 'main'
         shell: bash
         env:
-          IMG_REPO: ${{ env.IMG_BFF_REPO }}
-          IMG: ${{ env.IMG_ORG }}/${{ env.IMG_BFF_REPO }}
-          BUILD_IMAGE: false # image is already built in "Build and Push BFF Image" step
+          IMG_REPO: ${{ env.IMG_UI_REPO_STANDALONE }}
+          IMG: ${{ env.IMG_ORG }}/${{ env.IMG_UI_REPO_STANDALONE }}
+          BUILD_IMAGE: false # image is already built in "Build and Push UI Image" step
         run: |
           docker tag ${{ env.IMG }}:$VERSION ${{ env.IMG }}:latest
           # BUILD_IMAGE=false skip the build, just push the tag made above
-          VERSION=latest ./scripts/build_deploy.sh
+          VERSION=latest ./scripts/build_deploy.sh

clients/ui/.env

@@ -1,5 +1,6 @@
 
 ############### Default settings ###############
 CONTAINER_TOOL=docker
-IMG_BFF=kubeflow/model-registry-bff:latest
-IMG_FRONTEND=kubeflow/model-registry-ui:latest
+IMG_UI=kubeflow/model-registry-ui:latest
+IMG_UI_STANDALONE=kubeflow/model-registry-ui-standalone:latest
+PLATFORM=linux/amd64

clients/ui/.env.production

@@ -1 +1,3 @@
 APP_ENV=production
+MOCK_AUTH=false
+DEPLOYMENT_MODE=integrated

clients/ui/Dockerfile

@@ -0,0 +1,59 @@
+# Source code for the repos
+ARG UI_SOURCE_CODE=./frontend
+ARG BFF_SOURCE_CODE=./bff
+
+# Set the base images for the build stages
+ARG NODE_BASE_IMAGE=node:20
+ARG GOLANG_BASE_IMAGE=golang:1.22.2
+ARG DISTROLESS_BASE_IMAGE=gcr.io/distroless/static:nonroot
+
+# UI build stage
+FROM ${NODE_BASE_IMAGE} AS ui-builder
+
+ARG UI_SOURCE_CODE
+
+WORKDIR /usr/src/app
+
+# Copy the source code to the container
+COPY ${UI_SOURCE_CODE} /usr/src/app
+
+# Install the dependencies and build
+RUN npm cache clean --force
+RUN npm ci --omit=optional
+RUN npm run build:prod
+
+# BFF build stage
+FROM ${GOLANG_BASE_IMAGE} AS bff-builder
+
+ARG BFF_SOURCE_CODE
+
+ARG TARGETOS
+ARG TARGETARCH
+
+WORKDIR /usr/src/app
+
+# Copy the Go Modules manifests
+COPY ${BFF_SOURCE_CODE}/go.mod ${BFF_SOURCE_CODE}/go.sum ./
+
+# Download dependencies
+RUN go mod download
+
+# Copy the go source files
+COPY ${BFF_SOURCE_CODE}/cmd/main.go cmd/main.go
+COPY ${BFF_SOURCE_CODE}/internal/ internal/
+
+# Build the Go application
+RUN CGO_ENABLED=0 GOOS=${TARGETOS:-linux} GOARCH=${TARGETARCH} go build -a -o bff ./cmd/main.go
+
+# Final stage
+# Use distroless as minimal base image to package the application binary
+FROM ${DISTROLESS_BASE_IMAGE}
+WORKDIR /
+COPY --from=bff-builder /usr/src/app/bff ./
+COPY --from=ui-builder /usr/src/app/dist ./static/
+USER 65532:65532
+
+# Expose port 8080
+EXPOSE 8080
+
+ENTRYPOINT ["/bff"]

clients/ui/Makefile

@@ -44,29 +44,27 @@ dev-start:
 
 ############ Build ############
 
-.PHONY: build-bff
-build-bff:
-	$(CONTAINER_TOOL) build -t ${IMG_BFF} ./bff
+.PHONY: docker-build
+docker-build:
+	$(CONTAINER_TOOL) build -t ${IMG_UI} .
 
-.PHONY: build-frontend
-build-frontend:
-	$(CONTAINER_TOOL) build -t ${IMG_FRONTEND} ./frontend
+.PHONY: docker-build-standalone
+docker-build-standalone:
+	MOCK_AUTH=true DEPLOYMENT_MODE=standalone $(CONTAINER_TOOL) build -t ${IMG_UI_STANDALONE} .
 
-.PHONY: build
-build: build-bff build-frontend
-
-############ Push ############
+.PHONY: docker-buildx
+docker-buildx:
+	docker buildx build --platform ${PLATFORM} -t ${IMG_UI} --push .
 
-.PHONY: push-bff
-push-bff:
-	${CONTAINER_TOOL} push ${IMG_BFF}
+.PHONY: docker-buildx-standalone
+docker-buildx-standalone:
+	MOCK_AUTH=true DEPLOYMENT_MODE=standalone docker buildx build --platform ${PLATFORM} -t ${IMG_UI_STANDALONE} --push .
 
-.PHONY: push-frontend
-push-frontend:
-	${CONTAINER_TOOL} push ${IMG_FRONTEND}
+############ Push ############
 
-.PHONY: push
-push: push-bff push-frontend
+.PHONY: docker-push
+docker-push:
+	${CONTAINER_TOOL} push ${IMG_UI}
 
 ############ Deployment ############
 
@@ -77,3 +75,20 @@ docker-compose:
 .PHONY: kind-deployment
 kind-deployment:
 	./scripts/deploy_kind_cluster.sh
+
+############ Build ############	
+.PHONY: frontend-build
+frontend-build:
+	cd frontend && npm run build:prod
+
+.PHONY: bff-build
+bff-build:
+	cd bff && make build
+
+.PHONY: build
+build: frontend-build bff-build
+
+############ Run mocked ########
+.PHONY: run-mocked
+run-mocked:
+	cp -r ./frontend/dist/ ./bff/static-local-run/ && cd bff && make run STATIC_ASSETS_DIR=./static-local-run

clients/ui/README.md

@@ -58,26 +58,19 @@ The following environment variables are used to configure the deployment and dev
 * **Possible Values**: `docker`, `podman`, etc.
 * **Example**: `CONTAINER_TOOL=docker`
 
-### `IMG_BFF`
+### `IMG_UI`
 
-* **Description**: Specifies the image name and tag for the Backend For Frontend (BFF) service.
-* **Default Value**: `model-registry-bff:latest`
-* **Example**: `IMG_BFF=model-registry-bff:latest`
-
-### `IMG_FRONTEND`
-
-* **Description**: Specifies the image name and tag for the frontend service.
-* **Default Value**: `model-registry-frontend:latest`
-* **Example**: `IMG_FRONTEND=model-registry-frontend:latest`
+* **Description**: Specifies the image name and tag for the UI (with BFF).
+* **Default Value**: `model-registry-ui:latest`
+* **Example**: `IMG_UI=model-registry-bff:latest`
 
 ### Example `.env.local` File
 
 Here is an example of what your `.env.local` file might look like:
 
 ```shell
 CONTAINER_TOOL=docker
-IMG_BFF=model-registry-bff:latest
-IMG_FRONTEND=model-registry-frontend:latest
+IMG_UI=kubeflow/model-registry-ui:latest
 ```
 
 ## Build and Push Commands
@@ -86,28 +79,11 @@ The following Makefile targets are used to build and push the Docker images for
 
 ### Build Commands
 
-* **`build-bff`**: Builds the Docker image for the BFF service.
-  * Command: `make build-bff`
-  * This command uses the `CONTAINER_TOOL` and `IMG_BFF` environment variables to build the image.
-
-* **`build-frontend`**: Builds the Docker image for the frontend service.
-  * Command: `make build-frontend`
-  * This command uses the `CONTAINER_TOOL` and `IMG_FRONTEND` environment variables to build the image.
-
-* **`build`**: Builds the Docker images for both the BFF and frontend services.
+* **`build`**: Builds the Docker image for both UI service.
   * Command: `make build`
-  * This command runs both `build-bff` and `build-frontend` targets.
 
 ### Push Commands
 
-* **`push-bff`**: Pushes the Docker image for the BFF service to the container registry.
-  * Command: `make push-bff`
-  * This command uses the `CONTAINER_TOOL` and `IMG_BFF` environment variables to push the image.
-
-* **`push-frontend`**: Pushes the Docker image for the frontend service to the container registry.
-  * Command: `make push-frontend`
-  * This command uses the `CONTAINER_TOOL` and `IMG_FRONTEND` environment variables to push the image.
-
-* **`push`**: Pushes the Docker images for both the BFF and frontend services to the container registry.
+* **`push`**: Pushes the Docker image for the UI service to the container registry.
   * Command: `make push`
-  * This command runs both `push-bff` and `push-frontend` targets.
+  * This command uses the `CONTAINER_TOOL` and `IMG_UI` environment variables to push the image.

clients/ui/bff/.gitignore

@@ -1 +1,2 @@
 /bin
+/static-local-run

clients/ui/bff/Makefile

@@ -1,4 +1,3 @@
-CONTAINER_TOOL ?= docker
 IMG ?= model-registry-bff:latest
 PORT ?= 4000
 MOCK_K8S_CLIENT ?= false
@@ -52,10 +51,6 @@ run: fmt vet envtest ## Runs the project.
 	ENVTEST_ASSETS="$(shell $(ENVTEST) use $(ENVTEST_K8S_VERSION) --bin-dir $(LOCALBIN) -p path)" \
 	go run ./cmd/main.go  --port=$(PORT) --static-assets-dir=$(STATIC_ASSETS_DIR) --mock-k8s-client=$(MOCK_K8S_CLIENT) --mock-mr-client=$(MOCK_MR_CLIENT) --dev-mode=$(DEV_MODE) --dev-mode-port=$(DEV_MODE_PORT)  --standalone-mode=$(STANDALONE_MODE)
 
-.PHONY: docker-build
-docker-build: ## Builds a container for the project.
-	$(CONTAINER_TOOL) build -t ${IMG} .
-
 ##@ Dependencies
 
 ## Location to install dependencies to

clients/ui/bff/cmd/main.go

@@ -19,7 +19,7 @@ import (
 
 func main() {
 	var cfg config.EnvConfig
-	flag.IntVar(&cfg.Port, "port", getEnvAsInt("PORT", 4000), "API server port")
+	flag.IntVar(&cfg.Port, "port", getEnvAsInt("PORT", 8080), "API server port")
 	flag.BoolVar(&cfg.MockK8Client, "mock-k8s-client", false, "Use mock Kubernetes client")
 	flag.BoolVar(&cfg.MockMRClient, "mock-mr-client", false, "Use mock Model Registry client")
 	flag.BoolVar(&cfg.DevMode, "dev-mode", false, "Use development mode for access to local K8s cluster")

clients/ui/bff/internal/api/app_test.go

@@ -1,13 +1,14 @@
 package api
 
 import (
+	"io"
+	"net/http"
+	httptest "net/http/httptest"
+
 	"github.com/kubeflow/model-registry/ui/bff/internal/config"
 	"github.com/kubeflow/model-registry/ui/bff/internal/repositories"
 	. "github.com/onsi/ginkgo/v2"
 	. "github.com/onsi/gomega"
-	"io"
-	"net/http"
-	httptest "net/http/httptest"
 )
 
 var _ = Describe("Static File serving Test", func() {

clients/ui/bff/static/index.html

@@ -7,4 +7,4 @@
 <h1>Welcome to the BFF Stub Page</h1>
 <p>This is a placeholder page for the serving frontend.</p>
 </body>
-</html>
+</html>

clients/ui/bff/static/sub/test.html

@@ -7,4 +7,4 @@
     <h1>Welcome to the BFF Stub Subfolder Page</h1>
     <p>This is a placeholder page for the serving frontend.</p>
 </body>
-</html>
+</html>

clients/ui/docker-compose.yaml

@@ -1,21 +1,12 @@
 services:
-  frontend:
-    build: ./frontend
+  ui:
+    build: .
     container_name: model-registry-ui
-    ports:
-      - 8080:8080
-    environment:
-      API_URL: http://model-registry-bff:4000
-    networks:
-      - model_registry
-    depends_on:
-      - bff
-  bff:
-    build: ./bff
-    container_name: model-registry-bff
     command:
       - "--mock-k8s-client=true"
       - "--mock-mr-client=true"
+      - "--dev-mode=true"
+      - "--standalone-mode=true"
     networks:
       - model_registry
 

clients/ui/frontend/.env.development

@@ -1,3 +1 @@
 APP_ENV=development
-MOCK_AUTH=true
-DEPLOYMENT_MODE=standalone