AdsPreview/documentation/DEPLOYMENT.md

🚀 Deployment Guide

📂 Wichtige Dokumentation

• Area Structure Guide: Aufbau des area/ Verzeichnisses mit Projektdaten
• Deployment Scripts: Sichere Upload-Skripte mit .env.upload

🏠 Lokale Entwicklungsumgebung

Voraussetzungen

• Node.js 16+ und npm
• PHP 8.0+ (für lokalen Backend-Server)
• Git (für Versionskontrolle)

Projekt Setup

# Repository klonen
git clone <deine-gitea-url>
cd adspreview_react

# Frontend Dependencies installieren
cd frontend/
npm install

Lokalen Development Server starten

# Im frontend/ Ordner
npm run start:all

Dieser Befehl startet beide Server gleichzeitig:

• React Development Server: http://localhost:3000
• PHP Backend Server: http://localhost:8000

Was passiert beim npm run start:all?

• Startet React App mit Live-Reload auf Port 3000
• Startet PHP Built-in Server auf Port 8000 für das Backend
• Verwendet concurrently um beide Prozesse parallel zu verwalten
• React App ist über Proxy mit PHP Backend verbunden

Entwicklungsumgebung Features

• ✅ Hot Reload: Änderungen werden sofort sichtbar
• ✅ API Proxy: React App kommuniziert automatisch mit PHP Backend
• ✅ Echte Daten: Verwendet lokale JSON-Dateien als Datenbank
• ✅ Debugging: Console-Logs und Entwicklertools verfügbar

Lokale URLs

• Frontend: http://localhost:3000 (React App)
• Backend API: http://localhost:8000/api/* (PHP Endpoints)
• Files: http://localhost:8000/area/* (Projekt-Dateien)

Stoppen der Entwicklungsserver

Drücke Ctrl+C im Terminal um beide Server zu stoppen.

---

Webspace Anforderungen

✅ Minimum Requirements

• PHP 8.3+
• 500 MB+ Speicherplatz (je nach Projektgröße)
• Schreibrechte für PHP (für Storage-Ordner)
• URL Rewriting (mod_rewrite für Apache)

📁 Webspace Struktur

public_html/ (oder htdocs/)
├── index.html              # React App Entry Point
├── static/                 # CSS, JS, Media Files
├── area/                   # Client Project Files
│   ├── Paramount/
│   ├── Studiocanal/
│   └── order_project.json
├── api/                    # PHP Backend
├── storage/                # User Data (needs write permissions!)
│   └── data/
│       ├── admins.json
│       ├── viewers.json
│       └── clients.json
└── vendor/                 # PHP Dependencies

🔧 Deployment Prozess

1. Setup (einmalig)

cd deployment/scripts/
./setup.sh

2. Production Build erstellen

cd deployment/scripts/
./deploy.sh

3. Upload auf Webspace

cd deployment/scripts/

#### Option A: FTP Client (FileZilla, WinSCP, etc.)
1. Öffne deinen FTP Client
2. Verbinde zu deinem Webspace
3. Navigiere zu `public_html/` oder `htdocs/`
4. Uploade den kompletten Inhalt von `backend/`

#### Option B: Command Line (automatisiert)
```bash
cd scripts/
nano upload.sh  # Konfiguriere FTP-Zugangsdaten
./upload.sh

4. Webspace Konfiguration

.htaccess für URL Rewriting

Erstelle eine .htaccess Datei im Root-Verzeichnis:

RewriteEngine On

# API Routes zu index.php weiterleiten
RewriteCond %{REQUEST_URI} ^/api/
RewriteRule ^(.*)$ index.php [QSA,L]

# React Router: Alle anderen Requests zu index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]

Ordner-Berechtigungen setzen

# Via FTP Client oder SSH
chmod 755 storage/
chmod 755 storage/data/
chmod 644 storage/data/*.json

🔒 Sicherheit

Sensible Dateien schützen

Erstelle .htaccess in storage/:

# Zugriff auf Storage-Dateien verbieten
<Files "*.json">
    Order allow,deny
    Deny from all
</Files>

Environment Variablen (optional)

Erstelle .env im Backend-Root:

BACKEND_URL=https://deine-domain.de
JWT_SECRET=dein-super-sicherer-schlüssel

🎯 Live-Betrieb

Domain Setup

• Subdomain: adspreview.deine-domain.de
• Hauptdomain: deine-domain.de/adspreview/

SSL/HTTPS

• Aktiviere SSL in deinem Webspace-Panel
• Moderne Browser benötigen HTTPS für JWT-Tokens

Backup Strategy

# Regelmäßige Backups der User-Daten
tar -czf backup_$(date +%Y%m%d).tar.gz storage/data/ area/

🛠️ Troubleshooting

Häufige Probleme:

1. "404 Not Found" bei API-Calls → Prüfe URL Rewriting (.htaccess)

2. "Permission denied" beim Login → Prüfe Schreibrechte auf storage/

3. React App lädt nicht → Prüfe BACKEND_URL in der Konfiguration

4. Uploads funktionieren nicht → Prüfe PHP upload_max_filesize und post_max_size

Debug-Modus aktivieren

In backend/public/index.php:

// Temporär für Debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);

📊 Performance Optimierung

Gzip Compression

In .htaccess:

# Komprimierung aktivieren
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json
</IfModule>

Caching Headers

# Browser-Caching für statische Dateien
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
</IfModule>

✅ Deployment Checklist

• PHP 8.3+ verfügbar
• Skripte ausgeführt (setup.sh → deploy.sh)
• Backend-Ordner hochgeladen
• .htaccess konfiguriert
• Berechtigungen gesetzt
• SSL aktiviert
• Admin-User angelegt
• Test-Login erfolgreich

Anwendung ist live! 🎉