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:

   # 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:

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

Change the frontend environment variable from:

NEXT_PUBLIC_API_URL: http://37.60.249.71:5001/api/v1

To:

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

Then rebuild frontend:

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

# 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!