# Deployment-Anleitung: Mobile Tag auf Ubuntu-Server

Diese Anleitung beschreibt, wie du das Mobile Tag Projekt auf deinen bestehenden Ubuntu-Webserver mit PHP bringst. Das Backend benötigt Node.js (siehe `UBUNTU_SETUP.md`), das Frontend ist eine statische PWA.

---

## Übersicht

| Komponente | Technologie | Pfad auf Server | Auslieferung |
|---|---|---|---|
| Backend | Node.js + Socket.io | `/var/www/mobile-tag/server/dist` | PM2 auf Port 3001 |
| Frontend (PWA) | Vite-Build | `/var/www/mobile-tag/client/dist` | Apache oder Nginx |
| WebSocket | Socket.io | `:3001` | Nginx Reverse Proxy (empfohlen) |

---

## Voraussetzungen

- Ubuntu-Server mit SSH-Zugriff
- Node.js ≥ 18 installiert (`node -v` und `npm -v` prüfen)
- Apache oder Nginx als Webserver
- Domain oder Server-IP
- Ports 80, 443 und optional 3001 freigegeben

---

## Schritt 1: Projekt auf den Server kopieren

### Vom Windows-Rechner (mit Git Bash, WSL oder PowerShell)

```bash
# Mit scp (Pfad anpassen!)
scp -r "c:/Users/thebi/OneDrive/KI Projekte/Mobil_Tag" root@dein-server:/var/www/mobile-tag
```

### Alternativ als ZIP

1. Auf dem Windows-Rechner den `Mobil_Tag`-Ordner als ZIP packen
2. ZIP per FTP/SFTP in `/var/www/` hochladen
3. Auf dem Server entpacken:

```bash
cd /var/www
sudo apt install unzip -y
sudo unzip mobile-tag.zip
sudo mv Mobil_Tag mobile-tag
```

**Wichtig:** Falls du schon einmal `npm install` lokal gemacht hast, lösche vor dem Kopieren die Ordner `node_modules`:

```bash
# Auf Windows, bevor du kopierst:
Remove-Item -Recurse -Force "c:/Users/thebi/OneDrive/KI Projekte/Mobil_Tag/node_modules"
Remove-Item -Recurse -Force "c:/Users/thebi/OneDrive/KI Projekte/Mobil_Tag/client/node_modules"
Remove-Item -Recurse -Force "c:/Users/thebi/OneDrive/KI Projekte/Mobil_Tag/server/node_modules"
```

---

## Schritt 2: Server vorbereiten

```bash
# Ins Projektverzeichnis wechseln
cd /var/www/mobile-tag

# Rechte setzen (falls nötig)
sudo chown -R www-data:www-data /var/www/mobile-tag
sudo chmod -R 755 /var/www/mobile-tag

# Node-Version prüfen
node -v   # Sollte v20.x oder höher anzeigen
npm -v
```

---

## Schritt 3: Abhängigkeiten installieren

```bash
cd /var/www/mobile-tag
npm run install:all
```

Das installiert automatisch:
- Root-Abhängigkeiten (`concurrently`)
- Client-Abhängigkeiten (React, Vite, TensorFlow.js, Tailwind, ...)
- Server-Abhängigkeiten (Express, Socket.io, ...)

---

## Schritt 4: Server-URL konfigurieren

Der Client muss wissen, wo das Backend läuft.

```bash
cd /var/www/mobile-tag/client
cp .env.example .env
```

Dann `.env` bearbeiten:

```bash
# Variante A: Backend läuft auf eigener Subdomain (empfohlen mit Nginx)
VITE_SERVER_URL=https://api.dein-domain.de

# Variante B: Backend läuft direkt auf Port 3001
VITE_SERVER_URL=http://dein-server-ip:3001

# Variante C: Beides auf derselben Domain mit Nginx Reverse Proxy
VITE_SERVER_URL=https://dein-domain.de
```

**Wichtig:** Wenn du HTTPS nutzt, muss auch `VITE_SERVER_URL` mit `https://` beginnen.

---

## Schritt 5: Projekt bauen

```bash
cd /var/www/mobile-tag
npm run build
```

Ergebnis:
- `server/dist/` – kompilierter Node.js-Server
- `client/dist/` – fertige PWA-Dateien

---

## Schritt 6: Backend starten

### Variante A: Mit PM2 (empfohlen für Produktion)

```bash
# PM2 global installieren
sudo npm install -g pm2

# Server als Dienst starten
cd /var/www/mobile-tag/server
pm2 start dist/index.js --name mobile-tag-server

# PM2 so einrichten, dass es nach Neustart automatisch startet
pm2 save
pm2 startup
# → Den angezeigten Befehl kopieren und ausführen (meist mit sudo)
```

**Nützliche PM2-Befehle:**

```bash
pm2 status                  # Status anzeigen
pm2 logs mobile-tag-server  # Logs anzeigen
pm2 restart mobile-tag-server
pm2 stop mobile-tag-server
pm2 delete mobile-tag-server
```

### Variante B: Einfacher Test ohne PM2

```bash
cd /var/www/mobile-tag/server
npm start
```

Läuft dann solange das Terminal offen ist.

---

