Nginx и Angular Routing (не удается найти файлы .js)

У нас возникла проблема с правильным отображением страниц для маршрутов Angular, обслуживаемых с помощью Nginx. В нашем проекте Angular наш базовый href - / dashboard. У проекта есть два разных маршрута, указывающих на / dashboard / data-analysis и / dashboard / data-visual.

Вот мой базовый файл nginx.conf:

server{
      listen 80;
      server_name localhost;

      location /dashboard/ {
          alias C:/Users/C123/Desktop/html/dashboard;
          index index.html;
          try_files $url $url/ /dashboard/index.html;
      }
}

Когда я перехожу на localhost / dashboard / или localhost / dashboard / data-analysis, любая из страниц загружает index.html из C: / Users / C123 / Desktop / html / dashboard /, но затем не может загрузить среду выполнения polyfill.js. js style.js и т. д., как определено в теге <script> файла index.html.

Более того, Nginx пытается загрузить эти файлы из C: /Users/C123/nginx/nginx-1.16.1/html/ вместо моего псевдонима (C: / Users / C123 / Desktop / html / dashboard).

Есть ли способ определить в блоке панели инструментов / местоположения, где он будет читать все из index.html моего псевдонима? Я не хочу определять корень снаружи или вторичный блок местоположения только для файлов .js.

ОБНОВЛЕНИЕ (это решение сработало для меня):

server{
      listen 80;
      server_name localhost;

      location /dashboard/ {
          root C:/Users/C123/Desktop/html/
          try_files $uri $uri/ /dashboard/index.html/
      }

nginx angular nginx-location
person chrisgopherrong    schedule 28.04.2020    source источник
comment
Посмотрите журнал доступа, но кажется, что приложение не использует базовый href, который вы определили. Блок location /dashboard/ может определять местоположение файлов только для URI, начинающихся с /dashboard/, если приложение не использует правильный базовый href для своих .js файлов, то проблема связана с приложением, а не с Nginx.   -  person Richard Smith    schedule 28.04.2020

Ответы (2)


arrow_upward
0
arrow_downward

Вам не хватает директивы root.

Также try_files должен попытаться загрузить указанный файл или index.html в каталог.

Не тестировалось, но должно работать:

server {
  listen 80;
  server_name localhost;

  location /dashboard/ {
      root C:/Users/C123/Desktop/html;
      try_files $uri $uri/index.html =404;
  }
}

Редактировать:

Если вы пытаетесь получить доступ к файлам в каталоге dashboard, не указав в запросе слово dashboard, вы можете добавить блок для отката.

server {
  listen 80;
  server_name localhost;

  # this will serve requests like http://localhost/runtime.js
  location / {
      root C:/Users/C123/Desktop/html/dashboard;
      try_files $uri $uri/index.html =404;
  }
  # this will serve requests like http://localhost/dashboard/
  location /dashboard/ {
      root C:/Users/C123/Desktop/html;
      try_files $uri $uri/index.html =404;
  }
}

Имейте в виду, что когда NGINX выбирает контекст местоположения, он берет самое длинное совпадение из упомянутых префиксов местоположений.

person JohnnyJS    schedule 28.04.2020
comment
Просто добавил эти точные изменения и, похоже, вызывает ту же ошибку. Он загружает правильный index.html, но затем пытается загрузить runtime.js, polyfill.js и т. Д., Связанные с этим файлом, из nginx / nginx-1.16.1 / html вместо папки html, определенной в моем корне. - person chrisgopherrong; 28.04.2020
comment
Итак, runtime.js не проживает в: C:/Users/C123/Desktop/html/dashboard? - person JohnnyJS; 28.04.2020
comment
C: / Users / C123 / Desktop / html / dashboard содержит этот файл (runtime.js) и другие файлы, которые index.html пытается вызвать (polyfill.js и т. Д.). - person chrisgopherrong; 28.04.2020
comment
@chrisgopherrong Я отредактировал ответ, чтобы он соответствовал этому требованию. - person JohnnyJS; 30.04.2020
comment
извините за супер-отложенный ответ - мы нашли решение, и с тех пор я не входил в систему. Ваш ответ работает, поэтому я пометил его как принятый, но в нашем случае мы фактически не могли использовать местоположение /, поскольку это был общий файл конфигурации среди других приложений (мы не хотели, чтобы другие приложения использовали наш) . Обновил мой вопрос найденным решением - person chrisgopherrong; 19.08.2020

arrow_upward
0
arrow_downward

Вероятно, вы могли бы установить baseHref и deployUrl в angular.json. Вы можете установить его в проектах - ›$ projectName -› архитектор - ›build -› options.

"deployUrl": "/dashboard/",
"baseHref": "/dashboard/",

См. ответ для больше контекста о том, для чего предназначены эти параметры.

person alegria    schedule 28.05.2021