NGINX Run multiple application on same port with different route path

Question

I have two applications, app1 is developed in reactJS and app2 in angularJS sharing same login session,

 - Application 1
http://application-1:1234/
 - APplication 2
http://application-2:2345/

My needs is to have a seemless navigation between both apps, as they share the same login credentials.

I have created NGINX reverse proxy configuration,

server {
    listen 8080;
    server_name http://global-ip:8080;
    location / {
        proxy_pass http://application-1:1234;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }
    location /application-2 {
        proxy_pass http://application-2:2345;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }

}

As the above configuration is working for only, First default root path. The other /application-2 is not able to redirect to specified path.

Any help will be appreciated.

Thanks Praveen T

Try add one more slash (/) to the application2 block like this location /application-2/ {...} — Ted
– Ted, Commented Jul 6, 2020 at 15:25
Hi Ted, Thanks for the reply I tried the suggestion but there it gives 404 error — praveen2609
– praveen2609, Commented Jul 6, 2020 at 15:29
As per the above configuration of nginx default file working for only, First default root path (I.e. location /). The other /application-2 is not able to redirect to specified link of application-2. — praveen2609
– praveen2609, Commented Jul 6, 2020 at 19:09
Seem like you need to add one more slash in here, change proxy_pass http://application-2:2345; to proxy_pass http://application-2:2345/; Respone if it works bro. — Ted
– Ted, Commented Jul 7, 2020 at 2:35

Ivan Shatsky · Accepted Answer · 2020-07-07 11:52:57Z

4

As a quick hack, try either

location /application-2/ {
    proxy_pass http://application-2:2345/;
    ...
}

or

location /application-2/ {
    rewrite ^/application-2(.*) $1 break;
    proxy_pass http://application-2:2345;
    ...
}

but you'd better build you angular app according to your URI prefix, see instructions here. Then your original config should work as expected.

answered Jul 7, 2020 at 11:52

Ivan Shatsky

16.2k3 gold badges28 silver badges54 bronze badges

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

7 Comments

praveen2609 Over a year ago

Hey Ivan, Thanks a lot man, the above method didn't worked but the link which you have provided to change the URI prefix in the angular app have worked.

praveen2609 Over a year ago

<base href="/" id="baseHref"> <script> (function() { document.getElementById('baseHref').href = '/' + window.location.pathname.split('/')[1] + "/"; })(); </script>

praveen2609 Over a year ago

No Ivan, that workaround didn't got succeeded, I tried before as well :)

Ivan Shatsky Over a year ago

@praveen2609 Well, anyway setting correct base href is the best approach for this case.

praveen2609 Over a year ago

Yes, your right Ivan setting correct base href is the best approach. It was a great help as i was struggling to find the solution but the way you gave the direction have helped me. Thanks again for your valuable input and stay safe and stay at home.

|

Collectives™ on Stack Overflow

NGINX Run multiple application on same port with different route path

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related