calypso/FRONTEND-ACCESS-SETUP.md

Frontend Access Setup Complete

Tanggal: 2025-01-09
Reverse Proxy: Nginx
Status: ✅ CONFIGURED & RUNNING

Configuration Summary

Nginx Configuration

• Config File: /etc/nginx/sites-available/calypso
• Enabled: /etc/nginx/sites-enabled/calypso
• Port: 80 (HTTP)
• Root Directory: /opt/calypso/web
• API Backend: http://localhost:8080

Service Status

• ✅ Nginx: Running
• ✅ Calypso API: Running on port 8080
• ✅ Frontend Files: Served from /opt/calypso/web

Access URLs

Local Access

• Frontend: http://localhost/
• API: http://localhost/api/v1/health
• Login Page: http://localhost/login

Network Access

• Frontend: http:///
• API: http:///api/v1/health

Nginx Configuration Details

Static Files Serving

root /opt/calypso/web;
index index.html;

location / {
    try_files $uri $uri/ /index.html;
}

API Proxy

location /api {
    proxy_pass http://localhost:8080;
    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;
}

WebSocket Support

location /ws {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 86400s;
    proxy_send_timeout 86400s;
}

Terminal WebSocket

location /api/v1/system/terminal/ws {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 86400s;
    proxy_send_timeout 86400s;
}

Features Enabled

✅ Static File Serving

• Frontend files served from /opt/calypso/web
• SPA routing support (try_files fallback to index.html)
• Static asset caching (1 year)

✅ API Proxy

• All /api/* requests proxied to backend
• Proper headers forwarding
• Timeout configuration

✅ WebSocket Support

• /ws endpoint for monitoring events
• /api/v1/system/terminal/ws for terminal console
• Long timeout for persistent connections

✅ Security Headers

• X-Frame-Options: SAMEORIGIN
• X-Content-Type-Options: nosniff
• X-XSS-Protection: 1; mode=block

✅ Performance

• Gzip compression enabled
• Static asset caching
• Optimized timeouts

Service Management

Nginx Commands

# Start/Stop/Restart
sudo systemctl start nginx
sudo systemctl stop nginx
sudo systemctl restart nginx

# Reload configuration (without downtime)
sudo systemctl reload nginx

# Check status
sudo systemctl status nginx

# Test configuration
sudo nginx -t

View Logs

# Access logs
sudo tail -f /var/log/nginx/calypso-access.log

# Error logs
sudo tail -f /var/log/nginx/calypso-error.log

# All Nginx logs
sudo journalctl -u nginx -f

Testing

Test Frontend

# Check if frontend is accessible
curl http://localhost/

# Check if index.html is served
curl http://localhost/index.html

Test API Proxy

# Health check
curl http://localhost/api/v1/health

# Should return JSON response

Test WebSocket

# Test WebSocket connection (requires wscat or similar)
wscat -c ws://localhost/ws

Troubleshooting

Frontend Not Loading

1. Check Nginx status: sudo systemctl status nginx
2. Check Nginx config: sudo nginx -t
3. Check file permissions: ls -la /opt/calypso/web/
4. Check Nginx error logs: sudo tail -f /var/log/nginx/calypso-error.log

API Calls Failing

1. Check backend is running: sudo systemctl status calypso-api
2. Test backend directly: curl http://localhost:8080/api/v1/health
3. Check Nginx proxy logs: sudo tail -f /var/log/nginx/calypso-access.log

WebSocket Not Working

1. Check WebSocket headers in browser DevTools
2. Verify backend WebSocket endpoint is working
3. Check Nginx WebSocket configuration
4. Verify proxy_set_header Upgrade and Connection are set

Permission Issues

1. Check file ownership: ls -la /opt/calypso/web/
2. Check Nginx user: grep user /etc/nginx/nginx.conf
3. Ensure files are readable: sudo chmod -R 755 /opt/calypso/web

Firewall Configuration

If firewall is enabled, allow HTTP traffic:

# UFW
sudo ufw allow 80/tcp
sudo ufw allow 'Nginx Full'

# firewalld
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --reload

Next Steps

1. ✅ Frontend accessible via Nginx
2. ⏭️ Setup SSL/TLS (HTTPS) - Recommended for production
3. ⏭️ Configure domain name (if applicable)
4. ⏭️ Setup monitoring/alerting
5. ⏭️ Configure backup strategy

SSL/TLS Setup (Optional)

For production, setup HTTPS:

# Install Certbot
sudo apt-get install certbot python3-certbot-nginx

# Get certificate (replace with your domain)
sudo certbot --nginx -d your-domain.com

# Auto-renewal is configured automatically

---

Status: ✅ FRONTEND ACCESSIBLE
URL: http://localhost/ (or http:///)
API: http://localhost/api/v1/health