Nginx practical problem solving - how to specify the address to access the specified page

Nginx practical problem solving - how to specify the address to access the specified page

Problem recurrence

/var/www/dist/biographicalNotes/There is an Html file below biographicalNotes.html, my actual nginxproxy is like this

server {
    listen 8080;
    server_name localhost;
    root /var/www/dist;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    # Allow access to static resources
    location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ {
        expires max;
        add_header Cache-Control "public, max-age=31536000";
    }
​
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /var/www/dist;
    }
}

This Nginx configuration is mainly used to listen on port 8080 and defines a basic static file server. Here's an explanation of each part:

0. listen 8080;: Specify Nginx to listen on port 8080.
1. server_name localhost;: Specifies the name of the server block, in this case localhost.
2. root /var/www/dist;: Specify the root directory of the website, here is /var/www/dist. All file paths are relative to this root directory.
3. index index.html;: Define the default index file to be index.html. If a directory is accessed without specifying a filename, by default an attempt will be made to load index.html.
4. location / { ... }: Handle requests for the root path /. try_files $uri $uri/ /index.html; means to try to find the files in the given order, and if not found, returns /index.html.
5. location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ { ... }: Handles requests for static resources, including images, CSS, JavaScript, and SVG files. By setting expires max; and add_header Cache-Control "public, max-age=31536000";, browser caching is enabled to improve page loading speed.
6. error_page 500 502 503 504 /50x.html;: Defines the path to the error page. When a 500, 502, 503 or 504 error occurs, /50x.html will be returned.
7. location = /50x.html { ... }: Process the request of /50x.html and return this error page.

But now I require localhost:8080/description to visit this page /var/www/dist/biographicalNotes/biographicalNotes.html, how should I solve it now?

problem solved

server {
    listen 8080;
    server_name localhost;
​
    root /var/www/dist;
    index index.html;
​
    location / {
        try_files $uri $uri/ /index.html;
    }
​
    location /description/ {
        alias /var/www/dist/biographicalNotes/;
        try_files $uri $uri/ /biographicalNotes.html;
​
        location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ {
            expires max;
            add_header Cache-Control "public, max-age=31536000";
        }
    }
​
    # Allow access to static resources
    location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ {
        expires max;
        add_header Cache-Control "public, max-age=31536000";
    }
​
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /var/www/dist;
    }
}

So we added a section. This configuration is mainly used to process requests whose access path starts with /description/. Let's explain this configuration block step by step:

location /description/ {
    alias /var/www/dist/biographicalNotes/;
    try_files $uri $uri/ /biographicalNotes.html;
​
    location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ {
        expires max;
        add_header Cache-Control "public, max-age=31536000";
    }
}

0. location /description/ { ... }:

   • This is an Nginx location block that specifies path matching rules, that is, processing requests starting with /description/.

1. alias /var/www/dist/biographicalNotes/;:

   • specifies the actual file system path using the alias directive, mapping the request to the /var/www/dist/biographicalNotes/ directory. This means that access /description/ will be mapped to /var/www/dist/biographicalNotes/.

2. try_files $uri $uri/ /biographicalNotes.html;:

   • try_filesThe directive attempts to find files in the given order, and if not found, returns the path of the last parameter.
   • $uriRepresents the URI of the current request.
   • $uri/ means an attempt is made to find the directory, for example, if the request is /description/something/, then an attempt is made to find the /var/www/dist/biographicalNotes/something/ directory.
   • /biographicalNotes.htmlis the last alternative path to which this file will be returned if previous attempts fail.

3. location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ { ... }:

   • Nested location block for handling specific types of static files, including images, CSS, JavaScript, and SVG files.
   • ~*Indicates case-insensitive matching of the following regular expression.
   • .(jpg|jpeg|png|gif|ico|css|js|svg)$Matches files ending with these extensions.
   • expires max;Set the browser cache expiration time to the maximum value.
   • add_header Cache-Control "public, max-age=31536000";Set the cache control header so that the browser can cache these static resources.

Overall, the purpose of this configuration is to handle requests for the /description/ path, map it to the specified file system directory, and enable browser caching of the static files therein.