NGINX如何提供含相对路径静态资源引用的HTML文件服务

你现在的配置失效主要来自三个错误：

• Nginx的root指令使用相对路径无效：root配置的路径是相对于Nginx进程的工作目录（默认通常为/etc/nginx），而非当前请求的HTML文件所在目录，你写的../../无法指向预期的/server目录。
• HTML资源引用路径存在拼写偏差：你目录下的资源文件夹名为resources，但HTML中写的是.resources（多了开头的点），如果你的目录确实没有带点前缀，该路径本身就是错误的。
• 相对路径的解析逻辑理解偏差：相对路径是浏览器根据当前页面的URL拼接生成资源请求地址，而非Nginx根据HTML文件路径解析。你访问http://<服务地址>:8080/加载index.html时，../../resources/xxx会被浏览器拼接为http://<服务地址>:8080/resources/xxx，你需要保证Nginx能响应该路径的请求。

1. 是否可以实现NGINX按预期路径提供这些文件的服务？ #

完全可以，参考以下修正后的配置：

events { }
http {
  server {
      listen 8080;
      location / {
          root /server/results/data;
          index index.html;
      }

      # 匹配浏览器生成的资源请求路径
      location /resources/ {
          # 指向server目录，请求/resources/xxx时会找/server/resources/xxx
          root /server/;
      }

      # 如果你不想修改HTML里的.resources拼写，增加以下配置做别名映射即可
      # location /.resources/ {
      #     alias /server/resources/;
      # }
  }
}

额外注意Docker部署时，需要将宿主机的server目录正确挂载到容器内的/server路径，否则Nginx依然无法找到文件。

2. 如何保证服务返回的资源路径能匹配HTML中指定的相对路径？ #

相对路径的拼接由浏览器完成，规则为：以当前页面的访问URL为基准，拼接相对路径得到最终的资源请求URL。你只需要保证Nginx可以正确响应这个拼接后的URL即可，不需要对HTML或者相对路径做额外修改。
比如你当前页面访问地址为http://127.0.0.1:8080/，HTML中写的../../resources/css/styles.css会被浏览器拼接为http://127.0.0.1:8080/resources/css/styles.css，只要上述Nginx配置正确，就能返回对应的资源文件。

内容的提问来源于stack exchange，提问作者Jorge