使用 Nginx 的 React Web App 无法正确重定向

Question

我正在尝试使用 nginx 在数字海洋上部署 React Web App。

我的根指向我的 git 存储库中的构建文件夹。这样，每当我进行更改时，我都可以通过 git pull 更新我的应用程序。

起初，一切正常，但后来我做了一个 git pull，现在我收到重定向错误或 500 错误。我不确定发生了什么。

如果我在浏览器中打开网站到主页，它只会显示一个空白屏幕。如果我尝试访问子域，则会出现 500 内部错误。

我的站点可用/默认文件如下所示：

server {
    server_name portal.productive.city www.portal.productive.city;
    root /www/Productive-Website/my-app/build;
    index index.html index.htm;
    rewrite ^/(.*)/$ $1 permanent;
    location / {
       try_files $uri $uri/ /index.php?$args;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/portal.productive.city/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/portal.productive.city/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

}

当我检查错误日志时，我不断看到

2018/08/31 13:32:26 [错误] 29118#29118: *13 重写或内部 内部重定向到“/index.php”时的重定向循环， 客户端：74.105.149.67，服务器：portal.productive.city，请求：“GET /signin/signin HTTP/1.1”，主机：“www.portal.productive.city”， 推荐人：“https://www.portal.productive.city/service-worker.js”

如果我运行 nginx -t 它说我的配置正常且成功。

Answer 1

看起来index.php 不存在于/www/Productive-Website/my-app/build 上，也许它应该是.html 或.htm 文件？这会让你的网络服务器尝试渲染index.php，因为它不存在，你会被重定向到index.php。如果是这种情况，它会发生在任何路径上。

编辑该文件，使您的位置文件如下所示：

location / {
   try_files $uri?$args $uri/ $uri.html?$args /index.html?$args;
}

这意味着，“当收到请求时，搜索匹配$uri OR $uri/ OR $uri.html 的文件，如果这些都不起作用，则呈现/index.html?$args”。这意味着您的 React 应用程序应该管理 /index.html 上的所有错误，因此您的应用程序需要相应地进行处理。