Why Use Nginx for Static Resource Serving?¶

Nginx is a high-performance HTTP and reverse proxy server, making it ideal for serving static resources such as images, CSS, JS, PDFs, etc. Compared to traditional servers, it is lightweight, stable, capable of handling a large number of concurrent requests, and has a simple configuration. For resources that do not require backend dynamic processing, such as images and files, hosting them with Nginx can significantly improve access speed and save server resources.

I. Prerequisites: Installing Nginx¶

1. System Check and Installation¶

• Ubuntu/Debian Systems:

  sudo apt update  # Update the software sources
  sudo apt install nginx  # Install Nginx

• CentOS/RHEL Systems:

  sudo yum install nginx  # Install Nginx

2. Start and Verify Nginx¶

sudo systemctl start nginx  # Start Nginx
sudo systemctl enable nginx  # Enable auto-start on boot
sudo systemctl status nginx  # Check status (should show active)

To verify installation: Open a browser and visit http://localhost. If you see the default Nginx welcome page, the installation is successful.

II. Core Configuration: Hosting Static Resources with Nginx¶

1. Locate the Configuration Directory¶

Nginx configuration files are typically stored in the /etc/nginx/ directory. For easier management, create a new configuration file in the conf.d/ subdirectory (e.g., static.conf):

sudo vim /etc/nginx/conf.d/static.conf

2. Write the Configuration File¶

Add the following content to static.conf (taking image and file access as examples):

server {
    listen 80;  # Listen on port 80 (default HTTP port)
    server_name localhost;  # Use localhost for local testing, or replace with server IP

    # Match image requests (e.g., accessing http://localhost/images/xxx.jpg)
    location /images/ {
        root /var/www/static;  # Actual path to store images (will concatenate: /var/www/static/images/xxx.jpg)
        autoindex on;  # Enable directory browsing (shows file list when accessing a folder)
        autoindex_exact_size off;  # Display file size in KB/MB (not bytes)
        autoindex_localtime on;  # Show file modification time (local time)
    }

    # Match file download requests (e.g., accessing http://localhost/files/xxx.pdf)
    location /files/ {
        root /var/www/static;  # Actual path to store files (will concatenate: /var/www/static/files/xxx.pdf)
        autoindex on;  # Same as above, enable directory browsing
    }
}

3. Explain Key Configuration Items¶

• root: Specifies the root directory for resources. For example, location /images/ maps the request /images/xxx.jpg to root + /images/xxx.jpg (i.e., /var/www/static/images/xxx.jpg).
• autoindex on: When accessing a directory (e.g., /images/), Nginx lists all files in that directory, enabling users to download them directly.
• Other Parameters: autoindex_exact_size off and autoindex_localtime on are used to beautify the directory listing, showing file sizes in a user-friendly format (KB/MB) and local modification times.

III. Create Resource Directory and Test Access¶

1. Create Actual Resource Directory¶

Based on the root path in the configuration file, create the corresponding directories and test files:

sudo mkdir -p /var/www/static/images  # Image directory
sudo mkdir -p /var/www/static/files    # File directory

# Copy test image (replace with your image path)
sudo cp /path/to/your/image.jpg /var/www/static/images/1.jpg  

# Copy test file (replace with your file path)
sudo cp /path/to/your/file.pdf /var/www/static/files/test.pdf  

2. Load Configuration and Test¶

sudo nginx -t  # Check for configuration syntax errors (required before applying changes)
sudo systemctl reload nginx  # Reload Nginx to apply new configuration

Test Image Access: Open a browser and visit http://localhost/images/1.jpg. If the image displays, it’s successful.
Test Directory Listing: Visit http://localhost/images/ (the directory). You should see files like 1.jpg, and clicking on them triggers a download.
Test File Download: Visit http://localhost/files/test.pdf, and Nginx will automatically initiate the file download.

IV. Common Issues and Solutions¶

1. Configuration Not Taking Effect?¶

• Check Paths: Ensure the root path matches the actual file directory. The Nginx user (Ubuntu: www-data, CentOS: nginx) must have read permissions:

  sudo chown -R www-data:www-data /var/www/static  # Set ownership
  sudo chmod -R 755 /var/www/static  # Directory permissions (readable and executable)

• Reload Configuration: After modifying the config, always run nginx -t to check for errors, then use systemctl reload nginx to apply changes.

2. Directory Listing Not Displaying?¶

• Ensure autoindex on is added to the location block, and the directory contains files.

3. Access Denied (403 Forbidden)?¶

• Verify the Nginx user has read access to the files:

  sudo ls -la /var/www/static  # Check directory ownership and permissions

V. Summary¶

Setting up a static resource service with Nginx is straightforward. The core is configuring resource paths using location and root, and utilizing autoindex for directory browsing. It is ideal for quickly hosting static resources like images and documents, improving access speed and server stability.

For more advanced features (e.g., image compression, hotlink protection, user authentication), extend the configuration further. For beginners, mastering basic image and file access suffices for most scenarios.