nginx serve from static if not found try reverse proxy

Question

I have an application which is developed using angularjs and the entire application loads when the dist/ folder is accessed.

What am trying todo is, that when page is not found on angularjs, to try on a reverse proxy, I tried to do the below setup but nginx does not allow setting up the same location twice in single block

server {
    listen 80;
    server_name example.com;
    keepalive_timeout 60;
    client_max_body_size 10M;
    root /var/lib/www/dist;
    charset utf-8;

    location / {
        expires -1;
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
        root /var/lib/www/dist;
        try_files $uri $uri/ /index.html =404;
    }

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_buffering off;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        if (!-f $request_filename) {
            proxy_pass http://app_root;
            break;
        }
    }

    error_page 500 502 503 504 /500.html;
    location = /500.html {
        root /var/lib/app/etc/templates;
    }

}

so basically, if the URL 404'ed on angularjs I want it to try and pass it to proxy_pass http://app_root; any one can advise on how to achieve this setup?

Thanks,

UPDATE

So am trying approach proposed by "Mohammad AbuShady", and updated my nginx settings to following, but still not working, instead it tries to find the page in the AngularJS app and not move to the @proxy up_stream setup

upstream app_root {
    server unix:/tmp/app_root.sock fail_timeout=0;
}

server {
    listen 80;
    server_name example.com;
    keepalive_timeout 60;
    client_max_body_size 10M;
    root /var/lib/www/dist;
    charset utf-8;

    location / {
        expires -1;
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
        root /var/lib/www/dist;
        try_files $uri$args $uri$args/ $uri/ /index.html @proxy;
    }

    location @proxy {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_buffering off;
        if (!-f $request_filename) {
            proxy_pass http://app_root;
            break;
        }
    }

    error_page 500 502 503 504 /500.html;
    location = /500.html {
        root /var/lib/app/etc/templates;
    }

}

So what would be the actual url of when you render 404 page? — Rahil Wazir
– Rahil Wazir, Commented Feb 17, 2015 at 23:17

Mohammad AbuShady · Accepted Answer · 2015-02-18 07:41:09Z

23

You're over thinking it, a single location can handle it and then give it a fallback

location / {
  # omitted extra settings
  # check notes below
  try_files $uri @proxy;
}

location @proxy {
  # omitted proxy settings
  proxy_pass http://app_root;
}

Notes:

No need for a second root inside location, it's already defined in server block
I've removed $uri/ because you don't have index in your server.
I also removed /index.html, if you do want to use it then you might want to define it as index in the server block and put the $uri/ back
```
server {
  index index.html;
  location / {
    try_files $uri $uri/ @proxy;
  }
}
```
I have no idea where app_root is, but I'm assuming it's an upstream defined somewhere else.

answered Feb 18, 2015 at 7:41

Mohammad AbuShady

43.4k11 gold badges81 silver badges89 bronze badges

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

6 Comments

Mo J. Mughrabi Over a year ago

Hello mohamed, I tried to approach you proposed above, it didn't quite work out, I updated my question and added more details from the nginx conf.. can you please advise?

Mohammad AbuShady Over a year ago

explain this line try_files $uri$args $uri$args/ $uri/ /index.html @proxy;

Mo J. Mughrabi Over a year ago

its inspired from this post gist.github.com/cjus/b46a243ba610661a7efb because angularjs passes $uri and $args to index.html in order to render, I tried couple approaches from different manuals and this only one that worked, others worked too. but had problems when refreshing the page

Mo J. Mughrabi Over a year ago

I tried this approach too andredublin.github.io/blog/2014/08/18/… it works when you open the root / url and then when click on links i navigates correctly.. but when you click refresh it gives 404, thats they i had to change

Mohammad AbuShady Over a year ago

I personally didn't try angular before, so I don't know what should come before what

|

Vishnu · Accepted Answer · 2016-10-31 05:30:58Z

-3

Try this Mo:

server {
listen 80;
server_name example.com;
keepalive_timeout 60;
client_max_body_size 10M;
root /var/lib/www/dist;
charset utf-8;

location / {
    expires -1;
    add_header Pragma "no-cache";
    add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
    root /var/lib/www/dist;
    try_files $uri $uri/ /index.html =404;
    error_page 404 = @404;
}

location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_buffering off;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    if (!-f $request_filename) {
        proxy_pass http://app_root;
        break;
    }
}

location @404 {
    proxy_pass http://app_root;
}

error_page 500 502 503 504 /500.html;
location = /500.html {
    root /var/lib/app/etc/templates;
}

}

edited Oct 31, 2016 at 5:30

Vishnu

12.4k7 gold badges57 silver badges91 bronze badges

answered Feb 17, 2015 at 23:48

adilnaimi

2092 silver badges4 bronze badges

1 Comment

Vikas Kandari Over a year ago

Nginx will throw error if you use same route multiple times

Collectives™ on Stack Overflow

nginx serve from static if not found try reverse proxy

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related