Deploy frontend to podhost

Author: Erikvv

.github/workflows/deploy.yaml

@@ -4,11 +4,15 @@ on:
   push:
     branches:
       - main
+      - hetzner-deploy-frontend
 #  pull_request:
 #    types: [ opened, synchronize, reopened ]
 
+env:
+    TAG: ${{ github.head_ref || github.ref_name }}-${{ github.run_number }}
+
 jobs:
-  build-deploy-static-site:
+  build-deploy-azure-static-site:
     runs-on: ubuntu-latest
     name: Build and deploy static site
     steps:
@@ -51,6 +55,34 @@ jobs:
             api_location: "" # Api source code path - optional
             ###### End of Repository/Build Configurations ######
 
+  build-frontend-container:
+      runs-on: ubuntu-24.04
+      steps:
+          -   uses: actions/checkout@v5
+          -   name: Log in to GitHub Container Registry
+              uses: redhat-actions/podman-login@v1
+              with:
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+                  registry: ghcr.io
+          -   name: Build container image
+              run: ./webtool/deploy/frontend/build.sh
+          -   name: Push container image
+              run: ./webtool/deploy/frontend/push.sh
+
+  deploy-podhost:
+      runs-on: ubuntu-24.04
+      needs: build-frontend-container
+      steps:
+          -   uses: actions/checkout@v5
+          -   name: Install SSH key
+              uses: shimataro/ssh-key-action@v2
+              with:
+                  key: ${{ secrets.PODHOST_SSH_PRIVATE_KEY }}
+                  known_hosts: podhost.zenmo.com ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIKVeen0rfyMwiAoQCpIUJ/a2tpM35D/BdEDUyfRTxiXm
+          -   name: Deploy podhost
+              run: ./webtool/deploy/quadlets/deploy.sh
+
   deploy-backend:
         runs-on: ubuntu-latest
         steps:

webtool/frontend.dockerignore webtool/deploy/frontend/.dockerignorewebtool/frontend.dockerignore renamed to webtool/deploy/frontend/.dockerignore

@@ -24,7 +24,6 @@ ARG VITE_ANYLOGIC_CALLBACK_URL=https://local4local-backend.zenmo.com
 
 # Build static site
 COPY frontend /app/frontend
-RUN ls -ahl
 RUN npm run build
 
 # Final image

webtool/frontend.Dockerfile webtool/deploy/frontend/Dockerfilewebtool/frontend.Dockerfile renamed to webtool/deploy/frontend/Dockerfile

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+set -ex
+
+cd $(dirname "$0")
+
+TAG="${TAG:-dev}"
+
+podman build \
+    --file Dockerfile \
+    --ignorefile .dockerignore \
+    --tag ghcr.io/zenmo/coco-frontend:$TAG \
+    --progress=plain \
+    $@ \
+    ../..

webtool/deploy/frontend/build.sh

@@ -0,0 +1,5 @@
+TAG="${TAG:-dev}"
+
+podman push \
+    ghcr.io/zenmo/coco-frontend:$TAG \
+    docker://ghcr.io/zenmo/coco-frontend:$TAG

webtool/deploy/frontend/push.sh

@@ -0,0 +1,21 @@
+
+[Container]
+ContainerName=coco-frontend
+Image=ghcr.io/zenmo/coco-frontend:$TAG
+
+Network=main.network
+Label=traefik.enable=true
+Label="traefik.http.routers.coco-frontend.rule=Host(`coco.local4local.nu`) || Host(`cooperatieconfigurator.local4local.nu`)"
+Label=traefik.http.routers.coco-frontend.tls.certResolver=HttpChallenge
+Label=traefik.http.routers.coco-frontend.tls.domains[0].main=coco.local4local.nu
+Label=traefik.http.routers.coco-frontend.tls.domains[1].main=cooperatieconfigurator.local4local.nu
+Label=traefik.http.routers.coco-frontend.middlewares[0]=coco-redirect
+Label=traefik.http.middlewares.coco-redirect.redirectRegex.regex=^https://cooperatieconfigurator.local4local.nu/(.*)
+Label=traefik.http.middlewares.coco-redirect.redirectRegex.replacement=https://coco.local4local.nu/${1}
+
+[Service]
+Restart=always
+TimeoutStartSec=300
+
+[Install]
+WantedBy=default.target

webtool/deploy/quadlets/coco-frontend.container

@@ -0,0 +1,22 @@
+#!/bin/bash
+# Set up Quadlet config files, copy them to the Podman host, and restart the services.
+# This is a simplified version of the script at https://github.com/Zenmo/lux-website/blob/main/deploy/quadlets/deploy.sh
+
+set -ex
+cd $(dirname "$0")
+
+OUTPUT_DIR=coco
+mkdir -p $OUTPUT_DIR
+
+# Prepare Quadlet files
+for filename in *.container; do
+    envsubst < "$filename" > "$OUTPUT_DIR/$filename"
+done
+
+# Copy files to the Podman host
+scp -r $OUTPUT_DIR podman@podhost.zenmo.com:~/.config/containers/systemd/
+
+# Restart services
+ssh podman@podhost.zenmo.com "\
+    systemctl --user daemon-reload \
+    && systemctl --user restart coco-frontend"