Nginx + Flask + React domain path matching

I am using nginx with gunicorn/flask plus a single page react app.

I am using react-router for navigation and in order to make this work I added the following line to my nginx configuration file:

location / {
    try_files $uri $uri/ /index.html;

    proxy_pass http://localhost:8006;
    ....

So, this fixes the issues I had if I call https://www.my-domain.com/url-path.

But now I have a new problem.

Because now, the original actual url-paths no longer work.

By that I mean I have a backend api that is available under the url-path https://www.my-domain.com/data_service.

This hook is made for the react app to communicate with the backend loading/sending json etc.

With the current configuration this no longer works. So my guess now is that I need to add an exception for this one url-path.

I tried the following and added:

location /data_service {
    try_files $uri/data_service /data_service;
}

to my nginx configuration. And the following:

location /data_service {
    alias /data_service;
}

But it does not work but causes either a 500 error or a 404.

Anybody knows how to add an exception for this particular url-path?

Okay, I was successful by guess and playing a little bit around:

You just need a second part for the configuration of the path you want to implemnt.

So in my case I had to copy the full sectio of:

location / {
    try_files $uri $uri/ /index.html;

    proxy_pass http://localhost:8006;
    include /etc/nginx/proxy_params;
    proxy_redirect off;
    # Max file size allowed for upload by user. Here 1M = 1 Megabyte
    client_max_body_size 1M;
    ... other configuration param for / 
}

and added it a second time to the same nginx configuration file:

location /data_service {
    proxy_pass http://localhost:8006;
    include /etc/nginx/proxy_params;
    proxy_redirect off;
    # Max file size allowed for upload by user. Here 1M = 1 Megabyte
    client_max_body_size 1M;
    ... other config params...
}

As you can see, the difference is that there is now a separate configuration the the url https://www.my-domain.com/data_service which will not check the try_files directive.

Note: these entries are all in the same nginx config file like this and lies in /etc/nginx/sites-enabled on Ubuntu. The full config file looks like this now:

server {
    listen 80;
    server_name mydomain.com www.mydomain.com;

    location /robots.txt {
        alias /path/to/flask-backend/static/robots.txt;
    }

    location /static {
        alias /path/to/flask-backend/static/static;
    }

    location /data_service {
        proxy_pass http://localhost:8006;
        include /etc/nginx/proxy_params;
        proxy_redirect off;
        # Max file size allowed for upload by user. Here 1M = 1 Megabyte
        client_max_body_size 1M;

        # prevents warning messages when setting up let's encrypt
        proxy_headers_hash_max_size 512;
        proxy_headers_hash_bucket_size 128;

        # Enable Websocket by adding these two options
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location / {
        try_files $uri $uri/ /index.html;

        proxy_pass http://localhost:8006;
        include /etc/nginx/proxy_params;
        proxy_redirect off;
        # Max file size allowed for upload by user. Here 1M = 1 Megabyte
        client_max_body_size 1M;

        # prevents warning messages when setting up let's encrypt
        proxy_headers_hash_max_size 512;
        proxy_headers_hash_bucket_size 128;

        # Enable Websocket by adding these two options
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}