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
275 lines
6.1 KiB
Markdown
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. |