# 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://<server-ip>/
- **API:** http://<server-ip>/api/v1/health

## Nginx Configuration Details

### Static Files Serving
```nginx
root /opt/calypso/web;
index index.html;

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

### API Proxy
```nginx
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
```nginx
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
```nginx
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
```bash
# 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
```bash
# 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
```bash
# Check if frontend is accessible
curl http://localhost/

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

### Test API Proxy
```bash
# Health check
curl http://localhost/api/v1/health

# Should return JSON response
```

### Test WebSocket
```bash
# 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:
```bash
# 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:

```bash
# 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://<server-ip>/)  
**API:** http://localhost/api/v1/health