fix backgroud, add deployment info

2026-02-28 00:11:08 +01:00
parent 0060681fe5
commit 7fdb1d188a
3 changed files with 265 additions and 2 deletions
--- a/.gitea/workflows/build-and-push.yml
+++ b/.gitea/workflows/build-and-push.yml
@@ -0,0 +1,108 @@
+name: Build & Push
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'           # ook triggeren op versie-tags zoals v1.2.3
+  workflow_dispatch:   # handmatig te triggeren via de Gitea UI
+
+# ──────────────────────────────────────────────────────────────────────────────
+# Vereiste variabelen (stel in via Gitea → Settings → Actions → Variables):
+#
+#   REGISTRY      Hostname van jouw container registry
+#                 Voorbeelden:
+#                   - gitea.jouwdomein.be          (Gitea ingebouwde registry)
+#                   - registry.jouwdomein.be       (eigen Docker registry)
+#                   - ghcr.io                      (GitHub Container Registry)
+#
+#   IMAGE_NAME    Volledig pad van de image zonder tag
+#                 Voorbeelden:
+#                   - gitea.jouwdomein.be/scholengroep/leerdoelen-tracker
+#                   - ghcr.io/jouw-org/leerdoelen-tracker
+#
+# Vereiste secrets (stel in via Gitea → Settings → Actions → Secrets):
+#
+#   REGISTRY_USER   Gebruikersnaam om in te loggen op de registry
+#   REGISTRY_TOKEN  Wachtwoord of access token voor de registry
+#
+# DEPLOYMENT
+#   Deze workflow bouwt enkel de image en pusht ze naar de registry.
+#   De deployment naar jouw server doe je zelf, los van deze repo.
+#   Zie DEPLOYMENT.md voor voorbeelden (watchtower, Portainer, handmatig).
+# ──────────────────────────────────────────────────────────────────────────────
+
+env:
+  REGISTRY:   ${{ vars.REGISTRY }}
+  IMAGE_NAME: ${{ vars.IMAGE_NAME }}
+
+jobs:
+  build-and-push:
+    name: Build & Push image
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Genereer image tags
+        id: meta
+        run: |
+          SHA_SHORT=$(echo "${{ gitea.sha }}" | cut -c1-8)
+
+          # Altijd een sha-tag aanmaken
+          TAGS="${{ env.IMAGE_NAME }}:sha-${SHA_SHORT}"
+
+          # Op main branch ook :latest taggen
+          if [ "${{ gitea.ref }}" = "refs/heads/main" ]; then
+            TAGS="${TAGS},${{ env.IMAGE_NAME }}:latest"
+          fi
+
+          # Op een versie-tag (v1.2.3) ook die tag meegeven
+          if [[ "${{ gitea.ref }}" == refs/tags/v* ]]; then
+            VERSION="${{ gitea.ref_name }}"
+            TAGS="${TAGS},${{ env.IMAGE_NAME }}:${VERSION}"
+          fi
+
+          echo "tags=${TAGS}" >> $GITHUB_OUTPUT
+          echo "sha_short=${SHA_SHORT}" >> $GITHUB_OUTPUT
+
+      - name: Inloggen op container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ secrets.REGISTRY_USER }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build en push backend image
+        uses: docker/build-push-action@v5
+        with:
+          context:  ./backend
+          file:     ./backend/Dockerfile
+          push:     true
+          tags:     ${{ steps.meta.outputs.tags }}
+          # Layer cache via de registry — versnelt herhaalde builds sterk
+          cache-from: type=registry,ref=${{ env.IMAGE_NAME }}:buildcache
+          cache-to:   type=registry,ref=${{ env.IMAGE_NAME }}:buildcache,mode=max
+          labels: |
+            org.opencontainers.image.revision=${{ gitea.sha }}
+            org.opencontainers.image.source=${{ gitea.server_url }}/${{ gitea.repository }}
+            org.opencontainers.image.created=${{ gitea.event.head_commit.timestamp }}
+
+      - name: Samenvatting
+        run: |
+          echo "## ✅ Build geslaagd" >> $GITEA_STEP_SUMMARY
+          echo "" >> $GITEA_STEP_SUMMARY
+          echo "| | |" >> $GITEA_STEP_SUMMARY
+          echo "|---|---|" >> $GITEA_STEP_SUMMARY
+          echo "| **Commit** | \`${{ steps.meta.outputs.sha_short }}\` |" >> $GITEA_STEP_SUMMARY
+          echo "| **Tags** | \`${{ steps.meta.outputs.tags }}\` |" >> $GITEA_STEP_SUMMARY
+          echo "" >> $GITEA_STEP_SUMMARY
+          echo "Image staat klaar in de registry. Trek ze op je server met:" >> $GITEA_STEP_SUMMARY
+          echo "\`\`\`" >> $GITEA_STEP_SUMMARY
+          echo "docker compose pull backend && docker compose up -d backend" >> $GITEA_STEP_SUMMARY
+          echo "\`\`\`" >> $GITEA_STEP_SUMMARY
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@@ -0,0 +1,155 @@
+# Deployment handleiding
+
+De CI/CD pipeline **bouwt enkel de Docker image** en zet die in de container registry.  
+Hoe je die image daarna uitrolt op jouw server is volledig aan jou — hieronder staan de meest gebruikte opties.
+
+---
+
+## Stap 1 — Repo instellen in Gitea
+
+Ga naar **Settings → Actions** van jouw fork/kopie van deze repo en stel in:
+
+### Variables  
+*(Settings → Actions → Variables)*
+
+| Naam | Beschrijving | Voorbeeld |
+|------|-------------|---------|
+| `REGISTRY` | Hostname van jouw container registry | `gitea.jouwdomein.be` of `ghcr.io` |
+| `IMAGE_NAME` | Volledig pad van de image (zonder tag) | `gitea.jouwdomein.be/scholengroep5/leerdoelen-tracker` |
+
+### Secrets  
+*(Settings → Actions → Secrets)*
+
+| Naam | Beschrijving |
+|------|-------------|
+| `REGISTRY_USER` | Gebruikersnaam voor de registry |
+| `REGISTRY_TOKEN` | Wachtwoord of access token |
+
+> **Gitea ingebouwde registry:** maak een Gitea access token aan via  
+> *User Settings → Applications → Generate Token* (scope: `package:write`)
+
+---
+
+## Stap 2 — Server voorbereiden
+
+### `.env` aanmaken op de server
+
+Kopieer `.env.example` naar `.env` en vul alle waarden in:
+
+```bash
+cp .env.example .env
+nano .env
+```
+
+### `docker-compose.yml` aanpassen
+
+Vervang de `build:` sectie van de backend door een `image:` verwijzing naar jouw registry:
+
+```yaml
+services:
+  backend:
+    image: gitea.jouwdomein.be/scholengroep5/leerdoelen-tracker:latest
+    # build: ./backend   ← deze regel weghalen of uitcommentariëren
+    restart: unless-stopped
+    ...
+```
+
+---
+
+## Stap 3 — Deployment opties
+
+### Optie A — Handmatig (eenvoudigst)
+
+Na elke nieuwe build in Gitea voer je dit uit op je server:
+
+```bash
+cd /pad/naar/leerdoelen
+docker compose pull backend
+docker compose up -d --no-deps backend
+docker image prune -f
+```
+
+### Optie B — Watchtower (automatisch)
+
+[Watchtower](https://containrrr.dev/watchtower/) controleert periodiek of er nieuwe images zijn en herstart containers automatisch.
+
+```yaml
+# Voeg toe aan je docker-compose.yml
+  watchtower:
+    image: containrrr/watchtower
+    restart: unless-stopped
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - /root/.docker/config.json:/config.json   # voor private registry auth
+    command: --interval 300 --cleanup backend    # elke 5 min, enkel backend container
+    environment:
+      - WATCHTOWER_POLL_INTERVAL=300
+```
+
+Zorg dat Docker op de server ingelogd is op jouw registry:
+```bash
+docker login gitea.jouwdomein.be -u jouw-user
+```
+
+### Optie C — Portainer webhook
+
+Als je Portainer gebruikt:
+1. Ga naar jouw stack → **Webhooks**
+2. Kopieer de webhook URL
+3. Voeg in Gitea een **webhook** toe onder *Settings → Webhooks*  
+   → URL = jouw Portainer webhook, trigger = **push**
+
+Portainer pulled dan automatisch de nieuwe image en herstart de service.
+
+### Optie D — Gitea runner met SSH (zelf te schrijven)
+
+Als je toch een geautomatiseerde SSH-deploy wil, maak dan een **aparte workflow** in jouw eigen fork — niet in de gedeelde repo. Voorbeeld:
+
+```yaml
+# .gitea/workflows/deploy.yml  — enkel in JOUW fork, niet in de gedeelde repo
+name: Deploy naar onze VPS
+on:
+  workflow_run:
+    workflows: ["Build & Push"]
+    types: [completed]
+
+jobs:
+  deploy:
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: SSH deploy
+        uses: appleboy/ssh-action@v1
+        with:
+          host:     ${{ secrets.DEPLOY_HOST }}
+          username: ${{ secrets.DEPLOY_USER }}
+          key:      ${{ secrets.DEPLOY_SSH_KEY }}
+          script: |
+            cd /pad/naar/leerdoelen
+            docker compose pull backend
+            docker compose up -d --no-deps backend
+            docker image prune -f
+```
+
+---
+
+## Updates installeren
+
+```bash
+# Image pullen en backend herstarten (downtime < 1 seconde)
+docker compose pull backend && docker compose up -d --no-deps backend
+
+# Eventuele database migraties worden automatisch uitgevoerd bij het opstarten
+# (zie entrypoint.sh — flask db upgrade)
+```
+
+## Rollback
+
+Elke build krijgt ook een `sha-XXXXXXXX` tag. Rollback naar een vorige versie:
+
+```bash
+# Vervang sha-tag door de gewenste commit hash
+docker compose stop backend
+docker compose run --rm -e IMAGE_TAG=sha-a1b2c3d4 backend echo ok
+# Of pas IMAGE_NAME in je .env tijdelijk aan naar de sha-tag
+```
--- a/backend/templates/login.html
+++ b/backend/templates/login.html
@@ -24,8 +24,8 @@
        }
        .logo { text-align: center; margin-bottom: 2rem; }
        .logo .icon { font-size: 3rem; margin-bottom: 0.5rem; }
-        .logo h1 { font-size: 1.4rem; color: #1f2937; font-weight: 700; }
-        .logo p { color: #6b7280; font-size: 0.85rem; margin-top: 0.25rem; }
+        .logo h1 { font-size: 1.4rem; color: var(--gray-900, #1f2937); font-weight: 700; }
+        .logo p { color: var(--gray-500, #6b7280); font-size: 0.85rem; margin-top: 0.25rem; }

        .btn-microsoft {
            width: 100%;