SoFunction
Updated on 2025-05-16

Implementation of nginx configuration access to static resources

For example, if the static resource image is located in the /mnt/software/nginx/html/static/images directory, the configuration in it is:

    # Static file directory      location /static/images/ {
        root    /mnt/software/nginx/html;
        try_files $uri $uri/ =404; #Tip 404 when not found      }

When the request address initiated by the current end has /static/images/, go to the subdirectory /static/images/ in the /mnt/software/nginx/html directory for searching. The absolute address of the image storage is: /mnt/software/nginx/html/static/images/file name. nginx will combine them, the address of the request path configured by the location part, and the root address configured by the root of the server.

If nginx is running using docker, the address configured in root must be the nginx static resource address in the docker container, not the address of the mounted host. The docker startup command is preferably equipped with the mount address. Like the following startup command:

docker run -p 80:80 -p 443:443 --name nginx \
-v /mnt/software/nginx/html:/usr/share/nginx/html \
-v /mnt/software/nginx/logs:/var/log/nginx \
-v /mnt/software/nginx/conf:/etc/nginx \
-v /opt/files/imFilePath:/opt/files/imFilePath \
-d nginx:1.10

In the above startup command, map ports 80 and 443 to the host. If port 443 is not mapped, it will cause https to be inaccessible.

Then mount the html in nginx to the specified directory of the host, which is used to store front-end projects such as vue's dist, and static resources. Logs are mounted to the host for easy viewing of nginx logs and configuration files. The last /opt/files/imFilePath is used to upload files and is also mounted to the host.

Can be found in the host directory /mydata/nginx/htmlCreated in the directorystaticFolders store static resources such asimages,css,js。 Since /mydata/nginx/html corresponds to the /usr/share/nginx/html directory of nginx in docker, the resources will be synchronized to the container. When configuring static resource access, you only need to add the following code:

# Static file directory      location /static/images/ {
        root    /usr/share/nginx/html;
        try_files $uri $uri/ =404; #Tip 404 when not found      }

Instead of the following configuration:

# Static file directory      location /static/images/ {
        root    /mydata/nginx/html;
        try_files $uri $uri/ =404; #Tip 404 when not found      }

LocationrootandaliasThe difference

  • root: When using the root directive, Nginx will splice its value with the requested URI. For example, when accessing /resource/image/, Nginx will splice the request path /resource/image/ and the path /mnt/files/imFilePath specified in root to form /mnt/files/imFilePath/resource/image/.

  • alias: Unlike root, alias will directly replace the matching path with the specified path. Mapping for static resource paths. For example, when accessing /resource/image/, Nginx replaces the request path /resource/image/ with /mnt/files/imFilePath/resource/image/.

Configuration of alias:

location /resource/image/ {
    alias /mnt/files/imFilePath/resource/image/;
    try_files $uri $uri/ =404;
}

This is the end of this article about the implementation of nginx configuration access to static resources. For more related nginx static resource access content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!