Project-Image-Uploader/prod.sh
matthias.lotz a0d74f795a feat: Complete frontend refactoring and development environment setup
Major Frontend Refactoring:
- Replace ImagePreviewGallery with unified ImageGallery/ImageGalleryCard components
  - Support 4 display modes: group, moderation, preview, single-image
  - Add hidePreview prop to conditionally hide group preview images
  - Unified grid layout with responsive 3/2/1 column design

- Remove 15+ legacy files and components
  - Delete UploadedImagePage, SocialMedia components, old upload components
  - Remove unused CSS files (GroupCard.css, Image.css/scss)
  - Clean up /upload/:image_url route from App.js

- Fix image preview functionality in MultiUploadPage
  - Convert File objects to blob URLs with URL.createObjectURL()
  - Add proper memory cleanup with URL.revokeObjectURL()

- Improve page navigation and layout
  - Fix GroupsOverviewPage to route to /groups/:groupId detail page
  - Adjust PublicGroupImagesPage spacing and layout
  - Fix ModerationGroupsPage duplicate stats section

CSS Refactoring:
- Rename GroupCard.css → ImageGallery.css with updated class names
- Maintain backward compatibility with legacy class names
- Fix grid stretching with fixed 3-column layout

Development Environment:
- Add docker-compose.override.yml for local development
- Create Dockerfile.dev with hot-reload support
- Add start-dev.sh and nginx.dev.conf
- Update README.dev.md with development setup instructions

Production Build:
- Fix frontend/Dockerfile multi-stage build (as → AS)
- Update prod.sh to explicitly use docker-compose.yml (ignore override)
- Resolve node:18-alpine image corruption issue
- Backend Dockerfile improvements for Node 14 compatibility

Documentation:
- Update TODO.md marking completed frontend tasks
- Clean up docs/images directory
- Update README.md with current project status

All changes tested and verified in both development and production environments.
2025-10-27 22:22:52 +01:00

134 lines
5.0 KiB
Bash
Executable File

