Nginx静态资源访问设置

🎉🎉🎉🎉🎉🎉
欢迎访问的个人博客：https://swzbk.site/，加好友，拉你入福利群
🎉🎉🎉🎉🎉🎉

需求： 当静态资源打包采用相对路径，Nginx 访问时首次是 /web，后续访问变为 /web/test/ 这种多一级路径的情况，可通过 Nginx 的配置来确保静态资源能被正确访问，以下提供几种不同的配置方案。

方案一：使用 rewrite 结合 location 匹配

server {
    listen 80;
    server_name your_domain.com;

    # 处理 /web 开头的请求
    location ^~ /web {
        # 先尝试直接按原路径查找
        try_files $uri $uri/ @rewrite;
    }

    # 重写规则
    location @rewrite {
        # 若原路径找不到，尝试去掉 /test 查找
        rewrite ^/web/test/(.*)$ /web/$1 break;
        root /path/to/your/static/files;
        try_files $uri $uri/ /404.html;
    }
}

配置解释

• location ^~ /web：使用 ^~ 修饰符，表示如果匹配到以 /web 开头的请求，就停止后续的正则匹配。try_files $uri $uri/ @rewrite 会先尝试按原请求路径查找文件，如果找不到则跳转到 @rewrite 这个命名 location 块。
• location @rewrite：该块是命名 location 块，用于处理文件未找到的情况。rewrite ^/web/test/(.*)$ /web/$1 break 会将 /web/test/ 开头的路径重写为 /web/ 开头，去掉 /test 部分。root 指定静态资源的根目录，try_files 会再次尝试查找文件，若仍找不到则返回 404 页面。

方案二：使用 alias 处理不同路径

server {
    listen 80;
    server_name your_domain.com;

    # 处理 /web 路径
    location /web {
        alias /path/to/your/static/files/web;
    }

    # 处理 /web/test 路径
    location /web/test {
        alias /path/to/your/static/files/web;
    }
}

配置解释

• location /web：当请求 /web 开头的路径时，alias 会将请求映射到 /path/to/your/static/files/web 目录。
• location /web/test：当请求 /web/test 开头的路径时，同样将其映射到 /path/to/your/static/files/web 目录，从而忽略 /test 这一级多余的路径。

方案三：结合正则与 try_files

server {
    listen 80;
    server_name your_domain.com;

    location ~ ^/web(/test)?/ {
        rewrite ^/web(/test)?/(.*)$ /web/$2 break;
        root /path/to/your/static/files;
        try_files $uri $uri/ /404.html;
    }
}

配置解释

• location ~ ^/web(/test)?/：使用正则表达式匹配以 /web 开头，后面可能跟 /test 的路径。
• rewrite ^/web(/test)?/(.*)$ /web/$2 break：将匹配到的路径中 /test 部分去掉，只保留 /web/ 及后面的内容。
• root 和 try_files 用于指定静态资源根目录和处理文件查找及 404 情况。

配置验证与应用

完成配置后，需进行以下操作：

1. 检查配置文件语法：

sudo nginx -t

若输出显示 syntax is ok 和 test is successful，表明配置文件语法正确。
2. 重新加载 Nginx 配置：

sudo systemctl reload nginx

通过上述配置，可解决静态资源访问时 URL 多一级路径的问题，使 Nginx 能正确找到对应的静态资源。