place_maxlan/INSTALLATION.md
freesemar93 93ddcaf807 Improve canvas positioning and add detailed installation instructions
Remove grid layout for canvas and implement absolute positioning for pixels, along with a comprehensive installation guide for server deployment.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0385ea33-cde8-4bbd-8fce-8d192d30eb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/870d08ce-da3b-4822-9874-c2fe2b7628b1/0385ea33-cde8-4bbd-8fce-8d192d30eb41/7Hr2NPt
2025-08-18 12:33:44 +00:00

275 lines
6.1 KiB
Markdown

# r/place - Collaborative Pixel Art Platform
## Installationsanleitung für deinen Server
Diese Anleitung zeigt dir, wie du die r/place Webseite auf deinem eigenen Server installierst und startest.
## Systemanforderungen
- **Node.js 18 oder höher** (empfohlen: Node.js 20)
- **PostgreSQL 12 oder höher** (optional, standardmäßig wird In-Memory-Storage verwendet)
- **Git** (zum Herunterladen des Codes)
- **Mindestens 1GB RAM**
- **Port 5000** verfügbar (kann in der Konfiguration geändert werden)
## Schritt 1: Code herunterladen
```bash
# Repository klonen (ersetze mit deiner Git-URL)
git clone <deine-repository-url> r-place
cd r-place
```
## Schritt 2: Abhängigkeiten installieren
```bash
# Node.js Pakete installieren
npm install
```
## Schritt 3: Konfiguration anpassen
Bearbeite die Datei `config.cfg` für deine Anforderungen:
```bash
nano config.cfg
```
**Wichtige Einstellungen:**
```ini
# Canvas Einstellungen
CANVAS_WIDTH=100 # Breite in Pixeln
CANVAS_HEIGHT=100 # Höhe in Pixeln
# Cooldown Einstellungen
DEFAULT_COOLDOWN_SECONDS=5 # Wartezeit zwischen Pixel-Platzierungen
# Export Einstellungen
AUTO_EXPORT_INTERVAL_SECONDS=60 # Export alle 60 Sekunden
EXPORT_PATH=./exports/ # Speicherort für SVG-Exports
# Event Einstellungen (optional)
ENABLE_AUTOMATIC_EVENTS=false # Automatische Events deaktiviert
EVENT_DURATION_MINUTES=30 # Event-Dauer
EVENT_INTERVAL_HOURS=6 # Abstand zwischen Events
```
## Schritt 4: PostgreSQL Datenbank einrichten (optional)
**Wenn du eine persistente Datenbank möchtest:**
1. PostgreSQL installieren:
```bash
# Ubuntu/Debian
sudo apt install postgresql postgresql-contrib
# CentOS/RHEL
sudo yum install postgresql-server postgresql-contrib
```
2. Datenbank erstellen:
```bash
sudo -u postgres createdb rplace
sudo -u postgres createuser rplace_user
sudo -u postgres psql -c "ALTER USER rplace_user PASSWORD 'dein_passwort';"
sudo -u postgres psql -c "GRANT ALL PRIVILEGES ON DATABASE rplace TO rplace_user;"
```
3. Umgebungsvariable setzen:
```bash
export DATABASE_URL="postgresql://rplace_user:dein_passwort@localhost:5432/rplace"
```
**Ohne Datenbank:** Das System verwendet automatisch In-Memory-Storage (Daten gehen bei Neustart verloren).
## Schritt 5: Export-Verzeichnis erstellen
```bash
mkdir -p exports
chmod 755 exports
```
## Schritt 6: Anwendung starten
### Entwicklungsmodus (empfohlen für Tests):
```bash
npm run dev
```
### Produktionsmodus:
```bash
# Frontend builden
npm run build
# Server starten
npm start
```
## Schritt 7: Webseite aufrufen
Öffne deinen Browser und gehe zu:
```
http://localhost:5000
```
Oder von einem anderen Computer:
```
http://deine-server-ip:5000
```
## Schritt 8: Als Systemdienst einrichten (optional)
Für dauerhaften Betrieb erstelle einen systemd Service:
```bash
sudo nano /etc/systemd/system/rplace.service
```
Inhalt:
```ini
[Unit]
Description=r/place Pixel Art Platform
After=network.target
[Service]
Type=simple
User=www-data
WorkingDirectory=/path/to/r-place
Environment=NODE_ENV=production
Environment=DATABASE_URL=postgresql://rplace_user:dein_passwort@localhost:5432/rplace
ExecStart=/usr/bin/npm start
Restart=on-failure
RestartSec=10
[Install]
WantedBy=multi-user.target
```
Service aktivieren:
```bash
sudo systemctl daemon-reload
sudo systemctl enable rplace
sudo systemctl start rplace
sudo systemctl status rplace
```
## Schritt 9: Nginx Reverse Proxy (optional)
Für bessere Performance und HTTPS:
```bash
sudo nano /etc/nginx/sites-available/rplace
```
Inhalt:
```nginx
server {
listen 80;
server_name deine-domain.de;
location / {
proxy_pass http://localhost:5000;
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;
}
# WebSocket Support
location /ws {
proxy_pass http://localhost:5000;
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;
}
}
```
Aktivieren:
```bash
sudo ln -s /etc/nginx/sites-available/rplace /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
```
## Fehlerbehebung
### Port bereits in Verwendung:
```bash
# Anderen Port verwenden
export PORT=3000
npm start
```
### Berechtigungsfehler:
```bash
# Dateiberechtigungen prüfen
sudo chown -R www-data:www-data /path/to/r-place
sudo chmod -R 755 /path/to/r-place
```
### Logs überprüfen:
```bash
# Systemd Service logs
sudo journalctl -u rplace -f
# Node.js direktes logging
NODE_ENV=production npm start
```
### WebSocket-Verbindung fehlschlägt:
- Firewall-Regeln prüfen
- Nginx WebSocket-Konfiguration überprüfen
- Browser-Entwicklertools verwenden
## Backup und Wartung
### Automatisches Backup der Exports:
```bash
# Cron-Job für tägliches Backup
0 2 * * * tar -czf /backup/rplace-exports-$(date +\%Y\%m\%d).tar.gz /path/to/r-place/exports/
```
### Datenbank-Backup (falls PostgreSQL verwendet):
```bash
# Tägliches Datenbank-Backup
0 3 * * * pg_dump rplace > /backup/rplace-db-$(date +\%Y\%m\%d).sql
```
### Log-Rotation:
```bash
# Logs automatisch rotieren
sudo nano /etc/logrotate.d/rplace
```
## Performance-Optimierung
### Für viele gleichzeitige Nutzer:
- Node.js Cluster-Modus verwenden
- Redis für Session-Speicherung
- PostgreSQL mit Connection Pooling
- CDN für statische Dateien
### Monitoring:
- PM2 für Process Management
- Prometheus für Metriken
- Grafana für Visualisierung
## Support
Bei Problemen:
1. Logs überprüfen (`journalctl -u rplace`)
2. Konfiguration kontrollieren (`config.cfg`)
3. Netzwerk-Verbindung testen
4. Browser-Entwicklertools verwenden
## Lizenz
Dieses Projekt steht unter der MIT-Lizenz.