Переход к относительному пути в приложении Angular, обслуживаемом через NGINX

Question

Я подаю свое приложение Angular через NGINX. Внешний интерфейс должен быть доступен на http://localhost/, а его внутренний на http://localhost/api/. Мой конфиг в основном работает, но у меня есть проблема с относительным путем от href в пользовательском интерфейсе.

<a href="/api/someRoute">Click me</a>

Конфигурация NGINX:

server {
    listen 80;
    server_name localhost;

    location / {
        root html;
        try_files $uri$args /index.html;
    }

    location /api {
        proxy_pass http://localhost:9977/api;
    }
}

У меня есть проблема когда я щелкаю элемент, я перенаправлен на базовый адрес, поэтому я предполагаю, что NGINX возвращается к индексу обслуживания. html, но когда я открываю ссылку в новой вкладке, я получаю правильную страницу, которая является просто строкой возвращено API.

У меня изначально было try_files $uri$args $uri$args/ /index.html;, но я удалил бит $uri$args/, потому что при сборке приложения у меня появляются дополнительные папки, и обновление не работает для некоторых путей (например, у меня был папка пользователя и обновление при http://localhost/users не будет работать).

Answer 1

Попробуйте это:

server {
    listen 80;
    server_name localhost;

    location /api/ {
        proxy_pass http://localhost:9977;
    }

    location / { # Always at the end (NGinx apply priority, this rule is like wildcard)
        root html;
        try_files $uri$args /index.html;
    }
}