Nginx实际问题解决——如何指定地址访问指定页面

Nginx实际问题解决——如何指定地址访问指定页面

问题复现

/var/www/dist/biographicalNotes/下面有一个Html文件 biographicalNotes.html,我实际的nginx代理是这样的

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;
    }
}

这段 Nginx 配置主要用于监听端口 8080，并且定义了一个基本的静态文件服务器。下面是对每个部分的解释：

0. listen 8080;：指定 Nginx 监听在 8080 端口上。
1. server_name localhost;：指定该服务器块的名称，此处是 localhost。
2. root /var/www/dist;：指定网站的根目录，这里是 /var/www/dist。所有文件的路径都是相对于这个根目录的。
3. index index.html;：定义默认的索引文件是 index.html。如果访问一个目录时没有指定文件名，默认会尝试加载 index.html。
4. location / { ... }：处理根路径 / 的请求。try_files $uri $uri/ /index.html; 表示尝试按照给定顺序查找文件，如果找不到，则返回 /index.html。
5. location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ { ... }：处理静态资源的请求，包括图片、CSS、JavaScript 和 SVG 文件。通过设置 expires max; 和 add_header Cache-Control "public, max-age=31536000";，启用了浏览器缓存，提高页面加载速度。
6. error_page 500 502 503 504 /50x.html;：定义错误页面的路径，当出现 500、502、503 或 504 错误时，会返回 /50x.html。
7. location = /50x.html { ... }：处理 /50x.html 的请求，返回这个错误页面。

但是我现在我要求 localhost:8080/description要去访问这个页面 /var/www/dist/biographicalNotes/biographicalNotes.html,现在又该如何去解决呢？

问题解决

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;
    }
}

于是我们里面加了一段，这段配置主要是用于处理访问路径以 /description/ 开头的请求。让我们逐步解释这个配置块：

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/ { ... }:

   • 这是一个 Nginx location 块，指定了路径匹配规则，即处理以 /description/ 开头的请求。

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

   • 使用 alias 指令指定了实际文件系统路径，将请求映射到 /var/www/dist/biographicalNotes/ 目录。这意味着访问 /description/ 将被映射到 /var/www/dist/biographicalNotes/。

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

   • try_files 指令用于尝试查找文件，按照给定的顺序查找，如果找不到，则按照最后一个参数的路径返回。
   • $uri 表示当前请求的 URI。
   • $uri/ 表示尝试查找目录，例如，如果请求是 /description/something/，则尝试查找 /var/www/dist/biographicalNotes/something/ 目录。
   • /biographicalNotes.html 是最后一个备用路径，如果前面的尝试都失败，则返回此文件。

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

   • 嵌套的 location 块，用于处理特定类型的静态文件，包括图片、CSS、JavaScript 和 SVG 文件。
   • ~* 表示对后面的正则表达式进行不区分大小写的匹配。
   • .(jpg|jpeg|png|gif|ico|css|js|svg)$ 匹配以这些扩展名结尾的文件。
   • expires max; 设置浏览器缓存过期时间为最大值。
   • add_header Cache-Control "public, max-age=31536000"; 设置缓存控制头，使浏览器可以缓存这些静态资源。

总体而言，这段配置的目的是处理 /description/ 路径的请求，将其映射到指定的文件系统目录，并对其中的静态文件启用浏览器缓存。