Nginx vs Backend Static Serving: Complete Guide to Static Module Deployments

# Apache's Traditional Model (Process-per-Connection)
Connection 1 → Process 1 (8MB memory)
Connection 2 → Process 2 (8MB memory)
Connection 3 → Process 3 (8MB memory)
...
Connection 1000 → Process 1000 (8MB memory)
Total: 8GB memory for 1000 connections!

# Nginx's Event-Driven Model (Single Process, Multiple Workers)
Master Process → Worker 1 (handles 1000s of connections)
              → Worker 2 (handles 1000s of connections)
              → Worker 3 (handles 1000s of connections)
              → Worker 4 (handles 1000s of connections)
Total: ~50MB memory for 10,000+ connections!

# The Revolution: One worker process handles many connections
# through asynchronous I/O and event loops

# Nginx Process Architecture

## Master Process
- Reads configuration files
- Creates worker processes
- Handles signals (reload, restart)
- Manages worker process lifecycle

## Worker Processes (typically 1 per CPU core)
- Handle all client connections
- Process HTTP requests
- Serve static files
- Proxy requests to backends

## Event Loop Model (inside each worker)
┌─────────────────────────────────────────────────────┐
│                 Event Loop                          │
│                                                     │
│  ┌─────────────────────────────────────────────────┐│
│  │ 1. Accept new connections                       ││
│  │ 2. Read request data                            ││
│  │ 3. Process request (non-blocking)               ││
│  │ 4. Write response data                          ││
│  │ 5. Handle I/O events (epoll/kqueue)            ││
│  │ 6. Back to step 1                              ││
│  └─────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────┘

# Key Insight: One worker handles thousands of connections
# without creating threads or processes for each connection

# Real-World Performance Metrics

## Static File Serving
Apache (prefork):  ~1,000 requests/second
Apache (worker):   ~3,000 requests/second
Nginx:            ~50,000 requests/second

## Memory Usage (1000 connections)
Apache (prefork): ~250MB
Apache (worker):  ~100MB
Nginx:            ~15MB

## CPU Usage (under load)
Apache: 80-90% CPU utilization
Nginx:  20-30% CPU utilization

# Why Nginx Wins:
- Event-driven architecture eliminates context switching
- Shared memory reduces memory overhead
- Efficient file handling with sendfile() system call
- Optimized for modern operating systems (epoll, kqueue)

# 1. Web Server Mode - Serving Static Files
server {
    listen 80;
    server_name myapp.com;
    
    location / {
        root /var/www/html;
        index index.html;
        try_files $uri $uri/ =404;
    }
    
    # Perfect for: Static websites, SPAs after build
}

# 2. Reverse Proxy Mode - Forwarding to Backend
server {
    listen 80;
    server_name api.myapp.com;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    # Perfect for: API gateways, microservices
}

# 3. Hybrid Mode - Static + API (Most Common)
server {
    listen 80;
    server_name myapp.com;
    
    # Serve static files directly
    location / {
        root /var/www/html;
        try_files $uri $uri/ /index.html;
    }
    
    # Proxy API requests to backend
    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    # Perfect for: Modern web apps (React + Node.js)
}

# nginx.conf - Reverse Proxy Approach
server {
    listen 80;
    server_name myapp.com;
    
    # Serve static files directly from Nginx
    location /static/ {
        alias /var/www/static/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # Serve React build files
    location / {
        root /var/www/html;
        try_files $uri $uri/ /index.html;
        expires 1h;
    }
    
    # Proxy API requests to backend
    location /api/ {
        proxy_pass http://localhost:3000;
        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;
    }
}

# Result: Nginx serves static files at native speed
# Backend only handles API logic

// Express.js - Backend Static Serving
const express = require('express');
const path = require('path');
const app = express();

// Serve static files from React build
app.use(express.static(path.join(__dirname, 'build')));

// Serve additional static assets
app.use('/static', express.static(path.join(__dirname, 'public')));

// API routes
app.get('/api/users', (req, res) => {
  res.json({ users: [] });
});

// Fallback to React app for client-side routing
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000);

// Result: Express serves both static files and API endpoints
// Single server handles everything

# nginx.conf - Hybrid Approach (Most Common)
server {
    listen 80;
    server_name myapp.com;
    
    # 1. DIRECT STATIC SERVING (Nginx serves files from disk)
    location /static/ {
        alias /var/www/static/;  # Nginx reads from disk directly
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # 2. DIRECT STATIC SERVING (React build files)
    location / {
        root /var/www/html;      # Nginx reads from disk directly
        try_files $uri $uri/ /index.html;
        expires 1h;
    }
    
    # 3. REVERSE PROXY (Forward to backend API)
    location /api/ {
        proxy_pass http://localhost:3000;  # Forward to Node.js backend
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    # 4. REVERSE PROXY (Forward to different backend service)
    location /admin/ {
        proxy_pass http://localhost:3001;  # Forward to admin backend
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

# Summary:
# - Static files (/, /static/) → Nginx serves directly from disk
# - API requests (/api/) → Nginx forwards to backend port 3000
# - Admin requests (/admin/) → Nginx forwards to backend port 3001

# Nginx Reverse Proxy Architecture
Port 80 (Nginx) → Static files (served directly)
                → /api/* → Port 3000 (Node.js API)
                → /admin/* → Port 3001 (Admin API)
                → /static/* → Direct from disk

# Backend Static Serving Architecture  
Port 3000 (Express) → Everything (static + API + admin)

# Real-world Example:
# Nginx approach:
# - myapp.com/ → Nginx serves index.html from disk
# - myapp.com/api/users → Nginx forwards to localhost:3000/api/users
# - myapp.com/admin → Nginx forwards to localhost:3001/admin
# - myapp.com/static/logo.png → Nginx serves directly from disk

# Backend approach:
# - myapp.com/ → Express serves index.html from disk
# - myapp.com/api/users → Express handles API logic
# - myapp.com/admin → Express handles admin logic
# - myapp.com/static/logo.png → Express serves from disk

# Static File Serving Performance (1MB file)

## Nginx Direct Serving
- Requests/second: ~50,000
- Memory usage: ~2MB per 1000 connections
- CPU usage: ~5% under load
- Response time: ~0.1ms

## Express.js Static Serving
- Requests/second: ~2,000
- Memory usage: ~50MB per 1000 connections  
- CPU usage: ~40% under load
- Response time: ~2ms

## FastAPI Static Serving
- Requests/second: ~3,000
- Memory usage: ~30MB per 1000 connections
- CPU usage: ~30% under load
- Response time: ~1.5ms

## Nest.js Static Serving
- Requests/second: ~1,800
- Memory usage: ~60MB per 1000 connections
- CPU usage: ~45% under load
- Response time: ~2.5ms

# Key Takeaway: Nginx is 10-25x faster for static files

# Nginx Reverse Proxy Deployment
# 1. Deploy backend service
pm2 start app.js --name api-server

# 2. Configure Nginx
sudo vim /etc/nginx/sites-available/myapp
sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/

# 3. Deploy frontend files
rsync -av build/ /var/www/html/

# 4. Restart Nginx
sudo systemctl reload nginx

# 5. Monitor two services
pm2 status
sudo nginx -t

# Backend Static Serving Deployment
# 1. Deploy everything together
pm2 start app.js --name full-stack-app

# 2. Deploy frontend to backend
rsync -av build/ ./public/

# 3. Restart single service
pm2 restart full-stack-app

# 4. Monitor one service
pm2 status

# Trade-off: Nginx = Better performance, more complexity
# Backend = Simpler deployment, acceptable performance