## Schritt 7: Frontend ausliefern

### Mit Apache

1. `client/dist/` in dein Webverzeichnis kopieren:

```bash
sudo mkdir -p /var/www/html/mobile-tag
sudo cp -r /var/www/mobile-tag/client/dist/* /var/www/html/mobile-tag/
```

2. Falls nötig, Apache konfigurieren (Single-Page-App-Routing):

```bash
sudo nano /etc/apache2/sites-available/mobile-tag.conf
```

```apache
<VirtualHost *:80>
    ServerName dein-domain.de
    DocumentRoot /var/www/html/mobile-tag

    <Directory /var/www/html/mobile-tag>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ /index.html [L]
</VirtualHost>
```

Aktivieren:

```bash
sudo a2enmod rewrite
sudo a2ensite mobile-tag.conf
sudo systemctl reload apache2
```

### Mit Nginx (empfohlen)

```bash
sudo nano /etc/nginx/sites-available/mobile-tag
```

```nginx
server {
    listen 80;
    server_name dein-domain.de;
    root /var/www/html/mobile-tag;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # WebSocket-Verkehr an Node.js weiterleiten
    location /socket.io/ {
        proxy_pass http://localhost:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}
```

Aktivieren:

```bash
sudo ln -s /etc/nginx/sites-available/mobile-tag /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
```

**Hinweis:** Wenn du Apache statt Nginx verwendest und den Node-Server direkt auf Port 3001 erreichbar machen willst, musst du Port 3001 in der Firewall freigeben (siehe Schritt 9).

---

## Schritt 8: HTTPS mit Let's Encrypt einrichten

Dieser Schritt ist **zwingend erforderlich**, da Kamera, GPS und Orientierung in Browsern nur mit HTTPS funktionieren.

### Mit Nginx

```bash
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d dein-domain.de
```

### Mit Apache

```bash
sudo apt install certbot python3-certbot-apache -y
sudo certbot --apache -d dein-domain.de
```

Danach ist die App unter `https://dein-domain.de` erreichbar.

---

## Schritt 9: Firewall konfigurieren

### Wenn Nginx als Reverse Proxy verwendet wird

Port 3001 muss **nicht** öffentlich erreichbar sein, da Nginx intern weiterleitet:

```bash
sudo ufw allow 'Nginx Full'
sudo ufw allow OpenSSH
sudo ufw enable
```

### Wenn der Node-Server direkt auf Port 3001 erreichbar sein soll

```bash
sudo ufw allow 3001/tcp
sudo ufw allow 'Apache Full'   # oder 'Nginx Full'
sudo ufw allow OpenSSH
sudo ufw enable
```

---

## Schritt 10: App testen

1. Öffne im Handy-Browser: `https://dein-domain.de`
2. Erlaube Kamera, Standort und Orientierung.
3. Erstelle einen Raum und teile den Code.
4. Ein zweiter Spieler tritt dem Raum bei.
5. Host startet das Spiel.

---

## Updates einspielen

Wenn du Änderungen am Code machst:

```bash
cd /var/www/mobile-tag

# Neue Dateien vom lokalen Rechner auf den Server kopieren (Schritt 1 wiederholen)

# Dann auf dem Server:
npm run install:all
npm run build
pm2 restart mobile-tag-server

# Bei Apache:
sudo cp -r /var/www/mobile-tag/client/dist/* /var/www/html/mobile-tag/

# Bei Nginx (falls DocumentRoot direkt auf /var/www/mobile-tag/client/dist zeigt, nicht nötig):
sudo cp -r /var/www/mobile-tag/client/dist/* /var/www/html/mobile-tag/
```

---

## Fehlerbehebung

### „npm: Befehl nicht gefunden"

Node.js ist nicht installiert oder nicht im PATH. Siehe `UBUNTU_SETUP.md`.

### „Port 3001 bereits belegt"

```bash
sudo lsof -i :3001
# Prozess-ID merken und beenden:
sudo kill -9 <PID>
pm2 restart mobile-tag-server
```

### „WebSocket-Verbindung fehlgeschlagen"

- Prüfe, ob der Server läuft: `pm2 status`
- Prüfe die Firewall: `sudo ufw status`
- Prüfe, ob `VITE_SERVER_URL` korrekt ist
- Prüfe die Nginx-Konfiguration auf das `/socket.io/`-Location-Block

### „Kamera/GPS funktioniert nicht"

- HTTPS erforderlich!
- Browser-Berechtigungen prüfen
- Auf iOS: nur Safari unterstützt DeviceOrientation vollständig

### „Permission denied" beim Kopieren

```bash
sudo chown -R $USER:$USER /var/www/mobile-tag
```

---

## Zusammenfassung der wichtigsten Befehle

```bash
# Nach dem Kopieren auf den Server:
cd /var/www/mobile-tag
npm run install:all
npm run build

cd client
cp .env.example .env
# .env bearbeiten: VITE_SERVER_URL anpassen

cd /var/www/mobile-tag
npm run build

cd server
pm2 start dist/index.js --name mobile-tag-server
pm2 save
pm2 startup

# Nginx-Konfiguration anlegen und HTTPS einrichten
```

---

*Stand: 26.07.2026*