How to configure NGINX to reroute a React Router app built on sub domains?

Question

I am currently building an app using react and the react router, the app works just fine when served by the nginx and docker, but once I reload or copy/paste the url, nginx gives a 404 error because the configuration cannot reach the locations specified by me and renders the error page, without that is a 500 instead. Also, my whole app is running under a subdomain which makes some of the answers I have seen and tried not work as I seem to miss something to properly tell nginx where to find my index.html inside the corresponding directories.

Right now my configuration files look like this:

nginx.conf

    user www-data;
    worker_processes 4;
    pid /run/nginx.pid;
    
    events {
            worker_connections 768;
            # multi_accept on;
    }
    
    http {
    
            ##
            # Basic Settings
            ##
    
            sendfile on;
            tcp_nopush on;
            tcp_nodelay on;
            keepalive_timeout 65;
            types_hash_max_size 2048;
    
            # server_names_hash_bucket_size 64;
            # server_name_in_redirect off;
    
            include /etc/nginx/mime.types;
            default_type application/octet-stream;
    
            ##
            # SSL Settings
            ##
    
            ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
            ssl_prefer_server_ciphers on;
    
            ##
            # Logging Settings
            ##
    
            access_log /var/log/nginx/access.log;
            error_log /var/log/nginx/error.log;
    
            ##
            # Gzip Settings
            ##
    
            gzip on;
            gzip_disable "msie6";

            ##
            # Virtual Host Configs
            ##

            include /etc/nginx/conf.d/*.conf;
            include /etc/nginx/sites-enabled/*;
    }

default inside sites-enabled

##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# http://wiki.nginx.org/Pitfalls
# http://wiki.nginx.org/QuickStart
# http://wiki.nginx.org/Configuration
#
# Generally, you will want to move this file somewhere, and start with a clean
# file but keep this around for reference. Or just disable in sites-enabled.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##

# Default server configuration
#
server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ index.html  =404;
        }

        location = /example1/example2/ {
                try_files $uri $uri/ index.html =404;
        }

}

Also I am using browserHistory with my react router

Answer 1

I was fighting with this for too long. For some reason I couldn't get the grasp on any of the accepted answers on the other similar questions. There is a lot to go through when googling this problem, and many of the solutions are suggesting pretty complicated redirecting and parsing of the uri. The solution I myself figured out is kinda obvious when I got it right.

I created a react app with create-react-app. Tested with dev server while developing, direct sublinks and everything works fine. I wanted to deploy it in a nginx container under subdomain /ui/.

Without the sub all works as expected, but adding that basebath somehow messed things up.

After running circles, this is the final solution. Key points:

1. set basename to your BrowserRouter
2. set homepage to package.json
3. serve the static files in such a way, that the subfolder uri points to the correct folder

App.js or whatever you might use as top component:

<BrowserRouter basename="/ui">
    <Switch>
        <Route path="/results" component={Results} />
        <Route path="/testing" component={Testing} />
    </Switch>
</BrowserRouter>

Then package.json:

...
"homepage": "/ui"
...

my whole nginx setup:

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    server {
      listen       80;  

      location /ui/ {
        root   /app;
        try_files $uri $uri/ /ui/index.html =404;
        }
    }
}

Dockerfile:

FROM node:alpine as build-step
WORKDIR /app
COPY project/package.json /app
RUN npm install
COPY project/ /app
RUN npm run build

FROM nginx
COPY --from=build-step /app/build /app/ui
COPY nginx/nginx.conf /etc/nginx/nginx.conf

.dockerignore

project/node_modules
project/build

my build script (./start-site.sh)

set -e
docker build -t mysite .
docker run --rm --name ui -p 80:80 mysite

Why this works?

When requesting for example js chunks, the request done by browser is:

http://localhost/ui/static/js/main.c1ffd94a.chunk.js

Nginx uses

/ui/static/js/main.c1ffd94a.chunk.js

as the uri, and tries to find matching file from your defined root, with or without appending slash. There is indeed a matching file to return, and it works.

Your react app routed pages are requested like:

http://localhost/ui/results/8997/

Matching files obviously are not found, so nginx returns

/ui/index.html

which is the entrypoint for your app and react-router parses the url. This also captures any 404's under /ui to be handled by your react app.

You might have this already figured out, but at least the next guy desperately googling about this will have something to read.