AdsPreview/DEPLOYMENT.md

# 🚀 Deployment Guide

## 📂 Wichtige Dokumentation
- **[Area Structure Guide](AREA_STRUCTURE.md)**: Aufbau des `area/` Verzeichnisses mit Projektdaten
- **[Deployment Scripts](deployment/scripts/README.md)**: 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
```bash
# Repository klonen
git clone <deine-gitea-url>
cd adspreview_react

# Frontend Dependencies installieren
cd frontend/
npm install
```

### Lokalen Development Server starten
```bash
# 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/
│   └── project_order.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)
```bash
cd deployment/scripts/
./setup.sh
```

### 2. Production Build erstellen
```bash
cd deployment/scripts/
./deploy.sh
```

### 3. Upload auf Webspace
```bash
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:
```apache
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
```bash
# 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/`:
```apache
# 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
```bash
# 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`:
```php
// Temporär für Debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);
```

## 📊 Performance Optimierung

### Gzip Compression
In `.htaccess`:
```apache
# Komprimierung aktivieren
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json
</IfModule>
```

### Caching Headers
```apache
# 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! 🎉**