NGINX - 如何提供包含 css、pngs 和 js 作为相对路径的静态 html
Posted
技术标签:
【中文标题】NGINX - 如何提供包含 css、pngs 和 js 作为相对路径的静态 html【英文标题】：NGINX - How to serve static html that contains css, pngs and js as relative paths 【发布时间】：2021-11-27 17:20:09 【问题描述】：我还没有找到任何可以完全解决我的问题的问题，但我想之前一定有人遇到过。
由于外部原因，我有这样的文件夹结构：
server/
| ---- /results/data/index.html
|
| ---- /resources/css/styles.css
| /bootstrap.min.css
| /js/bootstrap.bundle.min.js
| /pngs/[list of png files]
我有一个这样的简化 html：
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link type = "text/css" href="../../.resources/css/bootstrap.min.css" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href="../../.resources/styles.css">
</head>
<body>
<script src="../../.resources/js/bootstrap.bundle.min.js"></script>
<!-- some content-->
</body>
</html>
所以，正如您所见，html 通过相对路径引用资源（到目前为止，它一直在没有网络服务器的情况下使用，并且只能通过在浏览器中打开 html 来工作）。
现在我们必须在 docker 中使用 nginx 为它提供服务，为此我尝试过：
events
http
server
listen 8080;
location /
root /server/results/data;
index index.html
location ~* \.(js|jpg|png|css)$
root ../../;
但它不起作用，找不到资源（提供的 html 没有样式，控制台说找不到资源）。
我的第一个问题是：
是否甚至可以让 nginx 在预期的位置提供这些文件？还有一些我不明白的地方：
即使 nginx 找到了资源，如何确保以 html 中指定的相对路径指向它们的方式为它们提供服务？【问题讨论】：
【参考方案1】：我刚刚发现了问题。正如我在这里发布的：
https://***.com/a/69493106/3751594
我的问题是我用作资源隐藏文件夹的路径的一个文件夹中的一个点：
<link type = "text/css" href="../../.res/css/bootstrap.min.css" rel="stylesheet">
这导致样式没有在浏览器中呈现，尽管它们从 nginx 加载并且没有错误。只有 Firefox（不是 Chrome）抱怨 MIME 类型的 css 不是 css 而是文本。
【讨论】：
以上是关于NGINX - 如何提供包含 css、pngs 和 js 作为相对路径的静态 html的主要内容，如果未能解决你的问题，请参考以下文章
如何让 nginx 从不同的端口提供 django admin css 文件