Refactor API and UI to be 2 separate entities

Author: mjudeikis

.github/workflows/ci.yaml

@@ -27,8 +27,8 @@ jobs:
     name: go-test-e2e
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-go@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-go@v5
       with:
         go-version: v1.24.0
     - run: make test-e2e
@@ -38,8 +38,8 @@ jobs:
     name: go-test
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-go@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-go@v5
       with:
         go-version: v1.24.0
     - run: make test
@@ -48,8 +48,8 @@ jobs:
     name: lint
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-go@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-go@v5
       with:
         go-version: v1.24.0
     - run: make lint
@@ -58,8 +58,8 @@ jobs:
     name: verify
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-go@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-go@v5
       with:
         go-version: v1.24.0
     - run: make verify

.github/workflows/goreleaser.yml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
       with:
         fetch-depth: 0
     - uses: actions/setup-go@v5

.github/workflows/image.yaml

@@ -16,18 +16,30 @@ jobs:
   image:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-go@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-go@v5
       with:
         go-version: v1.24.0
         check-latest: true
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+        cache-dependency-path: web/package-lock.json
+
     # We need this to remove local tags that are not semver so goreleaser doesn't get confused.
     - name: Delete non-semver tags
       run: 'git tag -d $(git tag -l | grep -v "^v")'
+
+    # Set up Docker Buildx for multi-platform builds
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+
     # If you notice signing errors, you may need to update the cosign version.
     - uses: sigstore/cosign-installer@v3.7.0
-    - name: Install ko
-      run: go install github.com/google/ko@latest
+
 
     - name: Install Helm
       uses: azure/setup-helm@v3
@@ -37,31 +49,83 @@ jobs:
     - name: Set LDFLAGS
       run: echo LDFLAGS="$(make ldflags)" | tee -a >> $GITHUB_ENV
 
