Угловая маршрутизация nginx с регулярным выражением

В настоящее время я пытаюсь получить приложение на основе angular 8.x с маршрутизацией для работы на моем сервере разработки. Я настроил сервер, который предоставляет api для корневого маршрута, а также приложение angular, которое должно работать на другом маршруте. Следующее должно предоставить минимальный пример nginx-config:

server {
  listen 443 ssl;
  listen [::]:443;

  root /home/user/;
  server_name sub.tld.com;

  ssl_certificate /path...;
  ssl_certificate_key /path...;

  location / {
    proxy_pass http://localhost:10020/;
  }

  location ^~/dashboard {
    alias /home/user/my-dashboard;
    try_files $uri $uri/ /index.html;
    index index.html;
  }
}

Поскольку выражения местоположения, начинающиеся с регулярного выражения, имеют приоритет при выполнении, я ожидал, что они будут работать с обычным try_files $uri $uri/ /index.html; вызовом, который работает для приложения angular, расположенного в / местоположении.

Обычно маршрутизация работает, однако перезагрузка страницы приводит к появлению сообщения об ошибке, что файл /index.html не может быть найден.

Кто-нибудь имеет опыт работы с таким конвейером развертывания и дает какие-либо значимые предложения?


nginx angular nginx-location angular-routing
person hGen    schedule 19.06.2019    source источник
comment
Да подожди минутку   -  person George C.    schedule 19.06.2019
comment
дайте мне знать, если мой ответ вам поможет.   -  person George C.    schedule 19.06.2019
comment
Что ж, проблема в том, что мой api работает в местоположении /, а само приложение панели инструментов работает по маршруту ^ ~ панели инструментов, что, скорее всего, приводит к тому, что обычная команда try_files не работает.   -  person hGen    schedule 19.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

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

location / {
      root   /usr/share/nginx/html;
      index  index.html;
      expires -1;
      add_header Pragma "no-cache";
      add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";


      # Old deafult, I comment this because i have SPA app look: line 55
      # try_files $uri$args $uri$args/ $uri $uri/ =404; 

      # If the route dont exist return index.html 
      # This is the best option for (SPA Applications) like: React, Angular 5, Vue.js and Angular.js
      try_files $uri /index.html; 
    }

Вы можете взглянуть на мой nginx.conf файл, где у меня есть флеш-сервер для api, а NGINX обслуживает файлы angular dist.

Также вы можете проверить мой репозиторий, где я показываю рабочий пример того, как использовать (NGINX, Angular 5, Docker, Flask)

https://github.com/George35mk/Docker-NGINX-NG5-Flask-Elastic

nginx.conf

# ==============================================================================
# New Config
# ==============================================================================

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
  worker_connections  1024;
}


http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;

  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

  access_log  /var/log/nginx/access.log  main;

  sendfile    on;

  keepalive_timeout  65;

  gzip  on;

  # Configuration for the server
  server {

    listen 80;

    location /api {
      proxy_pass http://flask_api:5000;
    }

    location / {
      root   /usr/share/nginx/html;
      index  index.html;
      expires -1;
      add_header Pragma "no-cache";
      add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";


      # Old deafult, I comment this because i have SPA app look: line 55
      # try_files $uri$args $uri$args/ $uri $uri/ =404; 

      # If the route dont exist return index.html 
      # This is the best option for (SPA Applications) like: React, Angular 5, Vue.js and Angular.js
      try_files $uri /index.html; 
    }

  }

}
person George C.    schedule 19.06.2019