From 85026305507793c350ae4f381fb3d100518ea857 Mon Sep 17 00:00:00 2001 From: Nix Date: Sun, 4 May 2025 14:13:02 -0400 Subject: [PATCH] Add docker build file for UI and associated Actions workflow --- ...{docker-image.yml => api-docker-image.yml} | 2 + .github/workflows/ui-docker-image.yml | 88 ++++++++++++++++++ .gitignore | 2 + barkmanui/.dockerignore | 1 + barkmanui/.env.docker | 1 + barkmanui/ops/docker/caddy/Caddyfile | 6 ++ barkmanui/ops/docker/entrypoint.sh | 27 ++++++ barkmanui/package.json | 2 +- barkmanui/release.Dockerfile | 17 ++++ barkmanui/{public => src/assets}/barklogo.png | Bin .../src/common/components/BarkHeader.tsx | 3 +- barkmanui/tsconfig.app.json | 7 +- barkmanui/vite.config.ts | 6 ++ 13 files changed, 159 insertions(+), 3 deletions(-) rename .github/workflows/{docker-image.yml => api-docker-image.yml} (98%) create mode 100644 .github/workflows/ui-docker-image.yml create mode 100644 barkmanui/.dockerignore create mode 100644 barkmanui/.env.docker create mode 100644 barkmanui/ops/docker/caddy/Caddyfile create mode 100644 barkmanui/ops/docker/entrypoint.sh create mode 100644 barkmanui/release.Dockerfile rename barkmanui/{public => src/assets}/barklogo.png (100%) diff --git a/.github/workflows/docker-image.yml b/.github/workflows/api-docker-image.yml similarity index 98% rename from .github/workflows/docker-image.yml rename to .github/workflows/api-docker-image.yml index c95d0e4..fbf4cf5 100644 --- a/.github/workflows/docker-image.yml +++ b/.github/workflows/api-docker-image.yml @@ -5,8 +5,10 @@ on: branches: [ "main" ] # Publish semver tags as releases. tags: [ 'v*.*.*' ] + paths: [ 'barkmanAPI/**' ] pull_request: branches: [ "main" ] + paths: [ 'barkmanAPI/**' ] env: # Use docker.io for Docker Hub if empty diff --git a/.github/workflows/ui-docker-image.yml b/.github/workflows/ui-docker-image.yml new file mode 100644 index 0000000..008f841 --- /dev/null +++ b/.github/workflows/ui-docker-image.yml @@ -0,0 +1,88 @@ +name: Publish Docker Image + +on: + push: + branches: [ "main" ] + # Publish semver tags as releases. + tags: [ 'v*.*.*' ] + paths: [ 'barkmanui/**' ] + pull_request: + branches: [ "main" ] + paths: [ 'barkmanui/**' ] +env: + # Use docker.io for Docker Hub if empty + REGISTRY: ghcr.io + # github.repository as / + IMAGE_NAME: Pup-Ion-Dev/barkman-ui + + +jobs: + build: + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + # This is used to complete the identity challenge + # with sigstore/fulcio when running outside of PRs. + id-token: write + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Install cosign + if: github.event_name != 'pull_request' + uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 #v3.5.0 + with: + cosign-release: 'v2.2.4' + + # Set up BuildKit Docker container builder to be able to build + # multi-platform images and export cache + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0 + + # Login against a Docker registry except on PR + - name: Log into registry ${{ env.REGISTRY }} + if: github.event_name != 'pull_request' + uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0 + with: + registry: ${{ env.REGISTRY }} + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + # Extract metadata (tags, labels) for Docker + - name: Extract Docker metadata + id: meta + uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0 + with: + images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} + tags: | + type=raw,value=latest,enable={{is_default_branch}} + type=sha,format=long + + # Build and push Docker image with Buildx (don't push on PR) + - name: Build and push Docker image + id: build-and-push + uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0 + with: + context: ./barkmanUI + file: ./barkmanUI/release.Dockerfile + push: ${{ github.event_name != 'pull_request' }} + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + cache-from: type=gha + cache-to: type=gha,mode=max + + # Sign the resulting Docker image digest except on PRs. + # This will only write to the public Rekor transparency log when the Docker + # repository is public to avoid leaking data. If you would like to publish + # transparency data even for private images, pass --force to cosign below. + - name: Sign the published Docker image + if: ${{ github.event_name != 'pull_request' }} + env: + # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-an-intermediate-environment-variable + TAGS: ${{ steps.meta.outputs.tags }} + DIGEST: ${{ steps.build-and-push.outputs.digest }} + # This step uses the identity token to provision an ephemeral certificate + # against the sigstore community Fulcio instance. + run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST} diff --git a/.gitignore b/.gitignore index 06fe016..bac9d7a 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,5 @@ riderModule.iml /_ReSharper.Caches/ **/app.db* **/.idea +**/.DS_Store +**/*.DotSettings.user \ No newline at end of file diff --git a/barkmanui/.dockerignore b/barkmanui/.dockerignore new file mode 100644 index 0000000..4f509e5 --- /dev/null +++ b/barkmanui/.dockerignore @@ -0,0 +1 @@ +*.env \ No newline at end of file diff --git a/barkmanui/.env.docker b/barkmanui/.env.docker new file mode 100644 index 0000000..7f6aa41 --- /dev/null +++ b/barkmanui/.env.docker @@ -0,0 +1 @@ +VITE_API_URL=VITE_API_URL \ No newline at end of file diff --git a/barkmanui/ops/docker/caddy/Caddyfile b/barkmanui/ops/docker/caddy/Caddyfile new file mode 100644 index 0000000..b366b52 --- /dev/null +++ b/barkmanui/ops/docker/caddy/Caddyfile @@ -0,0 +1,6 @@ +http://* { + root * /app + encode + try_files {path} /index.html + file_server +} \ No newline at end of file diff --git a/barkmanui/ops/docker/entrypoint.sh b/barkmanui/ops/docker/entrypoint.sh new file mode 100644 index 0000000..3c0f331 --- /dev/null +++ b/barkmanui/ops/docker/entrypoint.sh @@ -0,0 +1,27 @@ +#!/bin/sh +# Generate sed script file +sed_script="/tmp/sed_script.sed" +> "$sed_script" + +# Ensure the sed script file is cleaned up on exit +trap 'rm -f "$sed_script"' EXIT + +# Extract VITE_ environment variables and build the sed expression +env | grep '^VITE_' | while IFS='=' read -r key value; do + # Escape slashes and other special characters in key and value + escaped_key=$(printf '%s' "$key" | sed 's/[\/&]/\\&/g') + escaped_value=$(printf '%s' "$value" | sed 's/[\/&]/\\&/g') + # Append to sed script file + echo "s|${escaped_key}|${escaped_value}|g;" >> "$sed_script" +done + +# Check if the sed script file was created and is not empty +if [ ! -s "$sed_script" ]; then + echo "No VITE_ environment variables found. Exiting with error." + exit 1 +fi + +# sed All files +find /app -type f -exec sed -i -f "$sed_script" '{}' + + +caddy run --config /etc/caddy/Caddyfile --adapter caddyfile \ No newline at end of file diff --git a/barkmanui/package.json b/barkmanui/package.json index 2478809..308ab31 100644 --- a/barkmanui/package.json +++ b/barkmanui/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "tsc -b && vite build", + "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, diff --git a/barkmanui/release.Dockerfile b/barkmanui/release.Dockerfile new file mode 100644 index 0000000..0ac26bf --- /dev/null +++ b/barkmanui/release.Dockerfile @@ -0,0 +1,17 @@ +# Stage 1: Build Image +FROM node:22-alpine AS build +WORKDIR /app +COPY package*.json ./ +RUN npm install +COPY . . +RUN npm run build -- --mode docker + +# Stage 2, use the compiled app, ready for production with caddy +FROM caddy:latest +COPY ops/docker/caddy/Caddyfile /etc/caddy/Caddyfile +COPY --from=build /app/dist /app +COPY ops/docker/entrypoint.sh /entrypoint.sh +RUN chmod +x /entrypoint.sh +EXPOSE 80 + +ENTRYPOINT ["/bin/sh", "/entrypoint.sh"] \ No newline at end of file diff --git a/barkmanui/public/barklogo.png b/barkmanui/src/assets/barklogo.png similarity index 100% rename from barkmanui/public/barklogo.png rename to barkmanui/src/assets/barklogo.png diff --git a/barkmanui/src/common/components/BarkHeader.tsx b/barkmanui/src/common/components/BarkHeader.tsx index 0e1f4b5..44dc058 100644 --- a/barkmanui/src/common/components/BarkHeader.tsx +++ b/barkmanui/src/common/components/BarkHeader.tsx @@ -2,6 +2,7 @@ import {Burger, Container, Group, Image} from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import classes from './BarkHeader.module.css'; import {NavLink} from "react-router"; +import BarkLogo from '@/assets/barklogo.png'; const links = [ @@ -22,7 +23,7 @@ export function BarkHeader() { return (
- + {items} diff --git a/barkmanui/tsconfig.app.json b/barkmanui/tsconfig.app.json index 358ca9b..094b0da 100644 --- a/barkmanui/tsconfig.app.json +++ b/barkmanui/tsconfig.app.json @@ -20,7 +20,12 @@ "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true + "noUncheckedSideEffectImports": true, + + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } }, "include": ["src"] } diff --git a/barkmanui/vite.config.ts b/barkmanui/vite.config.ts index 8b0f57b..2cb057c 100644 --- a/barkmanui/vite.config.ts +++ b/barkmanui/vite.config.ts @@ -1,7 +1,13 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' +import path from 'path' // https://vite.dev/config/ export default defineConfig({ plugins: [react()], + resolve: { + alias: [ + { find: '@', replacement: path.resolve(__dirname, 'src') } + ] + } })