Обслуживание двух SPA-приложений на Nginx

Я пытаюсь обслуживать два угловых приложения через nginx в локальном

У меня есть следующая структура папок:

/html/page1

/html/page2

Внутри каждой папки содержатся файлы каждого приложения.

Внутри page1:

3rdpartylicenses.txt
favicon.ico
index.html
main.14de877820428b623cf2.js
polyfills.f4b78b65941f8063fd57.js
runtime.06daa30a2963fa413676.js
styles.22f686fc418e8e8e0c6e.css

Внутри page2:

3rdpartylicenses.txt
favicon.ico
index.html
main.275a9dc67ff328ee34fa.js
polyfills.4ea17e55c619d6f4aaad.js
runtime.b57bf819d5bdce77f1c7.js
styles.f7757684f1abbaee3fb9.css

А это мой nginx.confg

worker_processes  1;

error_log  logs/error.log;

events {
    worker_connections  1024;
}


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

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;


        location /page1{
            alias   html/page1;
            $uri $uri/ $uri/index.html /page1/index.html html/page1/index.html index.html
        }

        location /page2{
            alias   html/page2;
            $uri $uri/ $uri/index.html /page2/index.html html/page2/index.html index.html
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

когда я пытаюсь получить доступ к http://localhost/page2/ или http://localhost/page2/ Я получаю пустую страницу

В консоли вижу ошибки:

ПОЛУЧИТЬ http://localhost/styles.f7757684f1abbaee3fb9.css net::ERR_ABORTED 404 (не найдено) ПОЛУЧИТЬ http://localhost/runtime.b57bf819d5bdce77f1c7.js net::ERR_ABORTED 404 (не найдено) GET http://localhost/styles.f7757684f1abbaee3fb9.css net::ERR_ABORTED 404 (не найдено) GET http://localhost/runtime.b57bf819d5bdce77f1c7.js net::ERR_ABORTED 404 (не найдено)

Но если я запускаю URL-адрес http://localhost/page1/runtime.b57bf819d5bdce77f1c7.js, я получить файл без проблем.

Я пробовал множество способов для try_files. Думаю проблема в этой строчке.

папки /location работают хорошо, если я помещаю файлы статического индекса, они работают нормально.

Какие-либо предложения?


nginx angular nginx-config single-page-application serve
person María Cristina Fernández López    schedule 12.06.2019    source источник
comment
Консоль показывает, что URI запрашиваются без префикса /page1 или /page2, поэтому местоположения не совпадают. Либо исправьте файл index.html, чтобы загружать ресурсы из правильного URI, либо добавьте блок location /, который пытается найти файлы в любом каталоге.   -  person Richard Smith    schedule 12.06.2019
comment
@RichardSmith Я не могу изменить индекс, он автоматически генерируется угловой сборкой, я пытался поставить местоположение / блок следующим образом: location / { alias html; try_files $uri $uri/ $uri/index.html; } Но я получаю те же ошибки.   -  person María Cristina Fernández López    schedule 12.06.2019
comment
Это не масштабируемое решение, но оно должно работать: location / { root html; try_files /page1$uri /page2$uri =404; }   -  person Richard Smith    schedule 12.06.2019
comment
Да, получилось, большое спасибо! @RichardSmith Но теперь у меня новая проблема: когда я обновляю страницу с какой-то внутренней вкладки, у меня возникает ошибка 404, есть ли какое-нибудь решение для этого?   -  person María Cristina Fernández López    schedule 12.06.2019
comment
@РичардСмит GET /pedidos HTTP/1.1 404 555 "-"   -  person María Cristina Fernández López    schedule 12.06.2019
comment
Возвращаясь к моему первоначальному комментарию, я думаю, вам нужно исправить index.html. Может быть, использовать опцию --base-href с угловой сборкой?   -  person Richard Smith    schedule 12.06.2019
comment
yass, я сделал сборку с --base-href, и теперь она работает правильно, спасибо @RichardSmith   -  person María Cristina Fernández López    schedule 12.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

В файле nginx.conf потребуется следующая конфигурация:

location / { 
      root html; 
      try_files /page1$uri /page2$uri =404; 
}

location /page1{
      alias   html/page1;
      try_files $uri $uri/ $uri/index.html /page1/index.html;
}

location /page1{
      alias   html/page2;
      try_files $uri $uri/ $uri/index.html /page2/index.html;
 }

В дополнение к этим конфигурациям мы должны создать папки с именами page1 и page1 внутри html-каталога nginx.

А также при сборке приложения применить параметр --base-href с именем папки, в которой оно будет находиться следующим образом:

ng build --prod --base-href / page1

ng build --prod --base-href / page2

person María Cristina Fernández López    schedule 14.06.2019