React-router 和 Nginx

我正在将我的 React 应用程序从 webpack-dev-server 迁移到 Nginx.

当我转到 root URL “ localhost:8080/login ” 时，我只得到一个 404，在我的 Nginx 日志中，我看到它正在尝试获取：

my-nginx-container | 2017/05/12 21:07:01 [error] 6#6: *11 open() "/wwwroot/login" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /login HTTP/1.1", host: "localhost:8080"
my-nginx-container | 172.20.0.1 - - [12/May/2017:21:07:01 +0000] "GET /login HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0" "-"

我应该在哪里寻找解决方案？

我在React中的路由器位如下所示：

render(







Hello there p























, app);

我的Nginx文件是这样的：

user  nginx;
worker_processes  1;


error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;




events {
worker_connections  1024;
}




http {
include       /etc/nginx/mime.types;
default_type  application/octet-stream;


log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';


access_log  /var/log/nginx/access.log  main;


sendfile        on;
#tcp_nopush     on;


keepalive_timeout  65;


#gzip  on;


include /etc/nginx/conf.d/*.conf;


server {
listen 8080;
root /wwwroot;


location / {
root /wwwroot;
index index.html;


try_files $uri $uri/ /wwwroot/index.html;
}




}
}

编辑：

我知道大多数设置都可以正常工作，因为当我在没有登录的情况下转到localhost：8080时，我也会看到登录页面。这不是通过重定向到localhost：8080/login-它是一些反应代码。

141288 次浏览
小开
最佳答案

你的nginx配置中的位置块应该是：

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

问题是对index.HTML文件的请求可以工作，但您当前没有告诉nginx将其他请求也转发到index.HTML文件。

小开

以下是我的解决方案

简单尝试：

location / {
root /var/www/mysite;
try_files $uri /index.html;
}

不再尝试非HTML类型：

location / {
root /var/www/mysite;
set $fallback_file /index.html;
if ($http_accept !~ text/html) {
set $fallback_file /null;
}
try_files $uri $fallback_file;
}

不再尝试非HTML类型和目录（使try_files与index和/或autoindex兼容）：

location / {
root /var/www/mysite;
index index.html;
autoindex on;
set $fallback_file /index.html;
if ($http_accept !~ text/html) {
set $fallback_file /null;
}
if ($uri ~ /$) {
set $fallback_file /null;
}
try_files $uri $fallback_file;
}
小开

下面是在实时服务器中为我工作的解决方案：

我刚刚_了ABC_0，并使用基本的nginx配置简单地配置了位置块。

location / {
try_files $uri $uri/ /index.html;
}
小开

对我来说，在添加根指令之前，什么都不起作用。我还使用反向代理来访问/API/webserver端点，这对我很有效。

location / {
root   /usr/share/nginx/html;
try_files $uri /index.html;
}
小开

我正在处理同样的问题，我认为这是一个配置错误，但没有。我将conf文件复制到/etc/nginx/conf.d/文件夹中。这在开发中是可行的，但在构建版本中会导致这个问题。当路由失败时，nginx不会回退到索引。

只需将conf文件复制到正确的文件夹：/etc/nginx/conf.d/default.conf

dockerfile指令

示例： COPY .docker/prod/nginx.conf /etc/nginx/conf.d/default.conf

希望能有所帮助。

小开

也许这不是这里的确切情况，但对于任何为其react项目运行docker容器的人来说，使用react-router和webpack-dev-server，在我的例子中，我在我的nginx.conf中拥有我所需要的一切：

server {
listen 80;
location / {
root   /usr/share/nginx/html;
index  index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 404 /index.html;
location = / {
root /usr/share/nginx/html;
internal;
}
error_page   500 502 503 504  /50x.html;
location = /50x.html {
root   /usr/share/nginx/html;
}
}

但nginx仍然不会将404错误发送到根/。查看容器后，我注意到/etc/nginx/conf.d/default.conf中的一些配置会以某种方式覆盖我的配置，因此删除dockerfile中的该文件可解决该问题：

...
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf  # <= This line solved my issue
COPY nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
小开 
location / {
root /path/to/root/directory/of/staticfiles;
index index.html;
try_files $uri /index.html;
}
小开

下面是我采取的一些步骤，如果你正在起步，这些步骤可能会对你有所帮助。

  1. 一旦进入SSH，需要使用cd ..返回到根/，那么您应该处于/
  2. 然后找到.conf文件，该文件通常位于前面的 /etc/nginx/sites-available/{yoursitename or default} CD中，以导航到该文件
  3. 使用nano或vim编辑该文件我使用Vim，vi {your site.conf}
  4. 这里的内容应该是整个文件的工作。
server {
listen       80;
server_name www.yourDomainName.com, yourDomainName.com;
location / {
root   /usr/share/nginx/{location of the build of your react project};
index  index.html index.htm;
            

try_files $uri $uri/ /index.html;


passenger_enabled on;
}
error_page   500 502 503 504  /50x.html;
location = /50x.html {
root   html;
}
}
小开

Nginx将尝试在根目录中查找index.HTML，如果您使用的是其他位置，则可能需要将其添加到“尝试_文件”指令中：

所以代替：

location /MyLocation {
root /var/www/html;
try_files $uri /index.html;
}

你应该做：

location /MyLocation {
root /var/www/html;
try_files $uri /MyLocation/index.html; # Make sure to add the folder to the path
}

通过将myLocation添加到try_文件中，您可以使nginx在重定向路由时使用正确的index.HTML.

小开

我知道这个问题已经得到了很好的回答，但它并不能解决你想要使用代理通过的浏览器路由器的问题，因为你不能使用root.

对我来说，解决方案很简单。

假设您有一个指向某个端口的URL.

location / {
proxy_pass http://127.0.0.1:30002/;
proxy_set_header    Host            $host;
port_in_redirect    off;
}

现在由于浏览器的原因，路由器子路径被破坏。但是，您知道子路径是什么。

解决这个问题的办法？对于子路径_ABC，_为0

# just copy paste.
location /contact/ {
proxy_pass http://127.0.0.1:30002/;
proxy_set_header    Host            $host;
}

我尝试过的其他方法都不起作用，但这个简单的修复方法非常有效。

小开

我在使用服务人员和这个Nginx配置创建-反应-应用程序时遇到了一些问题。在发布站点的新版本后，服务人员将重新获取JS并发送index.HTML文件，而不是404。所以我的Nginx配置的更新版本是这样的：

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


location /static/ {
try_files $uri =404;
}

它确保/static/中的任何内容都不会返回index.HTML.

小开

如果您从子目录（例如http：//localhost：8080/jobs/）提供服务：

按如下方式使用/block：

server {
listen              8080;
server_name         localhost;
absolute_redirect   off;
root                /usr/share/nginx/html;
index               index.html;


location / {
expires         5m;
add_header      Cache-Control "public";
try_files $uri $uri/ /jobs/index.html;
}


}
小开

nginx配置中的位置块应该如下所示

location / {
root   /path/to/root/dir;
index  index.html index.htm;
try_files $uri $uri/ /index.html;

将所有请求转发到index.HTML（您的React Spa应用程序）。

和

在React应用程序项目的package.josn中，添加"homepage":"http://your.website.go"以使嵌套路径转发到正确的静态文件。

{
"name": "React App",
"version": "0.0.0",
"homepage": "http://your.website.go",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.1.1",
"react-scripts": "5.0.0",
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
小开

添加名为“ StaticFile ”的文件并将以下代码添加到此文件中。

    pushstate: enabled
小开

我只是改变：
问题：--->；尝试_文件$URI$URI/index.HTML=404；
解决方案：--->；尝试_文件$URI$URI/index.HTML；
问题解决了。 我的网站现在运行没有问题


提交答案