Как настроить nginx для поиска подпапок для / js / css, связанных с index.html?
У меня есть рабочее приложение Vuejs, и у меня также возникают проблемы, когда я развертываю его в производственной среде. К сожалению, я не могу понять, как следует настроить конфигурацию?
Когда я открываю свое приложение из веб-браузера (в моем случае 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), мой веб-сервер - 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"
Это изображение отображает запросы, сделанные в соответствии с файлом журнала выше:
Вопрос: Как мне заставить Nginx понять правильный путь к моим папкам / js и / css ?
Я думаю, что корневая директория в вашем Location /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[12149 providedEdit:12150pting Как видно из вашего журнала access.log, ваша страница пытается загрузить ресурсы из /kommmandoran2.0/ , у которого на один м слишком много, эти статические ссылки внутри вашего 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">
Записи журнала nginx показывают, что браузер пытается загрузить app.cb44bddd.css , chunk-vendors.e084a3f2.css и т. Д. файлы в вашей файловой системе не имеют шестнадцатеричного раздела в URL.
Это, скорее всего, какой-то механизм блокировки кеша, используемый вашим приложением.
Вам необходимо либо изменить свое приложение, чтобы оно использовало правильные имена файлов в URL-адреса в HTML-коде или добавьте код в конфигурацию nginx, который соответствует всем app * .css - app.css .
Последнее решение хрупкое и может вызвать всевозможные нежелательные побочные эффекты.
На исходный вопрос уже есть ответ, это на всякий случай, если у кого-то еще есть проблема, похожая на мою. Вот что я сделал, чтобы заставить его работать:
- Я настроил свой 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;
}
}