feature: docker deploy

Dockerfile

@@ -0,0 +1,16 @@
+# Stage 1 – Build (run on the host platform so npm/esbuild stay native)
+FROM --platform=$BUILDPLATFORM node:24-alpine AS build
+ARG VITE_MODE=production
+ENV VITE_MODE=$VITE_MODE
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build -- --mode "$VITE_MODE"
+
+#Stage 2 – Serve (target platform is whatever we are building for)
+FROM nginx:1.27-alpine
+ARG VITE_MODE=production
+COPY --from=build /app/dist/${VITE_MODE} /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kt-vite",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "private": true,
   "homepage": "https://karateturniere.de",
   "type": "module",

scripts/deploy.sh

@@ -3,7 +3,58 @@
 set -e
 
 #vars
-SERVER="root@wattsche.de"
-FOLDER="/var/www/vhosts/wattsche.de/karateturniere.de"
+REMOTE_USER="root"
+REMOTE_HOST="it-wattenscheid.de"
+SSH_KEY="~/.ssh/id_rsa"
+REMOTE_DIR="/opt/kt-frontend"
 
-rsync -ar --delete --filter='exclude *.map' dist/production/* $SERVER:$FOLDER/ 
+# Build-Mode (per default production, kann via erstem Skript-Argument überschrieben werden staging, development)
+MODE="${1:-production}"
+
+# Namens- und Portschema je nach Stage
+IMAGE_NAME="kt-frontend-${MODE}"
+CONTAINER_NAME="kt-frontend-${MODE}"
+CONTAINER_PORT="80"
+case "$MODE" in
+	staging)
+		HOST_PORT="8091"
+		;;
+	*)
+		HOST_PORT="8090"
+		;;
+esac
+
+# ---------------------------------------------------------------------------
+timestamp=$(date +%Y%m%d-%H%M%S)
+tar_file="${IMAGE_NAME}-${timestamp}.tar"
+
+function info() {
+	printf "\033[1;34m[info]\033[0m %s\n" "$1"
+}
+
+function remote() {
+	ssh "${REMOTE_USER}@${REMOTE_HOST}" "$@"
+}
+
+# ---------------------------------------------------------------------------
+info "Docker-Image bauen (Mode: ${MODE})"
+docker build --platform linux/amd64 -t "${IMAGE_NAME}:${timestamp}" --build-arg VITE_MODE="${MODE}" .
+
+tmp_dir=$(mktemp -d)
+trap 'rm -rf "$tmp_dir"' EXIT
+
+info "Image als TAR archivieren"
+docker save "${IMAGE_NAME}:${timestamp}" -o "${tmp_dir}/${tar_file}"
+
+info "Datei per SCP übertragen"
+remote "mkdir -p ${REMOTE_DIR}"
+scp "${tmp_dir}/${tar_file}" "${REMOTE_USER}@${REMOTE_HOST}:${REMOTE_DIR}/${tar_file}"
+
+info "Image auf dem Server laden"
+remote "docker load -i ${REMOTE_DIR}/${tar_file} && rm ${REMOTE_DIR}/${tar_file}"
+
+info "Container neustarten"
+remote "docker rm -f ${CONTAINER_NAME} 2>/dev/null || true"
+remote "docker run -d --name ${CONTAINER_NAME} -p ${HOST_PORT}:${CONTAINER_PORT} ${IMAGE_NAME}:${timestamp}"
+
+info "Deployment abgeschlossen: http://${REMOTE_HOST}:${HOST_PORT}"

vite.config.js

@@ -6,7 +6,7 @@ import { createTheme } from '@mui/material/styles'
 
 export default defineConfig(({ mode }) => {
     // build into different folders depending on the `mode`.
-    const outDir = mode === 'staging' ? './dist/staging/' : './dist/production/'
+    const outDir = `./dist/${mode}/`
 
     // Beispiel-Theme mit eigenen Farben und Einstellungen
     const pigmentTheme = createTheme({