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 Angular routes I've declared without having to go through the home page (and avoid the 404 page), I'm forwarding these routes from nginx to each angular app's index.html, I've added a try_files to each location:

server {
    listen 80;
    server_name website.com;

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

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

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

This solution avoids the 404 error when going to an Angular route, but the problem is that when I browse to /project2/ or /project3/ it redirects to the /project1/. That's obviously not what is expected, since I want to have each location to forward to the /project-i/index.html of the adequate project.

You click on a link to project2 from inside project1. and that doesn't work, correct? — hayden
– hayden, Commented Jan 6, 2018 at 10:55
Exactly, but even if I browse directly to website/project2, it goes to project1. — Hakim
– Hakim, Commented Jan 6, 2018 at 11:00

Sandeep K Nair · Accepted Answer · 2019-03-19 09:12:05Z

19

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

answered Mar 19, 2019 at 9:12

Sandeep K Nair

2,94028 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arokia Lijas Over a year ago

can you share a link on this?

cnst · Accepted Answer · 2018-01-09 06:15:16Z

7

+50

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.

answered Jan 9, 2018 at 6:15

cnst

27.6k7 gold badges101 silver badges131 bronze badges

6 Comments

Hakim Over a year ago

You answer was the closest to how I've solved it. I've actually left the location for project1 as it was, while in the try_files in project2 and project3 I had to add in their try_files's index.html, the prefix project-i. So it became as the following for project2 and project3: try_files $uri /project[2-3]/index.html

cnst Over a year ago

@h4k1m, great that it works! Regarding "the closest", TBH, I don't see how your solution is any different from what I wrote above. :-p (The other answers are obviously totally wrong -- I never suggested (nor meant to imply) doing any changes for project1.)

Hakim Over a year ago

Could you please just mention that the modifications done on location /projectX/, should only be carried out on project2 and project3 (that's what I meant by closest, because when I read it I thought I had to change even the location of the first project).

Nobody Over a year ago

Curious to know the security issue involved with multiple files in the same domain. Can you kindly explain?

cnst Over a year ago

@Nobody it has to do with Cookies, JavaScript and XSS (Cross-Site Scripting) attacks. If you use a single domain, the browser treats all apps as the same app, so, vulnerability in one app, makes all the rest of them vulnerable just as much.

|

Odilbek Utamuratov · Accepted Answer · 2022-08-04 12:13:42Z

2

This code works for me:

server {
    listen port_number;
    server_name ip_addreess_or_domain;

    location project-1 { // without forward slash the last of the location name
       alias /var/www/project-1/;
       try_files $uri $uri/ /project-1/index.html;
    }

    location project-2 { // without forward slash the last of the location name
       alias /var/www/project-2/;
       try_files $uri $uri/ /project-2/index.html;
    } 
}

answered Aug 4, 2022 at 12:13

Odilbek Utamuratov

3512 silver badges9 bronze badges

Comments

Rasa Rin · Accepted Answer · 2018-05-14 12:11:35Z

1

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/

answered May 14, 2018 at 12:11

Rasa Rin

963 silver badges9 bronze badges

Comments

nyxz · Accepted Answer · 2018-06-15 15:09:21Z

1

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.

answered Jun 15, 2018 at 15:09

nyxz

7,4789 gold badges60 silver badges74 bronze badges

Comments

hayden · Accepted Answer · 2018-01-06 11:04:20Z

0

Try adding to project 2:

<base href="/project2">

answered Jan 6, 2018 at 11:04

hayden

2,78320 silver badges24 bronze badges

3 Comments

Hakim Over a year ago

I've changed href="/" to href="/project2" in project2/dist/index.html, but it doesn't seem to fix it.

hayden Over a year ago

Did anything change when you added that?

Hakim Over a year ago

The behaviour is exactly the same (redirect to /project1).

wedward · Accepted Answer · 2018-01-09 02:37:06Z

0

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.

answered Jan 9, 2018 at 2:37

wedward

3823 silver badges14 bronze badges

Collectives™ on Stack Overflow

Serve multiple Angular apps from the same server with Nginx

7 Answers 7

1 Comment

6 Comments

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

6 Comments

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related