#!/bin/bash
# Production-Skript für Image-Uploader Production Environment
set -e
# Farben für Output
RED='\033[0;31m'
GREEN='\033[0;32m'
BLUE='\033[0;34m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color
# Image Namen definieren
FRONTEND_IMAGE="gitea.lan.hobbyhimmel.de/hobbyhimmel/image-uploader-frontend"
BACKEND_IMAGE="gitea.lan.hobbyhimmel.de/hobbyhimmel/image-uploader-backend"
VERSION="latest"
echo -e "${BLUE}=== Image-Uploader Production Environment ===${NC}"
echo -e "${BLUE}Frontend Image: ${FRONTEND_IMAGE}:${VERSION}${NC}"
echo -e "${BLUE}Backend Image: ${BACKEND_IMAGE}:${VERSION}${NC}"
echo
# Menü anzeigen
echo -e "${BLUE}Wähle eine Option:${NC}"
echo "1) Production Container starten"
echo "2) Production Images bauen"
echo "3) Production Images zur Registry pushen"
echo "4) Container neu bauen und starten"
echo "5) Production Container stoppen"
echo "6) Frontend Container Shell öffnen"
echo "7) Backend Container Shell öffnen"
echo "8) Frontend Logs anzeigen"
echo "9) Backend Logs anzeigen"
echo "10) Alle Logs anzeigen"
echo "11) Container Status anzeigen"
echo "12) Upload-Verzeichnis anzeigen"
echo "13) Production Container stoppen/löschen inkl Volumes"
echo "0) Beenden"
echo
read -p "Deine Wahl (0-13): " choice
case $choice in
1)
echo -e "${GREEN}Starte Production Container...${NC}"
docker compose -f docker-compose.yml up -d
echo -e "${GREEN}Container gestartet!${NC}"
echo -e "${BLUE}Frontend: http://localhost${NC}"
echo -e "${BLUE}Backend: http://localhost:5000${NC}"
echo -e "${BLUE}Slideshow: http://localhost/slideshow${NC}"
echo -e "${BLUE}Logs verfolgen mit: docker compose -f docker-compose.yml logs -f${NC}"
;;
2)
echo -e "${GREEN}Baue Production Images...${NC}"
echo -e "${BLUE}Baue Frontend Image...${NC}"
docker build -t ${FRONTEND_IMAGE}:${VERSION} ./frontend
echo -e "${BLUE}Baue Backend Image...${NC}"
docker build -t ${BACKEND_IMAGE}:${VERSION} ./backend
echo -e "${GREEN}Production Images erfolgreich gebaut!${NC}"
;;
3)
echo -e "${GREEN}Pushe Production Images zur Registry...${NC}"
echo -e "${BLUE}Pushe Frontend Image...${NC}"
docker push ${FRONTEND_IMAGE}:${VERSION}
echo -e "${BLUE}Pushe Backend Image...${NC}"
docker push ${BACKEND_IMAGE}:${VERSION}
echo -e "${GREEN}Production Images erfolgreich gepusht!${NC}"
;;
4)
echo -e "${GREEN}Baue Container neu...${NC}"
docker compose -f docker-compose.yml down
docker compose -f docker-compose.yml up --build -d
echo -e "${GREEN}Container neu gebaut und gestartet!${NC}"
echo -e "${BLUE}Frontend: http://localhost${NC}"
echo -e "${BLUE}Slideshow: http://localhost/slideshow${NC}"
;;
5)
echo -e "${YELLOW}Stoppe Container...${NC}"
docker compose -f docker-compose.yml down
echo -e "${GREEN}Container gestoppt!${NC}"
;;
6)
echo -e "${GREEN}Öffne Frontend Container Shell...${NC}"
docker compose -f docker-compose.yml exec image-uploader-frontend bash
;;
7)
echo -e "${GREEN}Öffne Backend Container Shell...${NC}"
docker compose -f docker-compose.yml exec image-uploader-backend bash
;;
8)
echo -e "${GREEN}Zeige Frontend Logs...${NC}"
docker compose -f docker-compose.yml logs -f image-uploader-frontend
;;
9)
echo -e "${GREEN}Zeige Backend Logs...${NC}"
docker compose -f docker-compose.yml logs -f image-uploader-backend
;;
10)
echo -e "${GREEN}Zeige alle Logs...${NC}"
docker compose -f docker-compose.yml logs -f
;;
11)
echo -e "${GREEN}Container Status:${NC}"
docker compose -f docker-compose.yml ps
echo
echo -e "${BLUE}Detaillierte Informationen:${NC}"
docker images | grep "image-uploader" || echo "Keine lokalen Images gefunden"
;;
12)
echo -e "${GREEN}Upload-Verzeichnis Inhalt:${NC}"
if docker compose -f docker-compose.yml ps -q image-uploader-backend > /dev/null 2>&1; then
echo -e "${BLUE}Hochgeladene Bilder (data/images):${NC}"
docker compose -f docker-compose.yml exec image-uploader-backend ls -la /usr/src/app/data/images/ || echo "Upload-Verzeichnis ist leer"
echo
echo -e "${BLUE}JSON Metadaten (data/db):${NC}"
docker compose -f docker-compose.yml exec image-uploader-backend ls -la /usr/src/app/data/db/ || echo "Keine Metadaten vorhanden"
else
echo -e "${YELLOW}Backend Container ist nicht gestartet.${NC}"
fi
;;
13)
echo -e "${YELLOW}Stoppe und lösche Container inkl. Volumes...${NC}"
docker compose -f docker-compose.yml down -v
echo -e "${GREEN}Container und Volumes gelöscht!${NC}"
;;
0)
echo -e "${GREEN}Auf Wiedersehen!${NC}"
exit 0
;;
*)
echo -e "${RED}Ungültige Option! Bitte wähle 0-12.${NC}"
exit 1
;;
esac