zerp/NGINX_CONFIGURATION.md

# 🔧 Nginx Proxy Manager Configuration for Z.CRM

## ⚠️ CRITICAL: This configuration is required for the system to work properly!

The frontend needs to connect to the backend API, and this requires proper Nginx configuration.

---

## 🎯 Complete Nginx Proxy Manager Setup

### Step 1: Add Main Application Proxy Host

1. **Log in to Nginx Proxy Manager** (usually at http://your-server-ip:81)

2. **Click "Proxy Hosts" → "Add Proxy Host"**

3. **Configure Details Tab**:
   ```
   Domain Names: zerp.atmata-group.com
   Scheme: http
   Forward Hostname/IP: localhost
   Forward Port: 3000
   ✓ Cache Assets
   ✓ Block Common Exploits  
   ✓ Websockets Support
   ```

4. **Configure SSL Tab**:
   ```
   ✓ Request a new SSL Certificate
   ✓ Force SSL
   ✓ HTTP/2 Support
   ✓ HSTS Enabled
   ✓ HSTS Subdomains
   Email: your-email@example.com
   ✓ I Agree to the Let's Encrypt Terms of Service
   ```

5. **Configure Advanced Tab** - **CRITICAL FOR API TO WORK**:
   
   Copy and paste this EXACT configuration:

   ```nginx
   # Proxy API requests to backend
   location /api {
       proxy_pass http://localhost:5001;
       proxy_http_version 1.1;
       
       # Headers
       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;
       proxy_set_header X-Forwarded-Host $host;
       
       # Websockets support
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_cache_bypass $http_upgrade;
       
       # Timeouts
       proxy_connect_timeout 60s;
       proxy_send_timeout 60s;
       proxy_read_timeout 60s;
   }

   # Health check endpoint
   location /health {
       proxy_pass http://localhost:5001/health;
       proxy_http_version 1.1;
       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;
   }
   ```

6. **Click "Save"**

---

## ✅ After Configuration

Once you save the Nginx configuration:

1. **Test the Application**:
   - Visit: https://zerp.atmata-group.com/
   - You should see the login page
   - Try logging in with: `gm@atmata.com` / `Admin@123`
   - The login should work now!

2. **Test API Endpoint**:
   - Visit: https://zerp.atmata-group.com/health
   - You should see: `{"status":"ok","timestamp":"...","env":"production"}`

---

## 🔄 Update Frontend Configuration

After Nginx is configured, update the frontend to use the domain for API calls:

```bash
ssh root@37.60.249.71
cd /opt/zerp
nano docker-compose.yml
```

Change the frontend environment variable from:
```yaml
NEXT_PUBLIC_API_URL: http://37.60.249.71:5001/api/v1
```

To:
```yaml
NEXT_PUBLIC_API_URL: https://zerp.atmata-group.com/api/v1
```

Then rebuild frontend:
```bash
docker-compose stop frontend
docker-compose rm -f frontend
docker-compose up -d --build frontend
```

---

## 📊 Port Summary

| Port | Service | Access | Nginx Config |
|------|---------|--------|--------------|
| 3000 | Frontend | Internal only | Proxy main domain here |
| 5001 | Backend API | Internal only | Proxy `/api` path here |
| 5432 | PostgreSQL | Internal only | Not exposed |

---

## 🧪 Testing Checklist

After configuration, test these:

- [ ] ✅ https://zerp.atmata-group.com/ loads the login page
- [ ] ✅ https://zerp.atmata-group.com/health returns JSON
- [ ] ✅ Can type username and password
- [ ] ✅ Can successfully log in
- [ ] ✅ Dashboard loads after login
- [ ] ✅ No CORS errors in browser console (F12)

---

## 🚨 Troubleshooting

### "Failed to fetch" Error

**Symptom**: Login shows "Failed to fetch" error

**Solution**: Make sure you added the Advanced tab configuration in Nginx to proxy `/api` to port 5001

### Mixed Content Error

**Symptom**: Console shows "Mixed Content" error

**Solution**: Ensure you enabled "Force SSL" in Nginx and the frontend uses `https://` for API_URL

### CORS Error

**Symptom**: Console shows CORS policy error

**Solution**: The backend CORS is now configured to accept requests from:
- `https://zerp.atmata-group.com`
- `http://zerp.atmata-group.com`
- `http://localhost:3000`
- `http://37.60.249.71:3000`

---

## 📝 Quick Reference

**What you need to do in Nginx Proxy Manager:**

1. **Main proxy**: `zerp.atmata-group.com` → `localhost:3000`
2. **Add Advanced config**: Proxy `/api` to `localhost:5001` (copy the code above)
3. **Enable SSL**: Let's Encrypt certificate
4. **Save**

That's it! The system will then work perfectly.

---

## 🔍 Verification Commands

```bash
# Check if backend is accessible
curl http://37.60.249.71:5001/health

# Check if frontend is accessible
curl http://37.60.249.71:3000

# After Nginx config, check domain
curl https://zerp.atmata-group.com/health
```

---

## 📞 Current Status

✅ Backend: Running on port 5001  
✅ Frontend: Running on port 3000  
✅ Database: Seeded with test users  
✅ Firewall: Configured (ports 22, 80, 443)  
⏳ **Nginx: NEEDS CONFIGURATION** (follow steps above)

Once Nginx is properly configured with the Advanced tab settings to proxy `/api` to the backend, your login will work perfectly!