How to set multiple statically accessed folders

nginx sets multiple static access folders

Here are several common methods and detailed configuration examples:

1. Use multiple location blocks and root directives

This is the most direct and commonly used method. EachlocationBlock matches a specific URL prefix and usesrootThe directive specifies the root directory of the corresponding static folder.

server {
    listen 80;
    server_name your_domain.com;

    root /var/www/html; # Default root directory (optional)
    location /images/ {
        root /path/to/your/images/folder/;
    }

    location /css/ {
        root /path/to/your/css/folder/;
    }

    location /js/ {
        root /path/to/your/javascript/folder/;
    }

    # More location blocks can be added to map other static folders}

explain:

location /images/ { ... }: Match with/images/The URL at the beginning.
root /path/to/your/images/folder/;: Tell Nginx/path/to/your/images/folder/Find the requested file in the directory. For example, if the requested/images/, Nginx will look up/path/to/your/images/folder/。
Note the ending slash: rootThe path specified by the directive should end with a slash.

2. Use multiple location blocks and alias directives

aliasInstructions androotSimilar, but it works slightly differently.aliasWill be replacedlocationThe matching part of the path.

server {
    listen 80;
    server_name your_domain.com;

    location /static-images/ {
        alias /path/to/your/images/folder/;
    }

    location /static-css/ {
        alias /path/to/your/css/folder/;
    }

    location /static-js/ {
        alias /path/to/your/javascript/folder/;
    }

    # More location blocks can be added to map other static folders}

explain:

location /static-images/ { ... }: Match with/static-images/The URL at the beginning.
alias /path/to/your/images/folder/;: When requested/static-images/When Nginx will search directly/path/to/your/images/folder/. Notice,aliasThe path specified by the directive should also end with a slash.

root vs alias Choices:

root: WilllocationThe matching path is attached torootAfter the specified path.
alias: Will be replacedlocationThe matching part of the path.

Which one you choose depends on your URL structure and how your file is organized. Generally speaking, if your URL structure directly reflects the file system structure, thenrootMore intuitive. If more flexible mapping is needed, orlocationThe path does not correspond directly to the actual file path, thenaliasMore suitable.

3. Use a location block and try_files directive (less commonly found in pure static files)

This approach is less commonly used for purely static files, as it is often used to try different file paths, including dynamic scripts. But it can also be used in static files in theory.

server {
    listen 80;
    server_name your_domain.com;

    location /static/ {
        try_files $uri $uri/ /path/to/your/images/folder/$uri /path/to/your/css/folder/$uri /path/to/your/javascript/folder/$uri =404;
    }
}

explain:

location /static/ { ... }: Match with/static/The URL at the beginning.
try_files $uri $uri/ ... =404;: Nginx will try the following path:
- $uri: The requested full URI (e.g./static/images/)
- $uri/: The requested URI plus a slash (try as a directory)
- /path/to/your/images/folder/$uri: Find in the images folder
- /path/to/your/css/folder/$uri: Find in the css folder
- /path/to/your/javascript/folder/$uri: Search in the javascript folder
- =404: If none of the above is found, a 404 error will be returned.

This approach is not very recommended for multiple independent static folders, as it can cause confusion and performance issues. Usually used in cases where you try static files and then fall back to dynamic scripts.

Best Practices and Notes:

Clearlocation piece:Use clearlocationBlocks can improve the readability and maintainability of configurations.
Ending slash:make surerootandaliasThe path specified by the directive ends with a slash to avoid ambiguity.
index instruction:If you want to display the default file when the user accesses the directory (e.g.), can be usedindexinstruction.

location /images/ {
    root /path/to/your/images/folder/;
    index ;
}

Security:Make sure that the permissions for the static folder are set correctly and only allow Nginx users to read.
cache:Browser cache and Nginx cache can be configured to improve the loading speed of static resources.
compression:Enabling gzip or Brotli compression reduces the size of static resources and speeds up transfers.

Complete example (usingroot):

server {
    listen 80;
    server_name your_domain.com;

    root /var/www/html; # The default root directory can hold some public static files
    location /images/ {
        root /srv/static/images/;
        index ;
    }

    location /styles/ {
        root /srv/static/css/;
    }

    location /scripts/ {
        root /srv/static/js/;
    }

    location /fonts/ {
        root /srv/static/fonts/;
    }

    # Process the request in the root directory and try to find it    location / {
        try_files $uri $uri/ /;
    }
}

Verify configuration:

After modifying the Nginx configuration file, you need to verify that the configuration is correct:

sudo nginx -t

If there are no errors, you can reload the Nginx service:

sudo systemctl reload nginx  # or sudo service nginx reload

Summarize

Use multiplelocationBlocks androotoraliasDirectives are the best practice for Nginx to set up multiple static access folders.

chooserootstillaliasDepend on your specific needs and URL structure. Remember to verify the configuration and reload the Nginx service for the changes to take effect.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.