Configuring Static Content Serving

Now that you've learned how to set up virtual hosts and server blocks, it's time to dive into one of Nginx's most fundamental capabilities: serving static content efficiently. In this lesson, you'll learn how to configure Nginx to deliver HTML, CSS, JavaScript, images, and other static files with optimal performance.

Learning Goals:

• Configure Nginx to serve static files from custom directories
• Understand and use location blocks for static content
• Set proper MIME types and caching headers
• Optimize static file serving performance

Understanding Static Content Serving

Static content refers to files that don't change based on user requests - HTML pages, CSS stylesheets, JavaScript files, images, fonts, and downloadable documents. Nginx excels at serving static content due to its event-driven architecture and efficient file handling.

Basic Static File Configuration

Let's start with a simple server block that serves static files from a directory:

basic-static.conf

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

    location / {
        try_files $uri $uri/ =404;
    }
}

This configuration:

• Serves files from /var/www/example.com
• Uses index.html as the default file
• Attempts to serve the requested URI, falls back to 404 if not found

Advanced Location Blocks for Static Files

You can create specific location blocks for different types of static content:

advanced-static.conf

server {
    listen 80;
    server_name example.com;
    root /var/www/example.com;

    # Serve HTML files
    location ~* \.html$ {
        expires 1h;
        add_header Cache-Control "public";
    }

    # Serve CSS and JavaScript
    location ~* \.(css|js)$ {
        expires 7d;
        add_header Cache-Control "public, immutable";
    }

    # Serve images
    location ~* \.(jpg|jpeg|png|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    # Serve downloadable files
    location ~* \.(pdf|doc|docx|zip)$ {
        expires 1d;
        add_header Content-Disposition "attachment";
    }
}

tip

Use regular expression location blocks (~*) for file type matching. The ~* makes the match case-insensitive, ensuring files with different capitalizations are served correctly.

Setting Up Custom Static Directories

Sometimes you need to serve static files from multiple directories. Here's how to configure additional static paths:

multiple-directories.conf

server {
    listen 80;
    server_name example.com;
    root /var/www/example.com;

    # Main application files
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Serve user uploads from a different directory
    location /uploads/ {
        alias /var/storage/uploads/;
        expires 30d;
        
        # Security: prevent execution of uploaded files
        location ~ \.php$ {
            deny all;
        }
    }

    # Serve shared assets from CDN-like directory
    location /assets/ {
        alias /var/shared/assets/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Performance Optimization for Static Content

Optimize your static file serving with these performance-focused directives:

optimized-static.conf

server {
    listen 80;
    server_name example.com;
    root /var/www/example.com;

    location /static/ {
        # Enable sendfile for efficient file transfers
        sendfile on;
        sendfile_max_chunk 1m;
        
        # Enable direct I/O for large files
        directio 4m;
        
        # Set appropriate buffer sizes
        output_buffers 2 1m;
        
        # Cache file metadata
        open_file_cache max=1000 inactive=20s;
        open_file_cache_valid 30s;
        open_file_cache_min_uses 2;
        open_file_cache_errors on;
        
        # Set long cache times for static assets
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

warning

Be careful with the alias directive - it must end with a slash if the location block ends with a slash. Mismatched slashes can cause unexpected file path resolution issues.

MIME Type Configuration

Ensure files are served with correct content types:

mime-types.conf

server {
    listen 80;
    server_name example.com;
    root /var/www/example.com;
    
    # Include default MIME types
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # Add custom MIME types
    location ~* \.wasm$ {
        add_header Content-Type application/wasm;
    }

    location ~* \.webmanifest$ {
        add_header Content-Type application/manifest+json;
    }
}

Common Pitfalls

• Incorrect root vs alias: root appends the URI to the path, while alias replaces the location path
• Missing trailing slashes: Can cause 404 errors when using alias directive
• Overly broad location matches: Specific locations should come before general ones
• Forgetting MIME types: Files may download instead of display in browser
• Insecure file serving: Always restrict execution in user upload directories
• Inefficient caching headers: Set appropriate expires times based on file volatility

Summary

In this lesson, you learned how to configure Nginx for efficient static content serving. You now understand how to:

• Set up basic and advanced static file configurations
• Use location blocks to handle different file types
• Optimize performance with caching and sendfile
• Serve files from multiple directories
• Configure proper MIME types and security settings

Static content serving is the foundation of web performance - proper configuration ensures fast load times and optimal user experience.

Nginx Static Content and Security Directives

What's the difference between `root` and `alias` directives in Nginx?

Question 1/5