☰

如何配置 nginx 来查找与 index.html 相关的 /js /css 子文件夹？

tag-icon • tag-icon ubuntu nginx raspbian
如何配置 nginx 来查找与 index.html 相关的 /js /css 子文件夹？

我有一个可以运行的 Vuejs 应用程序，但在将其部署到生产环境时也遇到了问题。不幸的是，我不知道该如何设置配置？

当我从 Web 浏览器进入我的应用程序时（在我的例子中http://10.0.0.4/kommandoran2.0)，查找 index.html 没有问题。但index.html找不到子文件夹中的链接文件（如 javascript 文件 [示例http://10.0.0.4/kommandoran2.0/js/example.js] 或样式表 [示例]）。我的所有和文件http://10.0.0.4/kommandoran2.0/css/example.css都出现 404 错误。.js.css

生产环境： 我的操作系统是 Ubuntu（在 Raspberry Pi 上），我的 Web 服务器是 nginx。这是我在生产环境中的应用程序文件所在的位置：

在此处输入图片描述

编辑1（澄清应用程序文件所在的位置）：

/home/pi/kommandoran2.0/js/example.js
/home/pi/kommandoran2.0/css/example.css
/home/pi/kommandoran2.0/img/example.jpg 
/home/pi/kommandoran2.0/index.html

这是我的 nginx 配置文件中的服务器块：

server {
    listen 80 default_server;
    listen [::]:80 default_server;



    server_name mypi.example.org;
    root /var/www/html/;
    index index.php index.html index.htm;

    location /kommandoran2.0 {
        root  /home/pi;
        index index.html;

        try_files $uri $uri/ =404;


        #I believe that I need some more configuration in this block but I can't figure out what needs to be done?
    }

    location /iot {
            rewrite ^/iot(.*) $1 break;
            proxy_pass      "http://127.0.0.1:1880";
    }

    location ~ \.php$ {

        include /etc/nginx/fastcgi_params;

        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  /var/www/html/$fastcgi_script_name;
        fastcgi_param  REQUEST_URI      $request_uri;
        fastcgi_param  QUERY_STRING     $query_string;
        fastcgi_param  REQUEST_METHOD   $request_method;
        fastcgi_param  CONTENT_TYPE     $content_type;
        fastcgi_param  CONTENT_LENGTH   $content_length;
        fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
    }

    location ~ /\.ht {
        deny all;
    }
}

我相信我的问题与这个问题非常相似，Nginx 404 针对 css js 文件，但我不明白如何使该解决方案适应我的问题。

编辑2，浏览器中的日志和错误 这是来自 nginx 的输出/var/log/nginx/access.log（摘录，我正尝试在http://10.0.0.4/kommandoran2.0/此处浏览我的应用程序，请参阅下面的浏览器）。

10.0.0.4 - - [31/Oct/2018:12:31:37 +0100] "GET /kommandoran2.0/ HTTP/1.1" 304 0 "-" "Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36"
10.0.0.4 - - [31/Oct/2018:12:31:37 +0100] "GET /kommmandoran2.0/css/app.cb44bddd.css HTTP/1.1" 404 200 "http://10.0.0.4/kommandoran2.0/" "Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36"
10.0.0.4 - - [31/Oct/2018:12:31:38 +0100] "GET /kommmandoran2.0/css/chunk-vendors.e084a3f2.css HTTP/1.1" 404 200 "http://10.0.0.4/kommandoran2.0/" "Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36"
10.0.0.4 - - [31/Oct/2018:12:31:38 +0100] "GET /kommmandoran2.0/js/chunk-vendors.dcf6e5da.js HTTP/1.1" 404 200 "http://10.0.0.4/kommandoran2.0/" "Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36"
10.0.0.4 - - [31/Oct/2018:12:31:38 +0100] "GET /kommmandoran2.0/js/app.96c7cdcf.js HTTP/1.1" 404 200 "http://10.0.0.4/kommandoran2.0/" "Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36"

该图描述了与上述日志文件相对应的请求： 在此处输入图片描述

问题：/js我应该如何让 Nginx 了解我的和文件夹的正确路径/css？

答案1

我认为您所在位置内的根目录/kommandoran2.0就是这里的问题。

根据您的 URI 检查位置http://10.0.0.4/kommandoran2.0，然后搜索 index.html 以及指定根目录内的 css、js 等文件夹：/home/pi

但是使用你的文件结构，它应该在中进行搜索/home/pi/kommandoran2.0。

完整的位置块将如下所示：

location /kommandoran2.0 {          # Maybe just /kommandoran see below.
    root  /home/pi/kommandoran2.0;
    index index.html;

    try_files $uri $uri/ =404;
}

虽然我自己没有试过，但我不确定为什么你的 index.html 能工作。
一个原因可能是因为你的位置恰好与你的文件夹名称相匹配，$uri/定位到它/home/pi/kommandoran2.0并找到 index.html。

也许将您的位置块更改为/kommandoran不带的，这2.0将有助于澄清事情，并且在必要时也可以更容易地重写。

这对 Nginx 中的位置很有帮助：http://nginx.org/en/docs/beginners_guide.html

编辑：
从 access.log 中可以看到，您的页面尝试从 加载资源/kommmandoran2.0/，但其中有一个资源m过多，这些资源是否在您的 中是静态链接index.html？
如果是，请尝试将其修复为相对链接或正确的地址，例如：

<link rel="stylesheet" type="text/css" href="css/app.cb44bddd.css">

或者：

<link rel="stylesheet" type="text/css" href="/kommandoran2.0/css/app.cb44bddd.css">

答案2

您的 nginx 日志条目显示浏览器尝试加载等app.cb44bddd.css。chunk-vendors.e084a3f2.css文件系统上的实际文件在 URL 中没有十六进制部分。

这很可能是您的应用程序采用了某种缓存破坏机制。

您需要更改您的应用程序以便它在 HTML 代码中的 URL 中使用正确的文件名，或者将匹配所有内容的代码添加到 nginx 配置app*.css中app.css。

后者是一种脆弱的解决方案，可能会导致各种不良的副作用。

答案3

原始问题已经有答案了，以防其他人遇到与我类似的问题。以下是我为使其工作所做的工作：

  1. 我将 VueJS 项目设置为在 index.html 中使用相对路径（相对于 /js /css /svg 等）
  2. 我将我的 VueJS 项目部署到了​​我的 Raspberry Pi 上的这个文件夹中/home/pi/kommandoran2.0，例如：
/home/pi/kommandoran2.0/index.html
/home/pi/kommandoran2.0/maps.svg
/home/pi/kommandoran2.0/js/allJavascriptFiles.js
/home/pi/kommandoran2.0/css/allCSSFiles.css
  1. 我的 nginx.conf 中有这个（我猜是最重要的摘录）：
server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name mypi.example.org;
    root /home/pi;
    index index.php index.html index.htm;

    location / {
        index index.html;
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
    }

    location ~* \.(js|css|svg)$ {
        root  /home/pi/kommandoran2.0;
        expires 1y;
    }
}

相关内容