Question

我一直在寻找一个地方，试图找到从不同子目录中提供静态内容的解决方案。这就是我的意思。所有静态内容都位于：

/usr/share/nginx/www/www.example.com/skin /

图像，JavaScript库和样式表尊重：

/usr/share/nginx/www/www.example.com/skin/css /

/usr/share/nginx/www/www.example.com/skin/img /

/usr/share/nginx/www/www.example.com/skin/js /

这些目录中的每一个css，img和js都有许多其他子目录。

问题： 如果查看我的服务器配置，您将看到所有请求都由index.phtml处理，其中包括autoloader.php，以根据请求的URI动态加载适当的内容。

我面临的问题是静态内容，相对路径没有为动态网址加载：

即。 JavaScript库的相对路径：skin/js/library/helloWorld.js

这有效： https://www.example.com/skin/js/library/helloWorld.js

这不起作用：

https://www.example.com/foo/skin/js/library/helloWorld.js

https://www.example.com/foo/bar/skin/js/library/helloWorld.js

因为URL是完全动态的，所以我需要能够在/ skin /{...}

之前为任何数量的子目录提供静态内容。

https://www.example.com/ {任意数量的动态子目录} /skin/js/library/helloWorld.js

我的问题： 是否可以修改$ uri以省略{any number of dynamic sub-directories}并重写从/ skin / {...}到https://www.example.com/skin/ {...}的所有内容？

location ^(.*)/skin/(.*)\.(jpeg|jpg|gif|png|ico|svg|css|js)$ {
    # Something like:
    # rewrite ^ https://www.example.com/skin/{requested static content} break;
    # or 
    # try_files /skin/{requested static content};
}

我的服务器配置：

server {
    listen 80;
    server_name example.com www.example.com;
    rewrite ^ https://www.example.com$uri permanent;
}

server {
    listen 443 default_server ssl;

    add_header Strict-Transport-Security max-age=31536000;
    add_header X-Frame-Options SAMEORIGIN;

    root /usr/share/nginx/www/www.example.com;
    index index.phtml;

    server_name example.com www.example.com;

    if ($host !~* ^www\.) {
        rewrite ^ https://www.example.com$uri permanent;
    }

    location ^~ /autoloader.php {
            deny all;
    }

    location / {
            try_files $uri $uri/ /index.phtml;
    }

    error_page 500 502 503 504 404 403 /error.phtml;
}

可能的解决方案

这些是我想避免的解决方案：

使用绝对路径链接静态内容。（域名不好改变）
为我的服务器中的/ skin /中的每个子目录添加location 配置。（不是动态的）
解析我内心的静态内容请求 index.phtml。（似乎凌乱......）

对不起，很长的帖子。我只是想澄清一下我的情况。谢谢你们！

Answer 1

将静态文件请求重写到正确的目录，例如：

location ^(.*)/skin/(.*)\.(jpeg|jpg|gif|png|ico|svg|css|js)$ {
    rewrite "^.*/skin/(.*)$" /skin/$1 break;
}

Answer 2

TIL：咖啡和短暂休息可以创造奇迹哈哈。

这是一个解决方案，适合所有可能遇到此帖子的人搜索相同的答案。

使用相对路径（即HTML页面中的图像）链接静态内容时：

<img src="skin/img/helloWorld.jpg" />

位于index.html内并从https://www.example.com引用，图像将正确加载，因为相对路径将附加到URL的末尾，如下所示：

https://www.example.com/skin/img/helloWorld.jpg

但是如果我们将索引移动到子目录，请说：

https://www.example.com/sub-directory/index.html

图片无法加载，因为请求将如下所示：

https://www.example.com/sub-directory/skin/img/helloWorld.jpg

由于我们的skin目录向下一级，因此请求将产生404。

<强>解决方案

要正确引用任何子目录中的静态内容，就像前面的示例一样：

https://www.example.com/sub-directory/category/post/id/index.html

使用/skin/img/helloWorld.jpg作为相对路径：

<img src="/skin/img/helloWorld.jpg" />

相对路径开头的/表示从您的网络目录的ROOT开始，然后尝试从那里找到正确的文件。在这种情况下，无论index.html位于何处，无论是10个目录深，图像的路径都将如下所示：

https://www.example.com/skin/img/helloWorld.jpg

请注意相对路径：skin/img/helloWorld.jpg和/skin/img/helloWorld.jpg 处理不同。

从动态URL提供静态内容

2 个答案: