Serve two SPA applications on Nginx

Question

I try to serve two angular applications through nginx in local

I have the following folder structure:

/html/page1

/html/page2

Inside each folder are contained the files of each application.

Inside page1:

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

Inside page2:

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

And this is my 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;
        }

    }

}

when I try to access to http://localhost/page2/ or http://localhost/page2/ I get a blank page

In the console I see the errors:

GET http://localhost/styles.f7757684f1abbaee3fb9.css net::ERR_ABORTED 404 (Not Found) GET http://localhost/runtime.b57bf819d5bdce77f1c7.js net::ERR_ABORTED 404 (Not Found) GET http://localhost/styles.f7757684f1abbaee3fb9.css net::ERR_ABORTED 404 (Not Found) GET http://localhost/runtime.b57bf819d5bdce77f1c7.js net::ERR_ABORTED 404 (Not Found)

But if I run the URL http://localhost/page1/runtime.b57bf819d5bdce77f1c7.js I get the file without any problem.

I have tried numerous ways for the try_files. I think the problem lies in that line.

the /location folders works well, if I put static index files they work normally.

Any suggestions?

Answer 1

The following configuration would be needed in the nginx.conf file:

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;
 }

In addition to these configurations we must create folders with the name page1 and page1 inside the html directory of nginx.

And also when doing the application build, apply the --base-href parameter with the name of the folder where it will be contained in the following way:

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

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