100% Free • Production-Ready

Nginx Config Generator
Made Simple

Generate production-ready Nginx configuration files instantly with SSL, reverse proxy, caching, and security headers.Perfect for Node.js, Python, PHP, and static sites.

Generate Config NowSee Features
SSL Support
Reverse Proxy
Custom Headers
Caching Rules

Quick Presets

Basic Settings

SSL Configuration

Options

Custom Headers

Additional Locations

Generated Configuration

server {
    listen 80;
    server_name example.com;

    client_max_body_size 10M;

    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        proxy_cache_bypass $http_upgrade;
    }

    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Powerful Features

Everything you need to configure Nginx for production

Reverse Proxy

Configure proxy pass to your backend applications with automatic headers and WebSocket support.

SSL / HTTPS

Enable SSL with TLS 1.2/1.3, configure certificates, and add security headers automatically.

Performance

Built-in gzip compression, static file caching, and browser cache control for optimal performance.

What is Nginx?

Nginx (pronounced "engine-x") is a high-performance, open-source web server and reverse proxy server that has become one of the most popular choices for serving web applications worldwide. Originally created by Igor Sysoev in 2004 to solve the C10K problem (handling 10,000 concurrent connections), Nginx has evolved into a versatile tool that powers over 30% of all websites on the internet.

Unlike traditional web servers like Apache that use a process-per-connection model, Nginx employs an asynchronous, event-driven architecture. This design allows it to handle thousands of simultaneous connections with minimal memory footprint, making it exceptionally efficient for high-traffic websites and applications. Nginx excels at serving static content, acting as a reverse proxy for application servers, load balancing traffic across multiple backends, and providing SSL/TLS termination.

Modern web architectures frequently use Nginx as a front-end server that sits in front of application servers running Node.js, Python, Ruby, PHP, or Java applications. In this configuration, Nginx handles incoming HTTP requests, serves static files directly, and forwards dynamic requests to the appropriate backend service. This separation of concerns improves performance, security, and scalability.

Whether you are deploying a simple static website, a complex microservices architecture, or a WordPress blog, understanding Nginx configuration is essential for any developer or system administrator. This guide and our free Nginx config generator will help you create production-ready configurations quickly and correctly.

Nginx Configuration Basics

Nginx configuration files use a simple, hierarchical structure based on directives and contexts. The main configuration file is typically located at /etc/nginx/nginx.conf, with additional server-specific configurations in /etc/nginx/sites-available/ or /etc/nginx/conf.d/.

The configuration hierarchy consists of several key contexts: the main context for global settings, the events context for connection handling, the http context for HTTP server settings, server blocks for virtual hosts, and location blocks for URL-specific rules. Each context can contain directives that control behavior at that level.

A server block defines a virtual server that handles requests for a specific domain or IP address. Within a server block, you specify the listen directive (port and optional SSL), server_name (domain names), and root (document root directory). Location blocks inside the server block define how Nginx handles requests to specific URL paths.

Location blocks are powerful tools for routing requests. They support exact matching (location = /path), prefix matching (location /path), and regular expression matching (location ~ \.php$). Understanding location block precedence is crucial: exact matches take priority, followed by preferential prefix (^~), regex matches, and finally standard prefix matches.

For reverse proxy setups, the proxy_pass directive forwards requests to a backend server. Essential proxy headers like X-Real-IP, X-Forwarded-For, and X-Forwarded-Proto ensure the backend receives correct client information. WebSocket support requires additional headers: Upgrade and Connection.

After modifying configuration files, always test the syntax with nginx -t before reloading. Apply changes with nginx -s reload for a graceful reload that maintains existing connections, or systemctl restart nginx for a full restart.

Nginx Configuration Examples

Production-ready Nginx configurations for popular frameworks and use cases

Nginx for React SPA

Single Page Applications built with React, Vue, or Angular require special handling for client-side routing. This configuration serves your built static files and redirects all routes to index.html for proper routing:

server {
    listen 80;
    server_name example.com www.example.com;
    root /var/www/react-app/build;
    index index.html;

    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
    gzip_min_length 1000;

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

    # Handle React Router - redirect all requests to index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
}

Nginx for Next.js

Next.js applications run as a Node.js server and require a reverse proxy configuration. This setup handles both static assets and server-side rendered pages:

server {
    listen 80;
    server_name example.com www.example.com;

    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

    # Next.js static files
    location /_next/static {
        alias /var/www/nextjs-app/.next/static;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Public folder static files
    location /static {
        alias /var/www/nextjs-app/public/static;
        expires 1y;
    }

    # Proxy to Next.js server
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        proxy_cache_bypass $http_upgrade;
    }
}

Nginx for WordPress

WordPress requires PHP-FPM integration and special handling for permalinks. This configuration includes security measures to protect sensitive files:

