Emailsorter/PRODUCTION_SETUP.md

Production Setup - emailsorter.webklar.com

Probleme und Lösungen

1. Appwrite CORS-Konfiguration

Problem: Appwrite blockiert Requests von https://emailsorter.webklar.com weil nur https://localhost als Origin erlaubt ist.

Lösung:

1. Gehe zu deiner Appwrite-Konsole: https://appwrite.webklar.com
2. Öffne dein Projekt
3. Gehe zu Settings → Platforms (oder Web)
4. Füge eine neue Platform hinzu oder bearbeite die existierende:
   • Name: Production
   • Hostname: emailsorter.webklar.com
   • Origin: https://emailsorter.webklar.com
5. Speichere die Änderungen

Alternative: Wenn du mehrere Origins brauchst, kannst du auch in Appwrite die CORS-Einstellungen anpassen, um mehrere Origins zu erlauben.

---

2. Backend-Server (502 Fehler)

Problem: Der Backend-Server läuft nicht oder ist nicht erreichbar.

Lösung:

Option A: Server auf demselben Server starten

1. SSH zum Server:

   ssh user@webklar.com
   

2. Zum Projekt-Verzeichnis navigieren:

   cd /path/to/ANDJJJJJJ/server
   

3. Environment-Variablen setzen: Erstelle oder bearbeite .env:

   NODE_ENV=production
   PORT=3000
   BASE_URL=https://api.emailsorter.webklar.com
   FRONTEND_URL=https://emailsorter.webklar.com
   CORS_ORIGIN=https://emailsorter.webklar.com
   
   APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
   APPWRITE_PROJECT_ID=deine_projekt_id
   APPWRITE_API_KEY=dein_api_key
   APPWRITE_DATABASE_ID=email_sorter_db
   
   # ... weitere Variablen
   

4. Server starten:

   npm install
   npm start
   

Option B: Mit PM2 (empfohlen für Production)

npm install -g pm2
cd /path/to/ANDJJJJJJ/server
pm2 start index.mjs --name emailsorter-api
pm2 save
pm2 startup

Option C: Reverse Proxy konfigurieren (Nginx)

Falls der Server auf einem anderen Port läuft, konfiguriere Nginx:

server {
    listen 80;
    server_name api.emailsorter.webklar.com;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

---

3. Frontend Environment-Variablen

Stelle sicher, dass das Frontend die richtige Backend-URL verwendet:

1. Erstelle client/.env.production:

   VITE_APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
   VITE_APPWRITE_PROJECT_ID=deine_projekt_id
   VITE_API_URL=https://api.emailsorter.webklar.com
   

2. Build das Frontend:

   cd client
   npm run build
   

3. Deploy den Build-Ordner (client/dist) zu deinem Web-Server

---

4. Checkliste

• Appwrite CORS: https://emailsorter.webklar.com als Origin hinzugefügt
• Backend-Server läuft und ist erreichbar
• Backend .env konfiguriert mit Production-URLs
• Frontend .env.production konfiguriert
• Frontend gebaut und deployed
• Reverse Proxy (Nginx) konfiguriert (falls nötig)
• SSL-Zertifikat für beide Domains (Frontend + API)

---

5. Testing

Nach dem Setup, teste:

1. Frontend: https://emailsorter.webklar.com
2. Backend Health: https://api.emailsorter.webklar.com/api/health
3. Login: Versuche dich einzuloggen und prüfe die Browser-Konsole auf Fehler

---

Troubleshooting

CORS-Fehler weiterhin:

• Prüfe, ob die Appwrite-Änderungen gespeichert wurden
• Warte 1-2 Minuten (Cache)
• Prüfe Browser-Konsole für genaue Fehlermeldung

502 Bad Gateway:

• Prüfe, ob der Backend-Server läuft: pm2 list oder ps aux | grep node
• Prüfe Server-Logs: pm2 logs emailsorter-api oder tail -f server.log
• Prüfe Firewall-Regeln
• Prüfe Reverse Proxy Konfiguration

API nicht erreichbar:

• Prüfe, ob der Port 3000 offen ist
• Prüfe, ob die Domain richtig auf den Server zeigt
• Prüfe DNS-Einträge