Nginx 服务器在我的 React Router 应用程序中返回 404

Question

Ok so I have set up a nginx server at Digital Ocean. I have React app using react-router in the machine.

The problem is that any url except '/' returns 404 error .

I am aware of the millions similar threads to this, but none of the answers found online solved my case. You will notice there are comments in my code with some of those solutions.

Below you can find my nginx files (note that I have 3 subdomains):

/etc/nginx/sites-available/madscale.gr

server {

        root /var/www/madscale.gr/madbuild/build;
        index index.html index.htm index.nginx-debian.html;

        server_name madscale.gr www.madscale.gr;


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

            proxy_pass http://localhost:8086;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }


    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/madscale.gr/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/madscale.gr/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 {

    root /mad_admin/build;
    index index.html index.html index.nginx-debian.html;

    server_name admin.madscale.gr;

    location /app2 {
proxy_intercept_errors on;
        error_page 404 = /index.html;
        #root   /mad_admin/build;
 #          try_files $uri index.html;;
    try_files $uri #uri/ index.html;

#                   try_files $uri $uri/ /index.html$is_args$args;
        proxy_pass http://localhost:8083;
                proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;

    }


#    listen [::]:80 ; # managed by Certbot
 #   listen 80 ; # managed by Certbot
#    ssl_certificate /etc/letsencrypt/live/admin.madscale.gr/fullchain.pem; # managed by Certbot
 #   ssl_certificate_key /etc/letsencrypt/live/admin.madscale.gr/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

    listen [::]:443 ssl; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/madscale.gr/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/madscale.gr/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 {

        root /testmad_web/build;
        index index.html index.htm index.nginx-debian.html;

        server_name test.madscale.gr;


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

#       try_files $uri /index.html;
                proxy_pass http://localhost:8087;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }




    listen 80; # managed by Certbot

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/madscale.gr/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/madscale.gr/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 = www.madscale.gr) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = madscale.gr) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name madscale.gr www.madscale.gr;
    return 404; # managed by Certbot




}



#server {
#    if ($host = admin.madscale.gr) {
#        return 301 https://$host$request_uri;
#    } # managed by Certbot
#   listen 80;
#   listen [::]:80;
#   server_name admin.madscale.gr;
#    return 404; # managed by Certbot
#}

/etc/nginx/sites-available/default

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

    # SSL configuration
    #
#    listen 443 ssl default_server;
#    listen [::]:443 ssl default_server;


    root /var/www/html;
    #root /mad_admin/build;
    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name _;
    location / {

#   root   /usr/share/nginx/html;
    #index  index.html index.htm;
try_files $uri /index.html;
 #   try_files $uri $uri/ /index.html;
#   try_files $uri index.html;
#                try_files $uri $uri/ /index.html;

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

    location  ^~ /app2 {
        root /mad_admin/build;
        try_files $uri $uri/ index.html;
    }

    # pass PHP scripts to FastCGI server
    #
    #location ~ \.php$ {
    #   include snippets/fastcgi-php.conf;
    #
    #   # With php-fpm (or other unix sockets):
    #   fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
    #   # With php-cgi (or other tcp sockets):
    #   fastcgi_pass 127.0.0.1:9000;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #   deny all;
    #}
}


# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#   listen 80;
#   listen [::]:80;

#   server_name admin.madscale.gr;

#   root /mad_admin/build;
#   index index.html;

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

#       try_files $uri $uri/ =404;
#   }
#}
#server {
#       listen 80;
#       listen [::]:80;
#
#       server_name example.com;
#
#       root /var/www/example.com;
#       index index.html;
#
#       location / {
#               try_files $uri $uri/ =404;
#       }
#}

Answer 1

you must use hashRouter or in server side redirect all 404 to index.html and handle that in client side