From c970b81d848f57f860bc3fb2394efa9536ed07e4 Mon Sep 17 00:00:00 2001
From: Dmytro Bondar <git@bonddim.com>
Date: Mon, 4 Mar 2024 09:32:47 +0100
Subject: [PATCH] Add frontend to Dockerfile and use cross-platform build

---
 .dockerignore           |  4 +++
 .gitignore              |  5 +--
 Dockerfile              | 72 +++++++++++++++++++++++------------------
 frontend/vite.config.js |  3 +-
 4 files changed, 49 insertions(+), 35 deletions(-)
 create mode 100644 .dockerignore

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..037e959
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,4 @@
+.github/
+**/.vscode/
+frontend/node_modules/
+internal/app/api/core/frontend-dist
diff --git a/.gitignore b/.gitignore
index af9f16e..0d68aea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,10 +32,11 @@ ssh.key
 .testCoverage.txt
 wg_portal.db
 sqlite.db
-go.sum
 swagger.json
 swagger.yaml
 /config.yml
 /config/
 venv/
-.cache/
\ No newline at end of file
+.cache/
+# ignore local frontend dist directory
+internal/app/api/core/frontend-dist
diff --git a/Dockerfile b/Dockerfile
index e9fb8dc..fac2408 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,54 +1,62 @@
 # Dockerfile References: https://docs.docker.com/engine/reference/builder/
 # This dockerfile uses a multi-stage build system to reduce the image footprint.
 
-######-
-# Start from the latest golang base image as builder image (only used to compile the code)
-######-
-FROM golang:1.21 as builder
-
-ARG BUILD_IDENTIFIER
-ENV ENV_BUILD_IDENTIFIER=$BUILD_IDENTIFIER
-
-ARG BUILD_VERSION
-ENV ENV_BUILD_VERSION=$BUILD_VERSION
-
-# populated by BuildKit
-ARG TARGETPLATFORM
-ENV ENV_TARGETPLATFORM=$TARGETPLATFORM
-
-RUN mkdir /build
-
-# Copy the source from the current directory to the Working Directory inside the container
-ADD . /build/
-
-# Set the Current Working Directory inside the container
+######
+# Build frontend
+######
+FROM --platform=${BUILDPLATFORM} node:lts-alpine as frontend
+# Set the working directory
 WORKDIR /build
+# Download dependencies
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm ci
+# Set dist output directory
+ENV DIST_OUT_DIR="dist"
+# Copy the sources to the working directory
+COPY frontend .
+# Build the frontend
+RUN npm run build
 
+######
+# Build backend
+######
+FROM --platform=${BUILDPLATFORM} golang:1.21 as builder
+# Set the working directory
+WORKDIR /build
+# Download dependencies
+COPY go.mod go.sum ./
+RUN go mod download
+# Copy the sources to the working directory
+COPY . .
+# Copy the frontend build result
+COPY --from=frontend /build/dist/ ./internal/app/api/core/frontend-dist/
+# Set the build version and identifier from arguments
+ARG BUILD_IDENTIFIER BUILD_VERSION
+ENV ENV_BUILD_IDENTIFIER=${BUILD_IDENTIFIER}
+ENV ENV_BUILD_VERSION=${BUILD_VERSION}
+
+# Split to cross-platform build
+ARG TARGETARCH
+ENV GOARCH=${TARGETARCH}
 # Build the Go app
-RUN echo "Building version '$ENV_BUILD_IDENTIFIER-$ENV_BUILD_VERSION' for platform $ENV_TARGETPLATFORM"; make build
+RUN echo "Building version '$ENV_BUILD_IDENTIFIER-$ENV_BUILD_VERSION' for architecture $TARGETARCH"
+RUN make build
 
-######-
-# Here starts the main image
-######-
+######
+# Final image
+######
 FROM alpine:3.19
-
 # Install OS-level dependencies
 RUN apk add --no-cache bash openresolv
-
 # Setup timezone
 ENV TZ=Europe/Vienna
-
 # Copy binaries
 COPY --from=builder /build/dist/wg-portal /app/wg-portal
-
 # Set the Current Working Directory inside the container
 WORKDIR /app
-
 # by default, the web-portal is reachable on port 8888
 EXPOSE 8888/tcp
-
 # the database and config file can be mounted from the host
 VOLUME [ "/app/data", "/app/config" ]
-
 # Command to run the executable
 ENTRYPOINT [ "/app/wg-portal" ]
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 1a0bc42..b9bb9d1 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -12,7 +12,8 @@ export default defineConfig({
     }
   },
   build: {
-    outDir: '../internal/app/api/core/frontend-dist',
+    //
+    outDir: process.env.DIST_OUT_DIR || '../internal/app/api/core/frontend-dist',
     emptyOutDir: true
   },
   // local dev api (proxy to avoid cors problems)