Redirect react subroutes with Nginx

Question

I have a server setup with nginx using server blocks to have several virtual hosts, letsencrypt and nodejs running: I use react with multiple virtual sections (routes) ['/dahsboard', '/settings', etc]

The reverse proxy part works, but when the user refreshes the page in a section (like dev.myDomain.com/settings') all the content is gone showing an nginx 404 page

server {
    server_name dev.myDomain.com;

    location / {
            proxy_pass  http://127.0.0.1:7000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }


    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/dev.myDomain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/dev.myDomain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
    if ($host = dev.myDomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name dev.myDomain.com;
    listen 80;
    return 404; # managed by Certbot


}

I have tried with

location / {
    try_files /home/path/dist/index.html @proxy;
}


location @proxy { ... }

but does not work either.

Help please.

Just google, react app setup on ngnix. Here is a solution that might work https://stackoverflow.com/a/43954597/5567387 — Zohaib Ijaz, Oct 18 '19 at 14:02

score 0 · Answer 1 · answered Nov 14 '19 at 13:52

server {
server_name test.com;

gzip on;
gzip_types application/javascript image/* text/css;
gunzip on;

location / {
        proxy_pass  http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    proxy_intercept_errors on;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 421 422 423 424 425 426 428 429 431 451 /;


listen 443 http2 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/test.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/test.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    listen 80;
    server_name test.com;
    rewrite ^ https://$host$request_uri? permanent;
}

Redirect react subroutes with Nginx

1 Answers1