12 KiB

Raw Blame History

🔧 Nginx Proxy Cache Fix - LuckyChit

Your Architecture

Internet → Cloudflare → Nginx Proxy (LXC 1) → Backend (LXC 2: 192.168.8.148)

The Problem

Your nginx proxy in the separate LXC container is caching the old version of your Flutter web app!

⚡ IMMEDIATE FIX

Option 1: Clear Nginx Cache (Temporary)

SSH into your nginx proxy LXC:

# Find nginx cache directory
sudo find /var -name "*cache*" -type d 2>/dev/null | grep nginx

# Common locations:
# /var/cache/nginx
# /var/lib/nginx/cache
# /var/run/nginx-cache

# Clear the cache
sudo rm -rf /var/cache/nginx/*
sudo rm -rf /var/lib/nginx/cache/*
sudo rm -rf /var/run/nginx-cache/*

# Reload nginx
sudo nginx -t
sudo systemctl reload nginx

Option 2: Restart Nginx (Quick)

sudo systemctl restart nginx

🔍 Check Your Nginx Configuration

SSH into your nginx proxy LXC and check the config:

# Find nginx config files
sudo nginx -T | grep -i cache
# or
sudo grep -r "proxy_cache" /etc/nginx/

# Main config location
sudo cat /etc/nginx/nginx.conf
sudo cat /etc/nginx/sites-enabled/chitfund

🎯 Nginx Configuration Fix

Find Your Site Config

cd /etc/nginx/sites-available
ls -la
# Look for chitfund, luckychit, or your domain name

Check for Caching Directives

Look for these lines in your nginx config:

# These ENABLE caching (might be causing issues)
proxy_cache my_cache;
proxy_cache_valid 200 60m;
proxy_cache_use_stale error timeout;
proxy_cache_bypass $http_cache_control;

🛠️ Solution 1: Disable Nginx Caching (Recommended for Now)

Edit your nginx config for chitfund:

sudo nano /etc/nginx/sites-available/chitfund

Add These Headers to DISABLE Caching:

server {
    listen 80;
    server_name chitfund.deepteklabs.com;

    location / {
        proxy_pass http://192.168.8.148:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # DISABLE CACHING
        proxy_cache_bypass $http_upgrade;
        proxy_no_cache 1;
        proxy_cache off;
        
        # Tell browsers not to cache
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
    }

    location /api {
        proxy_pass http://192.168.8.148:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # Don't cache API responses
        proxy_cache_bypass $http_upgrade;
        proxy_no_cache 1;
        proxy_cache off;
    }
}

Test and Reload:

sudo nginx -t
sudo systemctl reload nginx

🎯 Solution 2: Smart Caching (Better for Production)

Cache static assets but not HTML:

server {
    listen 80;
    server_name chitfund.deepteklabs.com;

    # Cache static files
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        proxy_pass http://192.168.8.148:8080;
        proxy_cache my_cache;
        proxy_cache_valid 200 7d;
        proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
        add_header X-Cache-Status $upstream_cache_status;
        expires 7d;
    }

    # DON'T cache HTML, JSON, etc
    location / {
        proxy_pass http://192.168.8.148:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        
        # No caching for HTML
        proxy_no_cache 1;
        proxy_cache_bypass 1;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }

    # API - never cache
    location /api {
        proxy_pass http://192.168.8.148:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_no_cache 1;
        proxy_cache_bypass 1;
    }
}

🔍 Debugging Nginx Cache

Check if Caching is Enabled:

sudo nginx -T | grep -A 5 "proxy_cache"

Check Cache Directory:

sudo du -sh /var/cache/nginx/*
sudo ls -lh /var/cache/nginx/

Check Cache Status in Response:

# From any machine
curl -I http://chitfund.deepteklabs.com

# Look for:
# X-Cache-Status: HIT (cached)
# X-Cache-Status: MISS (not cached)

Enable Cache Status Header:

Add to your nginx location block:

add_header X-Cache-Status $upstream_cache_status;

🚀 Complete Nginx Config Example

Here's a complete config for your setup:

# /etc/nginx/sites-available/chitfund

# Cache zone definition (optional, only if using caching)
# proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=1g inactive=7d;

server {
    listen 80;
    listen [::]:80;
    server_name chitfund.deepteklabs.com;

    # Increase timeout for Flutter web
    proxy_connect_timeout 60s;
    proxy_send_timeout 60s;
    proxy_read_timeout 60s;

    # Frontend (Flutter Web) - NO CACHE
    location / {
        proxy_pass http://192.168.8.148:8080;
        proxy_http_version 1.1;
        
        # WebSocket support
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # Disable caching
        proxy_cache_bypass $http_upgrade;
        proxy_no_cache 1;
        
        # Tell browsers not to cache
        add_header Cache-Control "no-cache, no-store, must-revalidate" always;
        add_header Pragma "no-cache" always;
        add_header Expires "0" always;
        
        # Debug header (optional)
        add_header X-Proxy-Cache "DISABLED" always;
    }

    # Backend API - NO CACHE
    location /api {
        proxy_pass http://192.168.8.148:3000;
        proxy_http_version 1.1;
        
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # Never cache API
        proxy_no_cache 1;
        proxy_cache_bypass 1;
        
        add_header Cache-Control "no-cache, no-store, must-revalidate" always;
    }

    # Health check endpoint
    location /health {
        proxy_pass http://192.168.8.148:3000/health;
        proxy_no_cache 1;
        access_log off;
    }
}

📋 Step-by-Step Fix Process

1. SSH into Nginx Proxy LXC

ssh root@<nginx-proxy-lxc-ip>

2. Backup Current Config

sudo cp /etc/nginx/sites-available/chitfund /etc/nginx/sites-available/chitfund.backup

3. Edit Config

sudo nano /etc/nginx/sites-available/chitfund

Add the cache-control headers shown above.

4. Test Config

sudo nginx -t

Should show: syntax is ok and test is successful

5. Clear Existing Cache

sudo rm -rf /var/cache/nginx/*

6. Reload Nginx

sudo systemctl reload nginx

7. Test from Browser

# Hard refresh
Ctrl + Shift + R (Windows)
Cmd + Shift + R (Mac)

🧪 Verify It's Fixed

Check Response Headers:

curl -I http://chitfund.deepteklabs.com

You should see:

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

Check from Browser DevTools:

Press F12
Go to Network tab
Refresh page
Click on the main document
Check Response Headers
Should show Cache-Control: no-cache

🎯 For 502 Bad Gateway Issue

The 502 might be because:

1. Nginx Can't Reach Backend

# From nginx proxy LXC, test backend connectivity:
curl http://192.168.8.148:3000/health
curl http://192.168.8.148:8080

# If these fail, check:
# - Backend PM2 is running
# - Firewall allows traffic between LXCs
# - Network routing between containers

2. Backend is Down

SSH into backend LXC (192.168.8.148):

pm2 status
pm2 restart all

3. Firewall Between LXCs

On backend LXC (192.168.8.148):

# Allow traffic from nginx proxy
sudo ufw status
sudo ufw allow from <nginx-proxy-ip> to any port 3000
sudo ufw allow from <nginx-proxy-ip> to any port 8080

🔗 Architecture Diagram

┌─────────────┐
│   Browser   │
└──────┬──────┘
       │ HTTPS
       ▼
┌─────────────┐
│ Cloudflare  │ (CDN/Proxy)
└──────┬──────┘
       │ HTTP/HTTPS
       ▼
┌─────────────┐
│ Nginx Proxy │ LXC 1
│ (Caching!)  │ Port 80/443
└──────┬──────┘
       │ HTTP
       ▼
┌─────────────┐
│   PM2 Apps  │ LXC 2 (192.168.8.148)
│ Backend:3000│
│ Frontend:8080│
└─────────────┘

Cache points:

Browser ✅ (fixed with meta tags)
Cloudflare ⚠️ (can cache)
Nginx Proxy ⚠️ (likely culprit!)
PM2 ✅ (serves files)

🎓 Understanding the Issue

Why Nginx Caches:

Performance: Reduces load on backend
Speed: Serves cached content faster
Default behavior: Many nginx configs enable caching

Why It's Problematic:

❌ Shows old version after deployment
❌ Users see stale content
❌ Developers get confused

The Solution:

✅ Disable caching for HTML/JSON
✅ Optional: Cache only static assets (images, CSS, JS)
✅ Add cache-control headers

📋 Complete Fix Checklist

SSH into nginx proxy LXC
Backup nginx config
Add proxy_no_cache directives
Add cache-control headers
Test nginx config: nginx -t
Clear nginx cache: rm -rf /var/cache/nginx/*
Reload nginx: systemctl reload nginx
Test backend connectivity from nginx LXC
Verify PM2 is running on backend LXC
Hard refresh browser
Check response headers
Verify latest content shows

🚨 Quick Fix Script

Create this on your nginx proxy LXC:

#!/bin/bash
# clear-nginx-cache.sh

echo "🧹 Clearing Nginx Cache..."

# Clear cache
sudo rm -rf /var/cache/nginx/*
sudo rm -rf /var/lib/nginx/cache/*
sudo rm -rf /var/run/nginx-cache/*

# Reload nginx
sudo nginx -t && sudo systemctl reload nginx

echo "✅ Cache cleared and nginx reloaded!"
echo ""
echo "🧪 Test backend connectivity:"
curl -I http://192.168.8.148:3000/health

💡 Pro Tips

Always disable cache during development
Enable selective caching in production (only static files)
Add cache-control headers at nginx level
Monitor cache hit rates to tune performance
Document your nginx LXC setup for future reference

📞 Still Having Issues?

If caching persists:

Check all 3 cache layers:
- Browser (Ctrl+Shift+R)
- Cloudflare (purge cache in dashboard)
- Nginx (clear as shown above)
Verify nginx config:
```
sudo nginx -T | grep -i cache
```

Check response headers:

curl -I http://chitfund.deepteklabs.com

Test directly to backend (bypass nginx):
```
curl http://192.168.8.148:8080
```

Your cache issue is likely in the nginx proxy! Clear the cache and add the no-cache headers shown above. 🚀

12 KiB Raw Blame History