Serve multiple Angular apps from the same server with Nginx

Question

I\'m serving multiple angular apps from the same server block in Nginx. So in order to let the user browse directly to certain custom

Answer 1

Hope this helps someone

Step 1 - Build all your projects

ng build --prod --base-href /project1/
ng build --prod --base-href /project2/
ng build --prod --base-href /project3/

Step 2 - Configure your nginx, note the change added in try_files section

server {
    listen 80;
    server_name website.com;

    # project1
    location / {
        alias /home/hakim/project1/dist/;
        try_files $uri/ /project1/index.html;
    }

    # project2
    location /project2/ {
        alias /home/hakim/project2/dist/;
        try_files $uri/ /project2/index.html;
    }

    # project3
    location /project3/ {
        alias /home/hakim/project3/dist/;
        try_files $uri/ /project3/index.html;
    }
}

Step 3 - Reload nginx configuration

sudo service nginx reload

Answer 2

Change the first location to:

# project1
location /project1/ {
    alias /home/hakim/project1/dist/;
    try_files $uri /index.html;
}

The current block matches all '/' and it's the first thing that matches the request.

Answer 3

Try building you apps using --base.href=/projectx/ for example:

ng build --base.href=/project1/
ng build --base.href=/project2/
ng build --base.href=/project3/

Answer 4

Try the solution for multilingual Angular application AOT builds that are basically different apps - OK its the same app multiple times, build with different languages in different bundles in different directories.

Answer 5

Try adding to project 2:

<base href="/project2">

Answer 6

It is generally a bad security practice to have multiple independent apps on a single domain.

However, I believe what you're facing here is the peculiarity of the way that try_files works -- according to http://nginx.org/r/try_files,

If none of the files were found, an internal redirect to the uri specified in the last parameter is made.

Effectively, this means that if there would have been an extra parameter after your /index.html specification (i.e., basically, anything at all), then your code would have worked as you expected; however, due to the lack of any such final parameter, what happens in each case is that everything gets redirected back to the / location, as if a GET /index.html HTTP/1.1 request was to have been made (except it's all done internally within nginx).

So, as a solution, you can either fix the path for the internal redirect to remain within the same location (e.g., /projectX/index.html), or leave the paths alone, but make the last parameter return an error code (e.g., =404, which should never be triggered as long as your file always exists).

• E.g, try_files $uri /projectX/index.html;,

• Or, try_files $uri /index.html =404;.

As in:

location /projectX/ {
    alias /home/projectX/dist/;
    try_files $uri /projectX/index.html; # last param is internal redirect
}

Or:

location /projectX/ {
    alias /home/projectX/dist/;
    try_files $uri /index.html =404;
}

In summary, note well that /projectX/index.html would only work as the last parameter, and /index.html would only work as a non-final one.