Nginx serves from static if try reverse proxy is not found

Question

I have an application that is being developed using angularjs and all applications load when accessing the dist / folder.

What I'm trying to do is that when the page is not found on angularjs, to try the reverse proxy, I tried to configure below, but nginx does not allow to configure the same location twice in the same 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 is 404'ed on angularjs, I want him to try passing it to proxy_pass http://app_root; Can anyone advise how to achieve this setting?

Thanks,

UPDATE

So, try the approach proposed by "Mohammad AbuShady" and updated my nginx settings to the next one, but it still doesn’t work, instead it tries to find the page in the AngularJS application, and not go to the @proxy up_stream setting

 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; } } 

Answer 1

You have finished thinking about it, one place can handle it and then give it a backup

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

Notes:

• There is no need for the internal location of the second root, it is already defined in the server block
• I deleted $uri/ because there is no index on your server.

• I also deleted /index.html if you want to use it, then you can define it as an index in the server block and put $uri/ back

   server { index index.html; location / { try_files $uri $uri/ @proxy; } } 

• I have no idea where app_root is, but I assume this upstream is defined somewhere else.

Answer 2

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; } }