使用Nginx的React Web App无法正确重定向 [英] React Web App with Nginx not redirecting properly

问题描述

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

I'm trying to deploy a React Web App on digital ocean using nginx.

我的根目录指向我的git repo中的build文件夹.这样，每当我进行更改时，我都可以通过git pull更新我的应用.

My root points to the build folder in my git repo. This way I can update my app by git pull whenever I make a change.

起初，一切正常，但后来我进行了git pull，现在出现重定向错误或500个错误.我不确定发生了什么.

At first, everything worked ok, but then I did a git pull and now I'm getting redirect errors or 500 errors. I'm not sure what happened.

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

If I open the site in the browser to the home page, it just shows a blank white screen. If I try accessing a subdomain, it gives a 500 internal error.

我的网站可用/默认文件如下:

My sites-available/default file looks like:

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

}

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

When I check the error-log I keep seeing

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

2018/08/31 13:32:26 [error] 29118#29118: *13 rewrite or internal redirection cycle while internally redirecting to "/index.php", client: 74.105.149.67, server: portal.productive.city, request: "GET /signin/signin HTTP/1.1", host: "www.portal.productive.city", referrer: "https://www.portal.productive.city/service-worker.js"

如果我运行nginx -t，则表明我的配置正常并且成功.

If I run nginx -t it says my config is ok and successful.

推荐答案

在/www/Productive-Website/my-app/build上似乎不存在index.php，也许它应该是.html或.htm文件?这使您的Web服务器尝试呈现index.php，并且由于它不存在，您将被重定向到index.php.如果是这样，它将在任何路径上发生.

Looks like index.php doesn't exists on /www/Productive-Website/my-app/build maybe it should be a .html or .htm file? This makes your webserver try to render index.php and because it doesn't exists, you get redirected to index.php. If that is the case it would happen on any path.

编辑该文件，以便您的位置文件如下所示:

Edit that file so that your location file looks like:

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

这意味着，在接收到请求时，搜索与$uri OR $uri/ OR $uri.html相匹配的文件，如果这些都不起作用，则呈现/index.html?$args".这意味着您的React应用程序应该管理/index.html上的所有错误，因此请适当使用您的应用程序.

This means, "When receiving a request, search for a file matching $uri OR $uri/ OR $uri.html and if none of those works, render /index.html?$args". This means your React app should manage all errors on /index.html, so adequate your application accordingly.

这篇关于使用Nginx的React Web App无法正确重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！