diff --git a/N8N_WEBHOOK_ROUTING.md b/N8N_WEBHOOK_ROUTING.md new file mode 100644 index 0000000..70c8637 --- /dev/null +++ b/N8N_WEBHOOK_ROUTING.md @@ -0,0 +1,152 @@ +# n8n Webhook Routing Configuration + +## Overview + +n8n is intentionally kept internal to the Docker network and **not exposed to the internet**. To allow the browser to trigger n8n workflows via webhooks, Kong (the API gateway) proxies webhook requests to the internal n8n service. + +## Architecture + +``` +Browser Kong (Port 55521) n8n (Port 5678, internal) + | | | + | POST /webhook/* | | + |----------------------> | (no strip_path) | + | | POST /webhook/* | + | |--------------------------> | + | | Webhook triggers | + | | workflow | + |<----- Response --------|<---------------------------| +``` + +## Configuration Changes + +### 1. Kong Configuration (`supabase/kong.yml`) + +Added a new service to route webhook traffic to internal n8n: + +```yaml +- name: n8n-webhooks + url: http://n8n:5678/ + routes: + - name: n8n-webhooks-all + strip_path: false + paths: + - /webhook/ + plugins: + - name: cors +``` + +- `strip_path: false` ensures the full `/webhook/...` path is forwarded to n8n +- CORS plugin allows browser cross-origin requests (all origins for internal workflow triggers) + +### 2. Docker Compose (`docker-compose.yml`) + +**Kong service:** +- Added `n8n` to the `depends_on` list (waits for n8n to start before Kong) + +**n8n service:** +- Updated `WEBHOOK_URL` environment variable to use `${WEBHOOK_DOMAIN:http://localhost:55590}/` +- This allows production deployments to override the default localhost URL + +### 3. Frontend Configuration (`frontend/config.js`) + +Updated the webhook URL configuration: + +```javascript +N8N_WEBHOOK_URL: "/webhook/manual-email-send" +``` + +This is a **same-origin request** path that works for both: +- **Local:** `http://localhost:55521/webhook/manual-email-send` (Kong on port 55521) +- **Production:** `https://your-domain.com/webhook/manual-email-send` + +### 4. Admin UI (`frontend/admin.js`) + +Updated `sendOrderEmailDirect()` function to use the configured webhook URL directly: + +```javascript +const n8nUrl = window.MCCARS_CONFIG?.N8N_WEBHOOK_URL || "/webhook/manual-email-send"; +``` + +## Deployment Steps + +### For Production Deployment: + +1. **Update Kong configuration** by deploying the modified `supabase/kong.yml` + - Kong will automatically reload the config and start proxying `/webhook/*` requests + +2. **Set environment variables** (in your `.env` file): + ```bash + # Optional: Override n8n webhook domain (defaults to localhost) + WEBHOOK_DOMAIN=https://your-domain.com + ``` + + If not set, n8n will use the default `http://localhost:55590/` (only works internally) + +3. **Deploy the updated code**: + - `frontend/config.js` with the new webhook URL + - `frontend/admin.js` with the updated sendOrderEmailDirect function + - `docker-compose.yml` with Kong n8n dependency + - `supabase/kong.yml` with the new n8n service + +4. **Restart the stack**: + ```bash + docker-compose up -d + ``` + +### For Local Development: + +No special configuration needed: +- Kong is already on port 55521 +- Browser requests to `/webhook/manual-email-send` will be proxied to internal n8n +- Works the same as production (same-origin requests) + +## How It Works + +1. **Browser action**: User clicks "Email senden" button in order dialog +2. **Browser request**: JavaScript POSTs to `/webhook/manual-email-send` (same origin) +3. **Kong routing**: Kong receives request, forwards to `http://n8n:5678/webhook/manual-email-send` +4. **n8n webhook**: n8n webhook listener triggers the manual-email-send workflow +5. **Workflow execution**: n8n fetches order data, builds email, sends via SMTP +6. **Response**: Workflow returns success/error response to browser + +## Security + +- **Network isolation**: n8n remains internal, not exposed to internet +- **No authentication required**: Webhook path is open (can be restricted later if needed) +- **CORS enabled**: Allows browser requests to Kong +- **Kong isolation**: Kong is the only service exposed; internal services hidden behind it + +## Troubleshooting + +### "Failed to fetch" error in browser + +1. Check Kong is routing properly: + ```bash + # Test from inside docker network + docker-compose exec kong curl -v http://n8n:5678/webhook/manual-email-send + ``` + +2. Verify Kong config loaded: + ```bash + docker-compose logs kong | grep "n8n-webhooks" + ``` + +3. Check n8n is running: + ```bash + docker-compose logs n8n + ``` + +### n8n workflow not triggering + +1. Verify webhook path in n8n workflow (should be exactly `/webhook/manual-email-send`) +2. Check n8n logs for webhook errors: + ```bash + docker-compose logs n8n | grep webhook + ``` + +## References + +- Kong configuration format: https://docs.konghq.com/deck/latest/ +- n8n webhooks: https://docs.n8n.io/nodes/n8n-nodes-base.Webhook/ +- Docker networking: https://docs.docker.com/engine/reference/commandline/network_connect/ diff --git a/docker-compose.yml b/docker-compose.yml index 1014b30..1e3ff46 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -397,7 +397,7 @@ services: N8N_HOST: 0.0.0.0 N8N_PORT: 5678 N8N_PROTOCOL: http - WEBHOOK_URL: http://localhost:55590/ + WEBHOOK_URL: ${WEBHOOK_DOMAIN:-http://localhost:55590}/ N8N_ENCRYPTION_KEY: ${N8N_ENCRYPTION_KEY} N8N_ENFORCE_SETTINGS_FILE_PERMISSIONS: "false" N8N_SECURE_COOKIE: "false" diff --git a/frontend/admin.js b/frontend/admin.js index 8bffa9a..5cfb203 100644 --- a/frontend/admin.js +++ b/frontend/admin.js @@ -773,7 +773,7 @@ async function sendOrderEmailDirect(orderId) { const sendBtn = orderDialogBody.querySelector("[data-manual-email-send]"); if (sendBtn) sendBtn.disabled = true; - const n8nUrl = (window.MCCARS_CONFIG?.N8N_WEBHOOK_URL || "http://localhost:55590") + "/webhook/manual-email-send"; + const n8nUrl = window.MCCARS_CONFIG?.N8N_WEBHOOK_URL || "http://localhost:55521/webhook/manual-email-send"; try { // Use urlencoded payload to avoid browser preflight/CORS issues with JSON headers. diff --git a/supabase/kong.yml b/supabase/kong.yml index dada90e..99afa9d 100644 --- a/supabase/kong.yml +++ b/supabase/kong.yml @@ -120,3 +120,16 @@ services: hide_groups_header: true allow: - admin + + ######################################## + # n8n Webhooks (internal workflow triggers) + ######################################## + - name: n8n-webhooks + url: http://n8n:5678/ + routes: + - name: n8n-webhooks-all + strip_path: false + paths: + - /webhook/ + plugins: + - name: cors