-    # Build ko from HEAD, build and push an image tagged with the commit SHA,
-    # then keylessly sign it with cosign.
-    - name: Publish and sign konnector image
+    # Login to GitHub Container Registry (used by both ko and Docker)
+    - name: Login to GitHub Container Registry  
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    # Build and push konnector image using Dockerfile.konnector
+    - name: Build and push konnector image
+      uses: docker/build-push-action@v6
+      id: build-konnector
+      with:
+        context: .
+        file: ./Dockerfile.konnector
+        platforms: linux/amd64,linux/arm64
+        push: true
+        tags: |
+          ghcr.io/${{ github.repository_owner }}/konnector:latest
+          ghcr.io/${{ github.repository_owner }}/konnector:${{ github.sha }}
+          ghcr.io/${{ github.repository_owner }}/konnector:${{ github.ref_name }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+        build-args: |
+          LDFLAGS=${{ env.LDFLAGS }}
+        labels: |
+          org.opencontainers.image.title=Kube Bind Konnector
+          org.opencontainers.image.description=Kube Bind konnector component
+          org.opencontainers.image.source=https://github.com/${{ github.repository }}
+          org.opencontainers.image.revision=${{ github.sha }}
+          org.opencontainers.image.version=${{ github.ref_name }}
+
+    # Sign the konnector image
+    - name: Sign konnector image
       env:
-        KO_DOCKER_REPO: ghcr.io/${{ github.repository_owner }}/konnector
         COSIGN_EXPERIMENTAL: 'true'
       run: |
-        echo "${{ github.token }}" | ko login ghcr.io --username "${{ github.actor }}" --password-stdin
-        img=$(ko build --bare --platform=all -t latest -t ${{ github.sha }} -t ${{github.ref_name}} ./cmd/konnector)
-        echo "built ${img}"
+        img="ghcr.io/${{ github.repository_owner }}/konnector@${{ steps.build-konnector.outputs.digest }}"
+        echo "signing ${img}"
         cosign sign ${img} \
             --yes \
             -a sha=${{ github.sha }} \
             -a ref=${{ github.ref }} \
             -a run_id=${{ github.run_id }} \
             -a run_attempt=${{ github.run_attempt }}
 
-    - name: Publish and sign backend image
+    # Build and push backend image using Dockerfile (includes frontend)
+    - name: Build and push backend image
+      uses: docker/build-push-action@v6
+      id: build
+      with:
+        context: .
+        file: ./Dockerfile
+        platforms: linux/amd64,linux/arm64
+        push: true
+        tags: |
+          ghcr.io/${{ github.repository_owner }}/backend:latest
+          ghcr.io/${{ github.repository_owner }}/backend:${{ github.sha }}
+          ghcr.io/${{ github.repository_owner }}/backend:${{ github.ref_name }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+        build-args: |
+          LDFLAGS=${{ env.LDFLAGS }}
+        labels: |
+          org.opencontainers.image.title=Kube Bind Backend
+          org.opencontainers.image.description=Kube Bind backend with integrated Vue.js frontend
+          org.opencontainers.image.source=https://github.com/${{ github.repository }}
+          org.opencontainers.image.revision=${{ github.sha }}
+          org.opencontainers.image.version=${{ github.ref_name }}
+
+    # Sign the backend image
+    - name: Sign backend image
       env:
-        KO_DOCKER_REPO: ghcr.io/${{ github.repository_owner }}/backend
         COSIGN_EXPERIMENTAL: 'true'
       run: |
-        echo "${{ github.token }}" | ko login ghcr.io --username "${{ github.actor }}" --password-stdin
-        img=$(ko build --bare --platform=all -t latest -t ${{ github.sha }} -t ${{github.ref_name}} ./cmd/backend)
-        echo "built ${img}"
+        img="ghcr.io/${{ github.repository_owner }}/backend@${{ steps.build.outputs.digest }}"
+        echo "signing ${img}"
         cosign sign ${img} \
             --yes \
             -a sha=${{ github.sha }} \

.gitignore

@@ -15,4 +15,10 @@ coverage.*
 /bin
 docs/generators/cli-doc/cli-doc
 apiserviceexport.yaml
-*.prod
+*.prod
+
+# Frontend dependencies and build
+web/node_modules/
+web/dist/
+web/.vite/
+web/*.tsbuildinfo

Dockerfile

@@ -12,4 +12,64 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-FROM golang:1.24.0 AS builder
+FROM golang:1.24.0 AS go-build-env
+WORKDIR /app
+
+# Accept build arguments for multi-arch support
+ARG TARGETARCH
+ARG TARGETOS
+ARG LDFLAGS
+
+RUN apt-get update && apt-get install -y make jq
+
+# <- COPY go.mod and go.sum files to the workspace
+COPY go.mod .
+COPY go.sum .
+
+# COPY the source code as the last step
+COPY . .
+
+# Build with custom LDFLAGS if provided, otherwise use make build
+# Use TARGETOS and TARGETARCH for cross-compilation
+RUN if [ -n "$LDFLAGS" ]; then \
+        echo "Building with LDFLAGS: $LDFLAGS for $TARGETOS/$TARGETARCH"; \
+        CGO_ENABLED=0 GOOS=$TARGETOS GOARCH=$TARGETARCH go build -ldflags="$LDFLAGS" -o bin/backend ./cmd/backend; \
+    else \
+        GOOS=$TARGETOS GOARCH=$TARGETARCH make build; \
+    fi
+
+# Use node:lts-alpine for better compatibility and smaller size
+FROM node:20.18.0-alpine3.20 AS ui-build-env
+WORKDIR /app
+
+# Install build dependencies needed for native modules
+RUN apk add --no-cache python3 make g++ 
+
+# Copy package files
+COPY ./web/package*.json ./
+COPY ./web/.npmrc ./
+
+RUN npm install
+
+# Install dependencies with specific flags to handle optional deps and architecture issues
+RUN npm ci --prefer-offline --no-audit --no-fund --no-optional
+
+# Copy the Vue app files
+COPY ./web .
+
+# Set environment to avoid native dependency issues
+ENV NODE_ENV=production
+ENV VITE_BUILD_TARGET=docker
+
+# Building UI with Docker-specific config
+RUN npm run build
+
+FROM alpine:3.22.1
+RUN apk --update add ca-certificates
+
+COPY --from=go-build-env /app/bin/backend /bin
+COPY --from=ui-build-env /app/dist /www
+
+
+
+ENTRYPOINT ["/bin/backend"]

Dockerfile.konnector

@@ -0,0 +1,35 @@
+# Copyright 2022 The Kube Bind Authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+FROM golang:1.24.0 AS builder
+WORKDIR /app
+
+# Accept build arguments for multi-arch support
+ARG TARGETARCH
+ARG TARGETOS
+ARG LDFLAGS
+
+# Copy the source code (needed for local replacements in go.mod)
+COPY . .
+RUN go mod download
+
+# Build the konnector binary
+RUN CGO_ENABLED=0 GOOS=$TARGETOS GOARCH=$TARGETARCH go build -ldflags="$LDFLAGS" -o bin/konnector ./cmd/konnector
+
+FROM alpine:3.22.1
+RUN apk --update add ca-certificates
+
+COPY --from=builder /app/bin/konnector /bin/konnector
+
+ENTRYPOINT ["/bin/konnector"]

Makefile

@@ -376,28 +376,38 @@ deploy-docs: venv ## Deploy docs
 	REMOTE=$(REMOTE) BRANCH=$(BRANCH) docs/scripts/deploy-docs.sh
 
 # Example: make IMAGE_REPO=ghcr.io/<username> image-local 
+# Set PLATFORMS to override default architectures (e.g., make PLATFORMS=linux/amd64,linux/arm64 image-local)
+# For local builds, default to current architecture on Linux platform to support --load
+PLATFORMS ?= linux/$(ARCH)
 .PHONY: image-local
 image-local:
-	@echo "Building images locally with tag $(REV)"
-	@command -v ko >/dev/null 2>&1 || { echo "ko not found. Install with: go install github.com/google/ko@latest"; exit 1; }
-
-	@echo "Building konnector image locally..."
-	KO_DOCKER_REPO=$(IMAGE_REPO) ko build \
-		--local \
-		-B \
-		-t $(REV) \
-		./cmd/konnector
-
-	@echo "Building backend image locally..."
-	KO_DOCKER_REPO=$(IMAGE_REPO) ko build \
-		--local \
-		-B \
-		-t $(REV) \
-		./cmd/backend
-
-	@echo "Successfully built local images:"
-	@echo "  $(IMAGE_REPO)/konnector:$(REV)"
-	@echo "  $(IMAGE_REPO)/backend:$(REV)"
+	@echo "Building multi-arch images locally with tag $(REV) for platforms: $(PLATFORMS)"
+	@command -v docker >/dev/null 2>&1 || { echo "docker not found. Please install Docker"; exit 1; }
+	@docker buildx version >/dev/null 2>&1 || { echo "docker buildx not found. Please enable buildx in Docker"; exit 1; }
+
+	@# Create buildx builder if it doesn't exist
+	@docker buildx create --name kube-bind-builder --use 2>/dev/null || docker buildx use kube-bind-builder 2>/dev/null || true
+	@docker buildx inspect --bootstrap >/dev/null 2>&1
+
+	@echo "Building konnector multi-arch image locally..."
+	docker buildx build \
+		--platform $(PLATFORMS) \
+		--build-arg LDFLAGS="$(LDFLAGS)" \
+		-t $(IMAGE_REPO)/konnector:$(REV) \
+		-f Dockerfile.konnector \
+		--load .
+
+	@echo "Building backend multi-arch image locally..."
+	docker buildx build \
+		--platform $(PLATFORMS) \
+		--build-arg LDFLAGS="$(LDFLAGS)" \
+		-t $(IMAGE_REPO)/backend:$(REV) \
+		-f Dockerfile \
+		--load .
+
+	@echo "Successfully built multi-arch local images:"
+	@echo "  $(IMAGE_REPO)/konnector:$(REV) ($(PLATFORMS))"
+	@echo "  $(IMAGE_REPO)/backend:$(REV) ($(PLATFORMS))"
 
 .PHONY: kind-load
 kind-load:

README.md

@@ -58,6 +58,8 @@ There are several ways to communicate with us:
 
 All the actions shown between the clusters are done by the konnector, except: the pull at the start is done by the kubectl plugin that installs the konnector.
 
+See [web/README.md](./web/README.md) for detailed frontend documentation.
+
 ## Usage
 
 To get familiar with setting up the environment, please check out docs at [kube-bind.io](https://docs.kube-bind.io/main/setup).