A Beginner's Guide to Nginx: From Static Files to React Apps

Today we're going to explore essential Nginx configurations that every developer should know. Whether you're serving static files, building a React application, or setting up a production-grade load balancer, Nginx is the powerful tool that can handle it all - if you know how to configure it properly.

In this practical guide, we'll break down Nginx's core concepts into bite-sized pieces with clear examples. You'll learn how to:

• Serve static content efficiently
• Configure smart routing with location blocks
• Boost performance with caching and compression
• Set up reverse proxies and load balancing
• Protect your applications with rate limiting
• Deploy a React application with optimal settings

We'll start with simple configurations and gradually move to more advanced setups. Each section includes ready-to-use code snippets you can adapt for your projects.

Let's dive in.

Why Nginx?

Nginx is a powerful web server, reverse proxy, and load balancer used by top sites like Netflix and Airbnb. It excels at handling high traffic efficiently. Let's break down key features step-by-step!

Core Concepts

Nginx uses:

• Directives: Configuration instructions (end with ;)
• Contexts: Scoped blocks (like http {} or server {})
• Key Contexts:
  • events {}: Global connection handling
  • http {}: HTTP-level settings (logging, MIME types)
  • server {}: Defines a virtual server (port, domain)
  • location {}: Routes requests based on URL paths

Basic Structure

events {}  # Connection settings

http {
    server {
        listen 80;
        server_name localhost;

        location / {
            root /usr/share/nginx/html;
        }
    }
}

Serve Static Files

Host HTML, images, or CSS: Place files in /usr/share/nginx/html Ensure correct MIME types:

    http {
    include /etc/nginx/mime.types;  # Auto-detects file types
    server {
        listen 80;
        root /usr/share/nginx/html;  # Serves index.html by default
    }
}

Routing with location

Match URLs:

server {
    location /about {
        # Handles /about, /about/us, etc.
        return 200 "About Page";
    }

    location ~* \.(jpg|css)$ {  # Regex: case-insensitive match
        root /usr/share/nginx/static;
    }
}

Performance Tuning

Workers:

events {
    worker_connections 1024;  # Connections per worker
}
http {
    worker_processes auto;     # Uses all CPU cores
}

Caching & Compression:

http {
    # Cache static files
    location ~* \.(css|js|jpg)$ {
        expires 1M;                  # Browser caches for 1 month
        add_header Cache-Control "public";
    }

    # Gzip compression
    gzip on;
    gzip_types text/css application/javascript;
}

Reverse Proxy

Forward requests to another server:

location /api {
    proxy_pass http://backend-server:3000;  # Sends /api to backend
    proxy_ssl_server_name on;               # For HTTPS backends
}

Load Balancing

Distribute traffic across servers:

http {
    upstream backend {
        least_conn;              # Sends to least-busy server
        server app1:8081;
        server app2:8082;
    }

    server {
        location / {
            proxy_pass http://backend;  # Route to upstream group
        }
    }
}

Rate Limiting

Prevent abuse:

http {
    # Limit to 100 requests/sec per IP
    limit_req_zone $binary_remote_addr zone=mylimit:10m rate=100r/s;

    server {
        location /login {
            limit_req zone=mylimit burst=20 nodelay;  # Allow bursts
        }
    }
}

Serve a React App

Full example:

events {}

http {
    include /etc/nginx/mime.types;
    gzip on;  # Enable compression

    server {
        listen 80;
        root /usr/share/nginx/react-app;

        # Serve index.html for all routes (client-side routing)
        location / {
            try_files $uri $uri/ /index.html;
        }

        # Cache static assets
        location ~* \.(js|css|png)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}

Key Takeaways

• Use location for routing logic
• Enable gzip and caching to boost speed
• Distribute traffic with upstream load balancing
• Protect endpoints with rate limiting

Explore Nginx's official docs for advanced configurations!