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

Question

好的，我已经在 Digital Ocean 设置了一个 nginx 服务器。我在机器中有使用 react-router 的 React 应用程序。

问题是除'/' 之外的任何网址都返回404 error。

我知道数百万与此类似的线程，但网上找到的答案都没有解决我的问题。您会注意到我的代码中有一些带有这些解决方案的 cmets。

你可以在下面找到我的 nginx 文件（注意我有 3 个子域）：

/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 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

您必须使用 hashRouter 或在服务器端将所有 404 重定向到 index.html 并在客户端进行处理