OpenVPN-Monitoring-Simple/DOCS/General/Nginx_Configuration.md

Nginx Configuration Guide

This guide details how to configure Nginx as a reverse proxy for the OpenVPN Monitor & Profiler application. Nginx is required in production to serve the frontend and route API requests to the appropriate backend services.

Architecture Recap

• Frontend (APP_UI): Static files (HTML, JS, CSS) served from /var/www/ovpmon (or similar).
• Core API (APP_CORE): Python/Flask service running on 127.0.0.1:5001.
• Profiler API (APP_PROFILER): Python/FastAPI service running on 127.0.0.1:8000.

1. Alpine Linux Setup

Installation

apk add nginx
rc-update add nginx default

Configuration

Create a new configuration file (e.g., /etc/nginx/http.d/ovpmon.conf).

server {
    listen 80;
    server_name your-server-domain.com; # Replace with your IP or Domain

    root /var/www/ovpmon;
    index index.html;

    # Gzip Compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # 1. Frontend (SPA Routing)
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 2. Core Monitoring API (Flask :5001)
    # Routes: /api/v1/stats, /api/auth, etc.
    location /api/v1/ {
        proxy_pass http://127.0.0.1:5001/api/v1/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /api/auth/ {
        proxy_pass http://127.0.0.1:5001/api/auth/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 3. Profiler Management API (FastAPI :8000)
    # Routes: /api/profiles, /api/config, etc.
    # Note: We capture /api/ but exclude /api/v1 (handled above)
    location /api/ {
        # Ensure this doesn't conflict with /api/v1. Nginx matching order:
        # Longest prefix matches first. So /api/v1/ wins over /api/.
        proxy_pass http://127.0.0.1:8000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Apply Changes

rc-service nginx restart

---

2. Debian / Ubuntu Setup

Installation

sudo apt update
sudo apt install nginx

Configuration

1. Create a configuration file in /etc/nginx/sites-available/ovpmon: (Use the same Nginx configuration block provided in the Alpine section above)

2. Enable the site:

   sudo ln -s /etc/nginx/sites-available/ovpmon /etc/nginx/sites-enabled/
   sudo rm /etc/nginx/sites-enabled/default  # Optional: Remove default site
   

3. Test and Restart:

   sudo nginx -t
   sudo systemctl restart nginx
   

---

3. Deployment Checklist

1. Frontend Build: Ensure you have built the UI and copied the files to your web root:

   cd APP_UI
   npm run build
   sudo mkdir -p /var/www/ovpmon
   sudo cp -r dist/* /var/www/ovpmon/
   

2. Permissions: Ensure Nginx can read the web files:

   sudo chown -R nginx:nginx /var/www/ovpmon  # Alpine
   # OR
   sudo chown -R www-data:www-data /var/www/ovpmon # Debian/Ubuntu
   

3. SELinux (RedHat/CentOS only): If using SELinux, allow Nginx to make network connections:

   setsebool -P httpd_can_network_connect 1