Назад | Перейти на главную страницу

Как настроить 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 папка?

Записи журнала nginx показывают, что браузер пытается загрузить app.cb44bddd.css, chunk-vendors.e084a3f2.css и т.д. Фактические файлы в вашей файловой системе не имеют шестнадцатеричного раздела в URL.

Скорее всего, это какой-то механизм очистки кеша, используемый вашим приложением.

Вам нужно либо изменить свое приложение, чтобы оно использовало правильные имена файлов в URL-адресах в HTML-коде, либо добавить в конфигурацию nginx код, который соответствует всем app*.css к app.css.

Последний - хрупкое решение и может вызвать всевозможные нежелательные побочные эффекты.

Я думаю, что корневой каталог внутри вашего местоположения /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">

На исходный вопрос уже есть ответ, это на всякий случай, если у кого-то еще есть проблема, похожая на мою. Вот что я сделал, чтобы он заработал:

Я настроил свой 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;
    }
}