☰

NginX 无法重定向到 React App

tag-icon • tag-icon nginx proxy reverse-proxy redirect proxypass
NginX 无法重定向到 React App

我对 NginX 还不太熟悉，所以如果我问的问题听起来有点幼稚，我深表歉意。假设我有一个 DNSwww.example.com。

每当请求到达www.example.com/（仅限/）时，我希望 NginX 将其重定向到www.example.com/home，然后将请求转发到在端口 5000 上运行的 React 应用程序。每当请求到达时www.example.come/{anything}，我希望在 3001 上运行的 Springboot 应用程序来处理该请求。

所以我有以下配置

例子.conf

server {

        server_name example.com www.example.com;

        listen 443 ssl; # managed by Certbot

        location = / {
                return 301 https://$host/home;
        }

        location / {

                proxy_pass http://localhost:3001;
                proxy_set_header X-Real-IP $remote_addr;
        }

        location = /home {
                proxy_pass http://localhost:5000;
        }
}

我有以下内容react-app.conf

server {

        listen 5000;
        server_name localhost;

        root /home/ubuntu/example/frontend/build;
        index index.html;

        location / {
        }
}

此路径/home/ubuntu/example/frontend/build是我的反应应用程序的构建文件夹所在的位置。

现在，每当我尝试访问www.example.com/xxx或时www.example.com/xyz，我的 Springboot 应用程序都会被调用，但每当我尝试时www.example.com，它首先重定向到www.example.com/home，然后显示通用404NginX 错误页面。

我检查了错误日志。它打印了以下内容：

2020/02/11 19:21:31 [error] 12936#12936: *15 open() "/home/ubuntu/example/frontend/build/home" failed (2: No such file or directory), client: 127.0.0.1, server: localhost, request: "GET /home HTTP/1.0", host: "localhost:5000"

我不明白的是为什么它试图打开/home/ubuntu/example/frontend/build/home。后面的/家从何而来以及如何保养它？

我检查了这和这，但帮不上什么忙

编辑1

我按照评论部分的建议做了修改，我的例子.conf现在看起来如下：

server {

            server_name example.com www.example.com;

            listen 443 ssl; # managed by Certbot

            location = / {
                    return 301 https://$host/home;
            }

            location / {

                    proxy_pass http://localhost:3001;
                    proxy_set_header X-Real-IP $remote_addr;
            }

            location = /home {
                    proxy_pass http://localhost:5000/;
            }
    }

但是，现在我在 NginX 错误日志中没有收到任何错误，但我确实看到我的 Springboot 应用程序被调用。发生的事情是，example.com将转到example.com/home，然后转到http://localhost:3001我的 Springboot 应用程序当前正在运行的位置。

但这不应该发生，因为在 上/home，它应该被带到在端口 5000 上运行的 NginX 服务器。我需要在我的react-app.conf文件？

答案1

您的 URL 正在寻找 /home -> 这是一个文件。但您想将所有请求发送到index.html。

使用try_files：

location / { try_files index.html =404; }

http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files

https://stackoverflow.com/questions/7027636/nginx-send-all-requests-to-a-single-html-page

server {

        listen 5000;
        server_name localhost;

        root /home/ubuntu/example/frontend/build;
        index index.html;

        location / {
           try_files index.html =404;
        }
}

相关内容