156 lines
3.9 KiB
Markdown
156 lines
3.9 KiB
Markdown
# 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:**
|
|
```bash
|
|
ssh user@webklar.com
|
|
```
|
|
|
|
2. **Zum Projekt-Verzeichnis navigieren:**
|
|
```bash
|
|
cd /path/to/ANDJJJJJJ/server
|
|
```
|
|
|
|
3. **Environment-Variablen setzen:**
|
|
Erstelle oder bearbeite `.env`:
|
|
```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:**
|
|
```bash
|
|
npm install
|
|
npm start
|
|
```
|
|
|
|
#### Option B: Mit PM2 (empfohlen für Production)
|
|
|
|
```bash
|
|
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:
|
|
|
|
```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`:**
|
|
```env
|
|
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:**
|
|
```bash
|
|
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
|