![如何配置 nginx 来查找与 index.html 相关的 /js /css 子文件夹?](https://linux22.com/image/729073/%E5%A6%82%E4%BD%95%E9%85%8D%E7%BD%AE%20nginx%20%E6%9D%A5%E6%9F%A5%E6%89%BE%E4%B8%8E%20index.html%20%E7%9B%B8%E5%85%B3%E7%9A%84%20%2Fjs%20%2Fcss%20%E5%AD%90%E6%96%87%E4%BB%B6%E5%A4%B9%EF%BC%9F.png)
我有一个可以运行的 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
原始问题已经有答案了,以防其他人遇到与我类似的问题。以下是我为使其工作所做的工作:
- 我将 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;
}
}