How do I set up my react app routes with nginx?

I got some nginx code from Question which makes my proxy work, but I’m not sure what it’s actually doing, except that it passes the request to the proxy?

My code is:

upstream my_upstream {
 keepalive 64;

server {
    root /var/www/;
    index index.html index.htm index.nginx-debian.html;


    location / {
            root /var/www/;
            try_files $uri /index.html;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection “upgrade”;
            proxy_max_temp_file_size 0;
            proxy_pass http://my_upstream/;
            proxy_redirect off;
            proxy_read_timeout 240s;

listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

The trouble is, when I try to use internal app routes like from the url bar, the server returns 404.

I tried

try_files $uri $uri/ =404;

and I tried putting it at the beginning or the end of the location / block, and I looked at some things along the lines of

proxy_pass http://server:8080$request_uri;

I have read two books on nginx, a lot of documentation and lots of questions about react and nginx, and I still don’t understand what is going on and which part of the process I need to interrupt to tell it to interpret anything after the request header as a react internal route - or how it knows to use the coded routes at that point?

Could anyone explain?

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer