chitfund/NGINX_PROXY_CACHE_FIX.md

564 lines
12 KiB
Markdown

# 🔧 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**:
```bash
# 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)
```bash
sudo systemctl restart nginx
```
---
## 🔍 Check Your Nginx Configuration
SSH into your **nginx proxy LXC** and check the config:
```bash
# 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
```bash
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:
```nginx
# 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:
```bash
sudo nano /etc/nginx/sites-available/chitfund
```
### Add These Headers to DISABLE Caching:
```nginx
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:
```bash
sudo nginx -t
sudo systemctl reload nginx
```
---
## 🎯 Solution 2: Smart Caching (Better for Production)
Cache static assets but not HTML:
```nginx
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:
```bash
sudo nginx -T | grep -A 5 "proxy_cache"
```
### Check Cache Directory:
```bash
sudo du -sh /var/cache/nginx/*
sudo ls -lh /var/cache/nginx/
```
### Check Cache Status in Response:
```bash
# 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:
```nginx
add_header X-Cache-Status $upstream_cache_status;
```
---
## 🚀 Complete Nginx Config Example
Here's a complete config for your setup:
```nginx
# /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
```bash
ssh root@<nginx-proxy-lxc-ip>
```
### 2. Backup Current Config
```bash
sudo cp /etc/nginx/sites-available/chitfund /etc/nginx/sites-available/chitfund.backup
```
### 3. Edit Config
```bash
sudo nano /etc/nginx/sites-available/chitfund
```
Add the cache-control headers shown above.
### 4. Test Config
```bash
sudo nginx -t
```
Should show: `syntax is ok` and `test is successful`
### 5. Clear Existing Cache
```bash
sudo rm -rf /var/cache/nginx/*
```
### 6. Reload Nginx
```bash
sudo systemctl reload nginx
```
### 7. Test from Browser
```bash
# Hard refresh
Ctrl + Shift + R (Windows)
Cmd + Shift + R (Mac)
```
---
## 🧪 Verify It's Fixed
### Check Response Headers:
```bash
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:
1. Press `F12`
2. Go to Network tab
3. Refresh page
4. Click on the main document
5. Check Response Headers
6. Should show `Cache-Control: no-cache`
---
## 🎯 For 502 Bad Gateway Issue
The 502 might be because:
### 1. Nginx Can't Reach Backend
```bash
# 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):
```bash
pm2 status
pm2 restart all
```
### 3. Firewall Between LXCs
On backend LXC (192.168.8.148):
```bash
# 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:**
1. Browser ✅ (fixed with meta tags)
2. Cloudflare ⚠️ (can cache)
3. **Nginx Proxy ⚠️ (likely culprit!)**
4. 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:
```bash
#!/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
1. **Always disable cache during development**
2. **Enable selective caching in production** (only static files)
3. **Add cache-control headers** at nginx level
4. **Monitor cache hit rates** to tune performance
5. **Document your nginx LXC setup** for future reference
---
## 📞 Still Having Issues?
If caching persists:
1. **Check all 3 cache layers**:
- Browser (Ctrl+Shift+R)
- Cloudflare (purge cache in dashboard)
- Nginx (clear as shown above)
2. **Verify nginx config**:
```bash
sudo nginx -T | grep -i cache
```
3. **Check response headers**:
```bash
curl -I http://chitfund.deepteklabs.com
```
4. **Test directly to backend** (bypass nginx):
```bash
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.** 🚀