Avoid redundant frontend builds (#707)

The goal is to avoid redundant frontend builds for each architecture,
since the frontend artifacts are just plain text files / noarch.

For now it's only for upstream builds, but the goal would be to have the
same with konflux

Author: jotak

Dockerfile

@@ -1,24 +1,6 @@
-ARG TARGETARCH
-FROM docker.io/library/node:18-alpine as web-builder
-
-USER node
-
-ARG BUILDSCRIPT
-WORKDIR /opt/app-root
-
-COPY --chown=node web/package.json web/package.json
-COPY --chown=node web/package-lock.json web/package-lock.json
-WORKDIR /opt/app-root/web
-RUN CYPRESS_INSTALL_BINARY=0 npm --legacy-peer-deps ci
-
-WORKDIR /opt/app-root
-COPY --chown=node web web
-COPY mocks mocks
-
-WORKDIR /opt/app-root/web
-RUN npm run format-all
-RUN npm run build$BUILDSCRIPT
+FROM localhost/local-front-build:latest as web-builder
 
+ARG TARGETARCH
 FROM docker.io/library/golang:1.23 as go-builder
 
 ARG TARGETARCH=amd64

Dockerfile.front

@@ -0,0 +1,23 @@
+FROM docker.io/library/node:18-alpine as web-builder
+
+USER node
+
+ARG BUILDSCRIPT
+WORKDIR /opt/app-root
+
+COPY --chown=node web/package-lock.json web/package-lock.json
+COPY --chown=node web/package.json web/package.json
+WORKDIR /opt/app-root/web
+RUN CYPRESS_INSTALL_BINARY=0 npm --legacy-peer-deps ci
+
+WORKDIR /opt/app-root
+COPY --chown=node web web
+COPY mocks mocks
+
+WORKDIR /opt/app-root/web
+RUN npm run format-all
+RUN npm run build$BUILDSCRIPT
+
+FROM scratch
+
+COPY --from=web-builder /opt/app-root/web/dist /opt/app-root/web/dist

Makefile

@@ -50,7 +50,7 @@ CMDLINE_ARGS ?= --loglevel trace --config config/config.yaml
 # build a single arch target provided as argument
 define build_target
 	echo 'building image for arch $(1)'; \
-	DOCKER_BUILDKIT=1 $(OCI_BIN) buildx build --ulimit nofile=20480:20480 --load --build-arg LDFLAGS="${LDFLAGS}" --build-arg BUILDSCRIPT=${BUILDSCRIPT} --build-arg TARGETARCH=$(1) ${OCI_BUILD_OPTS} -t ${IMAGE}-$(1) -f Dockerfile .;
+	DOCKER_BUILDKIT=1 $(OCI_BIN) buildx build --load --build-arg LDFLAGS="${LDFLAGS}" --build-arg TARGETARCH=$(1) ${OCI_BUILD_OPTS} -t ${IMAGE}-$(1) -f Dockerfile .;
 endef
 
 # push a single arch target image
@@ -196,6 +196,7 @@ serve-mock: YQ ## Run backend using mocks
 # note: to build and push custom image tag use: IMAGE_ORG=myuser VERSION=dev make images
 .PHONY: image-build
 image-build: ## Build MULTIARCH_TARGETS images
+	$(OCI_BIN) build --ulimit nofile=20480:20480 --build-arg BUILDSCRIPT=${BUILDSCRIPT} ${OCI_BUILD_OPTS} -t localhost/local-front-build:latest -f Dockerfile.front .
 	trap 'exit' INT; \
 	$(foreach target,$(MULTIARCH_TARGETS),$(call build_target,$(target)))