server {
    listen 80;
    server_name example.com www.example.com;
    root /var/www/wordpress;
    index index.php index.html;

    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

    # WordPress permalinks
    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    # PHP-FPM configuration
    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
        fastcgi_intercept_errors on;
    }

    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 30d;
        add_header Cache-Control "public";
    }

    # Block access to sensitive files
    location ~ /\. { deny all; }
    location ~* /wp-config.php { deny all; }
    location ~* /readme.html { deny all; }
    location ~* /license.txt { deny all; }
}

Nginx Reverse Proxy for Node.js

This configuration sets up Nginx as a reverse proxy for a Node.js application with WebSocket support, perfect for Express, Fastify, or NestJS applications:

upstream nodejs_backend {
    server 127.0.0.1:3000;
    keepalive 64;
}

server {
    listen 80;
    server_name api.example.com;

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

    # Proxy settings
    location / {
        proxy_pass http://nodejs_backend;
        proxy_http_version 1.1;

        # WebSocket support
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        # Preserve client information
        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;

        # Timeouts
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;

        # Buffer settings
        proxy_buffering on;
        proxy_buffer_size 4k;
        proxy_buffers 8 4k;
    }

    # Health check endpoint (no logging)
    location /health {
        proxy_pass http://nodejs_backend;
        access_log off;
    }
}

Common Nginx Mistakes to Avoid

1. Missing try_files for SPAs

Single Page Applications with client-side routing (React Router, Vue Router) will show 404 errors for direct URL access if you do not use try_files to fall back to index.html. Always include: try_files $uri $uri/ /index.html;

2. Forgetting proxy headers

When using proxy_pass, failing to set X-Real-IP, X-Forwarded-For, and X-Forwarded-Proto headers means your backend application cannot determine the real client IP or whether the original request was HTTPS. This breaks logging, rate limiting, and security features.

3. Incorrect location block order

Location blocks are not processed in order of appearance. Regex locations (~) are evaluated after prefix matches unless you use ^~ to prevent regex checking. Misunderstanding this leads to unexpected routing behavior. Use exact matches (=) for critical paths.

4. Not enabling gzip compression

Serving uncompressed text-based assets (HTML, CSS, JavaScript, JSON) wastes bandwidth and slows page loads. Always enable gzip with appropriate types. However, avoid compressing already-compressed formats like images or videos.

5. Using root inside location blocks incorrectly

The root directive appends the location path, while alias replaces it. Using root /var/www with location /images means files are served from /var/www/images/. If you want /var/www/ directly, use alias. Mixing these up causes 404 errors.

Frequently Asked Questions

How do I configure Nginx for React Router?

React Router uses client-side routing, which means all routes need to be handled by your React application. Configure Nginx to serve index.html for any route that does not match a static file:

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

This tells Nginx to first look for an exact file match, then a directory, and finally fall back to index.html where React Router will handle the routing.

What is the difference between location / and location ~ ?

location / is a prefix match that matches any URL starting with /. location ~ uses case-sensitive regular expressions. For example, location ~ \.php$ matches any URL ending in .php. Use location ~* for case-insensitive regex. Priority order: exact (=) > preferential prefix (^~) > regex (~, ~*) > prefix (/).

How do I enable gzip compression in Nginx?

Enable gzip compression in your server or http block to reduce file sizes and improve load times:

gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml application/json application/javascript
           application/xml application/rss+xml application/atom+xml image/svg+xml;

The gzip_types directive specifies which MIME types to compress. Do not compress images (except SVG) or videos as they are already compressed.

How do I set up SSL with Nginx?

Configure SSL/TLS by specifying certificate paths and enabling HTTPS on port 443. Use modern TLS protocols and ciphers for security:

server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
    ssl_prefer_server_ciphers off;

    # HSTS (optional but recommended)
    add_header Strict-Transport-Security "max-age=31536000" always;
}

For free SSL certificates, use Let's Encrypt with Certbot. Add a redirect from HTTP to HTTPS for security.

How do I proxy to a Node.js app?

Use proxy_pass to forward requests to your Node.js application. Include essential headers for proper request handling:

location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    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;
    proxy_cache_bypass $http_upgrade;
}

The Upgrade and Connection headers enable WebSocket connections. X-Real-IP and X-Forwarded-For pass the client's real IP address to your application.

How do I serve multiple domains with Nginx?

Create separate server blocks for each domain. Each block specifies its own server_name and root directory. Nginx matches incoming requests to the appropriate server block based on the Host header. You can also handle multiple domains in one block using server_name example.com www.example.com api.example.com or wildcards like *.example.com.

How do I reload Nginx configuration without downtime?

Always test your configuration first with nginx -t. If the test passes, reload with nginx -s reload or systemctl reload nginx. This gracefully reloads the configuration without dropping existing connections. The master process spawns new worker processes with the new config while old workers finish handling current requests.

Deploy Your Nginx Config with Server Compass

Skip the manual configuration hassle. Server Compass automatically configures Nginx reverse proxy, SSL certificates, and security headers for your applications.

  • Automatic SSL with Let's Encrypt
  • Pre-configured reverse proxy for all frameworks
  • Gzip compression and caching out of the box
  • Security headers configured automatically
  • WebSocket support for real-time applications
Try Server Compass FreeGenerate Another Config