使用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屋!