Configuring NGINX location to include subpaths - nginx

I have an NGINX location block configured as below. This redirects to an angular Application and works fine. However, when I navigate to a subpath in the angular application such as /path/subdir, then NGINX returns 404.
Apparently this location block only sends requests to /path but not /path/other to Angular.
location /path {
try_files $uri $uri/ =404;
}
I've tried variations such as these with the same result
location /path/
location /path/.*
How do I get NGINX so send all traffic sent to anything under /path to the same Angular application, so that the Angular application can then handle routing to sub-directories such as/path/subdir?

Well I ended up with this little horror show, but it seems to work.
location ~ ^/path(?:/(.*))?$ {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /path/index.html =404;
}

Related

How to match multiple urls to same location using regex

I need to match
http://local.com/#app
http://local.com/app
to the same subdirectory.
Trying to put regex in the location. But it's not working at all.
Any idea?
server {
server_name local;
location ^~ /(.*)app {
alias /var/www/app;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
Anything after # is not processed by web server. So this would not work at the NGINX level. But what you can do is at the backend, where will be serving "/" files, like if you are using NodeJS or Python, you can easily redirect http://local.com/#app to http://local.com/app

Nginx not redirect all requests to index.html

I am trying to redirect all requests to index.html on Nginx but it's not redirecting.
Working -> https://www.example.com/reviews
Not Working -> https://www.example.com/reviews/
in 2nd URL if you see in last due to "/" Slash it's not working.
I am using the following settings in Nginx settings
location / {
try_files $uri /index.html;
}
Nginx considers directories (URLs with a trailing slash) separately from normal files. Try this instead:
location / {
try_files $uri $uri/ /index.html;
}

nginx: fallback to try_files when proxy_pass fails requires unusual config

I am using Nginx to server a single page app. Basically we just need to serve the index.html page whenever no matching file is found. The location looks like this and has been working just fine:
location / {
try_files $uri $uri/ /index.html
}
Now I would like to query an upstream server, and only if that fails, use the try_files directive as above
If the try_files is just moved to a fallback location like
location #fallback {
try_files $uri $uri/ /index.html;
}
location / {
proxy_pass http://127.0.0.1:8080;
proxy_intercept_errors on;
error_page 400 403 502 503 504 #fallback;
}
then - when the upstream server is unavailable - the client sees the Nginx 502 error page instead of the files served from the file system.
I finally found a solution that works by using a double slash in front of the /index.html fallback. This is the whole config file which can be used with the official nginx docker image for testing
events {
}
http {
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
server {
listen 80;
root /usr/share/nginx/html/;
location / {
proxy_pass http://127.0.0.1:9990;
proxy_intercept_errors on;
error_page 400 403 502 503 504 = #fallback;
}
location #fallback {
try_files $uri?$args /index.html //index.html;
}
}
}
which can be run with a command like
docker run -v /path/to/www/folder:/usr/share/nginx/html:ro -v /path/to/config/nginx.conf:/etc/nginx/nginx.conf -d -p 8080:80 nginx
In case no double slash is present before the last index.html fallback like
location #fallback {
try_files $uri?$args /index.html;
}
Then nginx constructs a path on the filesystem like <root>index.html, which has a missing delimiter instead of the correct <root>/index.html, whenever a url which is not the root url is requested.
Final question: why does this setup require a double slash within the try_files directive? Why can't one just use the try_files section from a regular config and move it to a fallback location used when intercepting errors?
I was presented with a similar situation, and I solved this going the other way around, using the suggestion from this page of common pitfalls. That is, first serve the static files, and then fallback to the proxy:
location / {
try_files $uri $uri/ #proxy;
}
location #proxy {
proxy_pass http://127.0.0.1:9990;
}
In this case, this would first look for the presence of the files as static files in the root, then proxy the request to http://127.0.0.1:9000. This is functionnally equivalent unless you want the files from the proxy to shadow the static files.

Nginx + js server

I have a very simple js server (w/ webpack) serving a simple client-side app. My configuration file looks like this:
server {
listen 80;
root /home/user/project/dist;
index index.html;
server_name project.example.com;
location / {
try_files $uri $uri/ =404;
}
}
I have tried many combinations of try_files. I don't want it to 404 when it can't find something other than index.html (which is what it currently does). It works OK for the root (pointing the browser to project.example.com, but anything else gives a 404.
To solve this, I've tried to set try_files in many combinations, such as:
try_files $uri index.html;
try_files $uri $uri/ index.html;
try_files $uri /absoulute/path/to/index.html;
They either 404 everything or give a 500, which, according to nginx logs, is an infinite redirect loopback.
I don't think what I'm doing is terribly complex, but everything I've tried so far hasn't done what I want, which is to allow react-router to take care of everything by having try_files just give everything to index.html.
Any help appreciated.
nginx URIs contain a leading /. If the URI http://project.example.com/index.html works, then the try_files statement should look like:
try_files $uri $uri/ /index.html;
See this document for details.

Using try_files with uwsgi

I am trying to use the nginx try_files directive with uwsgi_pass and having a ton of difficulty.
Basically what I want is for try_files to ask the uWSGI container if the request URI is valid and if not, then serve up the index.html file instead. My nginx config is as follows:
server {
listen 80;
access_log /tmp/nginx.log;
location / {
try_files $uri $uri/ /index.html;
include uwsgi_params;
uwsgi_pass 127.0.0.1:5001;
}
}
But what this does is check the docroot for every request and if its not there, it simply bails and returns the index.html file.
What I want instead is the following:
Request comes in for www.myapp.com
nginx forwards this request onto the uWSGI container
If that is invalid, then return the index.html
Is there a way to 'ask' uWSGI to try the files instead?
What I'm ultimately trying to accomplish here is HTML5 Pushstate with React Router. I'm running a Flask app with a React front-end. If the user refreshes the browser at www.myapp.com/preferences/userid, then I want nginx to forward that to the container and if its invalid, to return the index.
So, after talking with #Chamindu, I realized I was probably going about this the wrong way. I prevented uWSGI from serving my index.html (even though it could) and instead relied on nginx to serve that instead.
server {
listen 80;
access_log /tmp/nginx.log;
location / {
root /var/www/myapplication/;
try_files $uri $uri/ /index.html;
}
location /api {
include uwsgi_params;
uwsgi_pass 127.0.0.1:5001;
}
}

Resources