diff --git a/.env.example b/.env.example index b5a032b..6fbf616 100644 --- a/.env.example +++ b/.env.example @@ -1,14 +1,14 @@ # Kopieren nach .env.local (wird nicht von Git versioniert): # cp .env.example .env.local # -# Lokal mit Vite-Proxy (empfohlen — Session-Cookies wie auf dem Server): +# Lokal mit Vite-Proxy (empfohlen ¯ Session-Cookies wie auf dem Server): VITE_APPWRITE_ENDPOINT=http://localhost:5173/v1 VITE_APPWRITE_PROJECT_ID=6a1058610003c5a13a05 VITE_APPWRITE_DATABASE_ID=woms-database VITE_APPWRITE_BUCKET_ID=woms-attachments -# Optional: anderes Proxy-Ziel (Standard: https://ticket.webklar.com) -# VITE_APPWRITE_PROXY_TARGET=https://ticket.webklar.com +# Optional: Proxy-Ziel (Standard: https://appwrite.webklar.com) +# VITE_APPWRITE_PROXY_TARGET=https://appwrite.webklar.com # Produktion / Build (ohne Vite-Proxy): # VITE_APPWRITE_ENDPOINT=https://ticket.webklar.com/v1 diff --git a/LOCAL_DEV.md b/LOCAL_DEV.md index b570a1e..9edfd44 100644 --- a/LOCAL_DEV.md +++ b/LOCAL_DEV.md @@ -7,15 +7,15 @@ | App-URL | `https://ticket.webklar.com` | `http://localhost:5173` | | API-URL | `https://ticket.webklar.com/v1` (nginx-Proxy) | oft `https://ticket.webklar.com/v1` direkt | | **Gleiche Origin?** | Ja | **Nein** (Cross-Origin) | -| Session-Cookie | `domain=.ticket.webklar.com` | Browser speichert Cookie **nicht** für localhost | +| Session-Cookie | `domain=.ticket.webklar.com` | Browser speichert Cookie **nicht** f¯r localhost | -Auf dem Server leitet nginx `/v1/` an Appwrite weiter und schreibt Cookies auf `ticket.webklar.com` um. Die React-App und die API sind **dieselbe Site** — Login funktioniert. +Auf dem Server leitet nginx `/v1/` an Appwrite weiter und schreibt Cookies auf `ticket.webklar.com` um. Die React-App und die API sind **dieselbe Site** ¯ Login funktioniert. -Lokal ruft der Browser die API auf einer **anderen Domain** auf. Appwrite setzt Cookies für `.ticket.webklar.com`. Die werden bei Requests von `localhost:5173` **nicht mitgeschickt** ? `guests missing scopes`, Login scheint tot. +Lokal ruft der Browser die API auf einer **anderen Domain** auf. Appwrite setzt Cookies f¯r `.ticket.webklar.com`. Die werden bei Requests von `localhost:5173` **nicht mitgeschickt** ? `guests missing scopes`, Login scheint tot. -CORS für `http://localhost:5173` ist auf dem Server erlaubt — das reicht allein nicht für HttpOnly-Session-Cookies. +CORS f¯r `http://localhost:5173` ist auf dem Server erlaubt ¯ das reicht allein nicht f¯r HttpOnly-Session-Cookies. -## Lösung: Vite-Proxy + `.env.local` +## L¯sung: Vite-Proxy + `.env.local` 1. Datei anlegen (nicht in Git): @@ -39,17 +39,39 @@ CORS f npm run dev ``` -`vite.config.js` leitet `/v1` an `https://ticket.webklar.com` weiter und schreibt Cookie-Domains auf `localhost` um — Verhalten wie nginx auf dem Server. +`vite.config.js` leitet `/v1` an `https://ticket.webklar.com` weiter und schreibt Cookie-Domains auf `localhost` um ¯ Verhalten wie nginx auf dem Server. + +## Fehler: „Failed to load resource“ / **504** in der Konsole + +Typisch bei `VITE_APPWRITE_ENDPOINT=http://localhost:5173/v1`: Der Vite-Proxy erreicht Appwrite nicht rechtzeitig. + +1. **Neuesten Code holen** (`git pull`) — Proxy zeigt jetzt direkt auf `appwrite.webklar.com` mit längerem Timeout. +2. Dev-Server **komplett stoppen** (Strg+C) und neu starten: `npm run dev` +3. In `.env.local` prüfen: + ```env + VITE_APPWRITE_ENDPOINT=http://localhost:5173/v1 + ``` +4. Im Browser **Network**-Tab: Welche URL liefert 504? + - `http://localhost:5173/v1/...` ? Proxy/Netzwerk (Firewall, VPN, Server nicht erreichbar) + - `https://ticket.webklar.com/v1/...` ? ohne Proxy; Endpoint in `.env.local` auf `localhost:5173` stellen +5. Test im Terminal (ersetzt 5173 durch deinen Vite-Port): + ```bash + curl -sS -o /dev/null -w "%{http_code}\n" http://localhost:5173/v1/health \ + -H "X-Appwrite-Project: 6a1058610003c5a13a05" + ``` + Erwartung: **401** (nicht 504) — dann ist der Proxy ok. + +**Notfall ohne Proxy:** In `.env.local` temporär `VITE_APPWRITE_ENDPOINT=https://ticket.webklar.com/v1` — Login-Cookies funktionieren lokal dann oft nicht, aber du siehst ob der Server erreichbar ist. ## Checkliste bei Problemen -- [ ] `.env.local` existiert (`.env` allein reicht; Vite lädt `.env.local` mit höherer Priorität) +- [ ] `.env.local` existiert (`.env` allein reicht; Vite l¯dt `.env.local` mit h¯herer Priorit¯t) - [ ] Endpoint ist `http://localhost:5173/v1`, **nicht** `https://appwrite.webklar.com/v1` (altes Projekt) - [ ] Nach Login: DevTools ? Application ? Cookies ? `localhost` ? `a_session_6a1058610003c5a13a05` - [ ] Appwrite Console ? Projekt **Ticket-System** ? Platforms ? `localhost` eingetragen ## Git / Deploy -- `.env` und `.env.local` sind in `.gitignore` — jeder Entwickler braucht eigene `.env.local` +- `.env` und `.env.local` sind in `.gitignore` ¯ jeder Entwickler braucht eigene `.env.local` - Server-Build nutzt Container-Env (`VITE_APPWRITE_ENDPOINT=https://ticket.webklar.com/v1`) - Push nach Gitea deployt nur den **Frontend-Code**, nicht deine lokale `.env.local` diff --git a/vite.config.js b/vite.config.js index 3c6c1a4..4a1f3e1 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,18 +3,34 @@ import react from '@vitejs/plugin-react' export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), '') - const apiTarget = env.VITE_APPWRITE_PROXY_TARGET || 'https://ticket.webklar.com' + // Direkt zu Appwrite (ein Hop weniger als ticket.webklar.com → nginx → Appwrite) + const apiTarget = + env.VITE_APPWRITE_PROXY_TARGET || 'https://appwrite.webklar.com' return { plugins: [react()], server: { proxy: { - // Lokal: Appwrite über gleiche Origin wie die App (wie nginx auf dem Server) '/v1': { target: apiTarget, changeOrigin: true, secure: true, + timeout: 120_000, + proxyTimeout: 120_000, cookieDomainRewrite: 'localhost', + configure: (proxy) => { + proxy.on('error', (err, req, res) => { + console.error('[vite proxy /v1]', err.message) + if (res && !res.headersSent) { + res.writeHead(502, { 'Content-Type': 'application/json' }) + res.end( + JSON.stringify({ + message: `Proxy-Fehler: ${err.message}. Ist ${apiTarget} erreichbar?`, + }) + ) + } + }) + }, }, }, },