无法通过 Ubuntu VPN 访问外部网络

Question

Hauns TM

Asked: 2018-10-31 10:26:17 +0800 CST2018-10-31 10:26:17 +0800 CST 2018-10-31 10:26:17 +0800 CST

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

772

我有我的工作 Vuejs 应用程序，当我将它部署到它的生产环境时我也遇到了问题。不幸的是，我不知道应该如何设置配置？

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

生产环境： 我的操作系统是Ubuntu（在树莓派上），我的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 for css js files非常相似，但我不明白如何使解决方案适应我的问题。

编辑 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"

此图像描述了对应于上述日志文件的请求：

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

3 个回答

Voted

noelli · Answer 1 · 2018-11-01T01:50:31+08:00

我认为您的位置内的根目录/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 中可以看出，您的 Page 尝试从中加载资源/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">

Tero Kilkanen · Answer 2 · 2018-11-01T11:22:07+08:00

Tero Kilkanen

2018-11-01T11:22:07+08:002018-11-01T11:22:07+08:00

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

这很可能是您的应用程序采用的某种缓存清除机制。

您需要更改您的应用程序，使其在 HTML 代码的 URL 中使用正确的文件名，或者将代码添加到与app*.css所有app.css.

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

2

Hauns TM · Answer 3 · 2018-11-01T12:18:15+08:00

最初的问题已经有了答案，以防万一其他人遇到与我类似的问题。这是我为使其工作所做的工作：

我将我的 VueJS 项目设置为在 index.html 中使用相对路径（相对于 /js /css /svg 等）
我将我的 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

我在我的 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;
    }
}

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

新安装后 postgres 的默认超级用户用户名/密码是什么？

SFTP 使用什么端口？

命令行列出 Windows Active Directory 组中的用户？

什么是 Pem 文件，它与其他 OpenSSL 生成的密钥文件格式有何不同？

如何确定bash变量是否为空？

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

3 个回答

相关问题