从动态URL提供静态内容

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是完全动态的，我需要能够前/护肤/ {...}

https://www.example.com/ {任何服务与任何数量的子目录的静态内容动态子目录}数/skin/js/library/helloWorld.js

我的问题： 是否有可能MO使用$ 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

重写静态文件请求权directoty，例如：

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" /> 

/在乞讨相对路径的确定表示从您的Web目录的ROOT开始，然后尝试从那里找到正确的文件。在这种情况下，无论在哪里的index.html所在，无论是10点的目录深的路径，图像将始终是这样的：

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

所以请记住相对路径：skin/img/helloWorld.jpg和/skin/img/helloWorld.jpg是不同处理。