Dump the code

Configuring Nginx for serving static files

Created 9 months ago
Posted By admin
4min read
Configuring Nginx for serving static files efficiently is a common use case. Below are steps and directives to optimize Nginx for serving static content:

1. Create a Server Block:

Create or edit an Nginx configuration file, typically located in /etc/nginx/conf.d/ or /etc/nginx/sites-available/.

sudo nano /etc/nginx/conf.d/static_example.conf

2. Define a server block:

Inside the configuration file, define a server block to handle the static content. Specify the listen port, server_name, and root directory.

server {
    listen 80;
    server_name static.example.com;
    root /path/to/static/files;

    index index.html;
    # Additional server block configurations
}

3. Configure location blocks:

Use location blocks to define how Nginx should handle requests for specific URI patterns. For static content, typically, a location block for serving files directly and another for handling fallback (e.g., index.html).

server {
    listen 80;
    server_name static.example.com;
    root /path/to/static/files;

    index index.html;

    location / {
        # Serve static files directly
        try_files $uri $uri/ =404;
    }

    location = /index.html {
        # Fallback to index.html if the requested file is not found
        try_files $uri /index.html;
    }
}
The try_files directive in Nginx is used to instruct the server on how to attempt to serve a request. It checks for the existence of files or directories and responds accordingly. In the context of serving static files, it's commonly used to handle various scenarios: 

  1. Try to serve the requested file directly ($uri).
  2. If that doesn't exist, try to serve the requested directory ($uri/).
  3. If neither the file nor the directory is found, respond with a 404 error.

4. Optimize Sendfile and TCP_nopush:

Enabling sendfile allows Nginx to efficiently transfer files from disk to clients.
tcp_nopush ensures that small files are sent in a single packet.

server {
    listen 80;
    server_name static.example.com;
    root /path/to/static/files;

    index index.html;

    location / {
        # Serve static files directly
        try_files $uri $uri/ =404;
        sendfile on;
        tcp_nopush on;
    }

    location = /index.html {
        # Fallback to index.html if the requested file is not found
        try_files $uri /index.html;
        sendfile on;
        tcp_nopush on;
    }
}

5. Set expires header for caching:

Use the expires directive to set caching headers, improving performance by instructing browsers to cache static files.

server {
    listen 80;
    server_name static.example.com;
    root /path/to/static/files;

    index index.html;

    location / {
        # Serve static files directly
        try_files $uri $uri/ =404;
        sendfile on;
        tcp_nopush on;
        expires 7d;  # Set expiration to 7 days
    }

    location = /index.html {
        # Fallback to index.html if the requested file is not found
        try_files $uri /index.html;
        sendfile on;
        tcp_nopush on;
        expires 7d;
    }
}

6. Gzip Compression:

Enable gzip compression to reduce the size of transferred files.

server {
    listen 80;
    server_name static.example.com;
    root /path/to/static/files;

    index index.html;

    location / {
        # Serve static files directly
        try_files $uri $uri/ =404;
        sendfile on;
        tcp_nopush on;
        expires 7d;
        gzip on;
        gzip_min_length 1000;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    }

    location = /index.html {
        # Fallback to index.html if the requested file is not found
        try_files $uri /index.html;
        sendfile on;
        tcp_nopush on;
        expires 7d;
        gzip on;
        gzip_min_length 1000;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    }
}

7. Test and Reload Nginx:

Check the Nginx configuration for syntax errors:

sudo nginx -t

If the test is successful, reload Nginx to apply the changes:

sudo systemctl reload nginx

Notes:

  • Adjust the values in the configuration based on your specific requirements and server setup.
  • Ensure that the specified root directory (/path/to/static/files in this example) has the correct permissions for Nginx to read the files.
  • Always monitor the Nginx error logs (/var/log/nginx/error.log) for any issues or warnings.
Topics

Mastering Nginx

27 articles

Bash script

2 articles

Crontab

2 articles