How to proxy angular app with nginx on a rails box?

Question

I have one domain and two servers, one running rails one angular js.

The domain name points to the box running rails.

I want to use a path as a namespace to serve up my angular site via proxy_pass.

For example..

mydomain.com/#/admin or mydomain.com/admin <-- This should proxy_pass to the angular server

mydomain.com or mydomain.com/anything-except-admin <-- this should serve up rails content

I've tried may things to get this to work, but the problems I run into are:

Problem 1

Angular uses the '#' symbol at the root path. Rails will always interpret the '#' symbol as root also.

So any thing served from mydomain.com/#/ is interpreted by rails as mydomain.com/

This means that mydomain.com/#/admin is considered mydomain.com/

But angular needs the '#' symbol, so the angular app will not be found in this case.

Problem 2

As an attempt to resolve the first problem, there is a way in angular to avoid using the '#' symbol.

$locationProvider.html5Mode(true)

While this does in part solve the first problem, it introduces another. For instance:

mydomain.com/admin <-- this works to serve up the angular app

Once here, as I navigate the angular app as a user would in the browser, all is fine. But if I refresh the page, I get a 404 or an nginx error depending on how I've setup the proxy_pass

For example, if I navigated here by clicking around the angular app:

mydomain.com/admin/dashboard then I refresh the page, it is interpreted as a new GET request to that path, and I could not get the proxy_pass to pass the request to angular, so it always hit the rails app. Since there is no route for this path in rails I get a 404.

Problem 3

Finally, it's been proposed to use custom subdomains. Unfortunately I can't because this app requires wildcard subdomains as part of the multi-tenant authentication. This is business rule that can't be changed.

Any ideas?

It's all easy manageable by nginx locations but your question isn't enough clear for me to help you with building right configuration for your case. As I see, you need to handle /admin and /#/admin one way and anything else another way, plus you want to use custom subdomains for these two handlers, is it correct? — Dmitry Verhoturov
– Dmitry Verhoturov, Commented Feb 15, 2015 at 10:31
Hi @DmitryVerkhoturov, I need wildcard subdomains, and I want the path to have admin in it. It could be /admin./#/ or /#/admin -- whatever is easer. — Nathan
– Nathan, Commented Feb 15, 2015 at 10:36

Dmitry Verhoturov · Accepted Answer · 2015-02-15 10:55:32Z

1

You need something like that:

server {
    # implemented by default, change if you need different ip or port
    # listen *:80 | *:8000;

    # same as server_name  yoursite.com  www.yoursite.com  *.yoursite.com;
    server_name .yoursite.com;

    location / {
            try_files $uri $uri/ @ruby;
    }

    location ~ ^/(\#/)?(admin) {
            try_files $uri $uri/ @angular;
    }

# there must be configured @ruby and @angular locations
<...>
}

Here is documentation on server_name and locations, please give it a try and tell us if there will be any problems. For debugging locations and whole configuration your best friends are /var/log/nginx/access.log and /var/log/nginx/error.log.

answered Feb 15, 2015 at 10:55

Dmitry Verhoturov

6,0982 gold badges37 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

How to proxy angular app with nginx on a rails box?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related