diff --git a/PROXY_SETUP.md b/PROXY_SETUP.md new file mode 100644 index 0000000..575bfc2 --- /dev/null +++ b/PROXY_SETUP.md @@ -0,0 +1,80 @@ +# Proxy Server Setup for Production + +## Problem +The proxy server isn't working because `VITE_PROXY_SERVER` is being set to `http://localhost:8090` during the Docker build, which won't work from the browser on a remote server. + +## Solution + +When building and deploying on the remote server, you need to build the Docker image with the correct build argument. + +### For Manual Docker Run Commands + +Rebuild the Jumble image with the correct proxy URL: + +```bash +docker build \ + --build-arg VITE_PROXY_SERVER=http://jumble.imwald.eu:8090 \ + -t silberengel/imwald-jumble:12 \ + . + +# Then push to Docker Hub +docker push silberengel/imwald-jumble:12 +``` + +**Note on Docker Network:** + +You only need to create the network once (it persists). Check if it exists first: + +```bash +# Check if network exists +docker network ls | grep jumble-network + +# If it doesn't exist, create it (only needed once) +docker network create jumble-network +``` + +### For Docker Compose + +### 1. Set Environment Variables Before Building + +```bash +export JUMBLE_PROXY_SERVER_URL="http://jumble.imwald.eu:8090" +export JUMBLE_SOCIAL_URL="http://jumble.imwald.eu:32768" +``` + +### 2. Rebuild the Docker Image + +```bash +docker-compose build --no-cache +``` + +### 3. Restart the Containers + +```bash +docker-compose down +docker-compose up -d +``` + +## How to Check if it's Working + +1. After deploying, open the browser console on `https://jumble.imwald.eu` +2. Navigate to a page with a URL that should show OpenGraph data +3. Look for `[WebService]` log messages that will show: + - Whether the proxy server is configured + - What URL is being used to fetch metadata + - Any errors (CORS, network, etc.) + +## Important Notes + +- The `VITE_PROXY_SERVER` value is baked into the JavaScript bundle during build time +- You MUST rebuild the Docker image if you change `JUMBLE_PROXY_SERVER_URL` +- The proxy server's `ALLOW_ORIGIN` must match the frontend URL (`JUMBLE_SOCIAL_URL`) +- Both must use the same protocol (http vs https) + +## Troubleshooting + +If you see errors in the console: +- `[WebService] No proxy server configured` - `VITE_PROXY_SERVER` is undefined or empty +- `[WebService] CORS/Network error` - The proxy URL might be wrong, or CORS isn't configured +- `[WebService] Failed to fetch metadata` - The proxy server might not be running or accessible + diff --git a/src/services/web.service.ts b/src/services/web.service.ts index c71d742..701aed5 100644 --- a/src/services/web.service.ts +++ b/src/services/web.service.ts @@ -8,16 +8,27 @@ class WebService { async (urls) => { return await Promise.all( urls.map(async (url) => { + // Check if we should use proxy server to avoid CORS issues + const proxyServer = import.meta.env.VITE_PROXY_SERVER + const isProxyUrl = url.includes('/sites/') + + // Debug logging for proxy configuration + if (proxyServer) { + console.log(`[WebService] Proxy server configured: ${proxyServer}`) + } else { + console.warn(`[WebService] No proxy server configured. VITE_PROXY_SERVER is:`, import.meta.env.VITE_PROXY_SERVER) + } + + // If proxy is configured and URL isn't already proxied, use proxy + let fetchUrl = url + if (proxyServer && !isProxyUrl) { + fetchUrl = `${proxyServer}/sites/${encodeURIComponent(url)}` + console.log(`[WebService] Using proxy URL: ${fetchUrl}`) + } else { + console.log(`[WebService] Fetching directly (no proxy): ${fetchUrl}`) + } + try { - // Check if we should use proxy server to avoid CORS issues - const proxyServer = import.meta.env.VITE_PROXY_SERVER - const isProxyUrl = url.includes('/sites/') - - // If proxy is configured and URL isn't already proxied, use proxy - let fetchUrl = url - if (proxyServer && !isProxyUrl) { - fetchUrl = `${proxyServer}/sites/${encodeURIComponent(url)}` - } // Add timeout and better error handling const controller = new AbortController() @@ -36,9 +47,10 @@ class WebService { clearTimeout(timeoutId) if (!res.ok) { - // Don't log 404s and CORS errors as they're expected + // Log all errors for debugging + console.warn(`[WebService] Failed to fetch metadata for ${url} (via ${fetchUrl}): ${res.status} ${res.statusText}`) if (res.status !== 404 && res.status !== 0) { - console.warn(`Failed to fetch metadata for ${url}: ${res.status} ${res.statusText}`) + console.warn(`[WebService] Response headers:`, Object.fromEntries(res.headers.entries())) } return {} } @@ -58,17 +70,19 @@ class WebService { return { title, description, image } } catch (error) { - // Only log unexpected errors, not CORS or network issues + // Log all errors for debugging if (error instanceof TypeError && error.message.includes('Failed to fetch')) { - // This is likely a CORS error - don't log it + // This is likely a CORS error + console.warn(`[WebService] CORS/Network error fetching metadata for ${url} (via ${fetchUrl}):`, error.message) return {} } if (error instanceof Error && error.name === 'AbortError') { - // Timeout - don't log it + // Timeout + console.warn(`[WebService] Timeout fetching metadata for ${url} (via ${fetchUrl})`) return {} } // Log other unexpected errors - console.warn(`Unexpected error fetching metadata for ${url}:`, error) + console.warn(`[WebService] Unexpected error fetching metadata for ${url} (via ${fetchUrl}):`, error) return {} } })