nginx 404 Not Found Not Found Not Found

n7taea2i  于 2023-10-17  发布在  Nginx
关注(0)|答案(9)|浏览(163)

我将react.js应用程序上传到服务器。我用的是nginx服务器。应用程序工作正常。但是当我转到另一个页面并刷新时,该网站无法正常工作。404 Not Found错误提示
我该如何解决这个问题?

kuarbcqp

kuarbcqp1#

当您的react.js应用加载时,路由由react-router在前端处理。例如,你在http://a.com。然后在页面上导航到http://a.com/b。此路由更改在浏览器本身中处理。现在,当你刷新或打开一个新的标签中的网址http://a.com/b,请求转到你的nginx,其中特定的路由不存在,因此你得到404。
为了避免这种情况,您需要为所有不匹配的路由加载根文件(通常是index.html),以便nginx发送文件,然后路由由浏览器上的react应用处理。要做到这一点,您必须在nginx.confsites-enabled中进行以下更改

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

这告诉nginx查找指定的$uri,如果找不到,则将index.html发送回浏览器。(详情请参阅https://serverfault.com/questions/329592/how-does-try-files-work

zsbz8rwp

zsbz8rwp2#

这里给出的答案是正确的。但是,当我试图在Docker容器中部署我的React应用程序时,我正在努力解决这个问题。问题在于,如何在Docker容器中更改nginx脚本。

第一步:准备Dockerfile

# Stage 1
FROM node:8 as react-build
WORKDIR /app
COPY . ./
RUN yarn
RUN yarn build

# Stage 2 - the production environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

请参阅命令行:COPY nginx.conf /etc/nginx/conf.d/default.conf。在这里,我们告诉Docker将nginx.conf文件从Docker主机复制到Docker容器。

第二步:在应用根目录下创建一个nginx.conf文件

server {
    listen       80;
    server_name  localhost;

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

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

第三步:构建Docker镜像并运行

$ docker build . -t react-docker

这应该会成功构建你的Docker镜像。要检查,请运行

$ docker images

现在运行

$ docker run -p 8000:80 react-docker

并导航到http://localhost:8000
这是由this blog启发的。

ibrsph3r

ibrsph3r3#

对我来说,解决方案是:

location / {
            root /var/www/myapp/build;
            index index.html;
            try_files $uri /index.html$is_args$args =404;
    }
ix0qys7i

ix0qys7i4#

几个小时后,我终于得到了这个工作:

try_files $uri /index.html$is_args$args =404;

最后一个arg(=404)是使其工作的原因。

xsuvu9jc

xsuvu9jc5#

这在我使用nginx服务react时很有效:
编辑nginx.conf(也可以是default.conf)文件的location部分,如下所示。配置文件可以在/etc/nginx/sites-available/yoursite中找到

location / {
   # First attempt to serve request as file, then
   # as directory, then redirect to index(angular) if no file found.
   try_files $uri $uri/ /index.html;
}

因此,完整的nginx.conf配置如下:

server {
        listen 80 default_server;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;

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

bis0qfac6#

问题来了,当你在一个路径,如http:/some/path和你点击刷新你得到一个404错误页面。ngnix配置中的这一行可以解决这个问题。

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

添加后做一个nginx服务重启。

d8tt03nd

d8tt03nd7#

这对我很有效

location /{
try_files $uri $uri/ /index.html$is_args$args;
}
68de4m5k

68de4m5k8#

如果你像我一样使用nextjs,也许你需要把它添加到next.config.js中。

module.exports = {
  trailingSlash: true,
}

重新构建您的项目。
供参考:https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash

jgwigjjp

jgwigjjp9#

尝试在sites-enabled中使用以下命令

sudo nano /etc/nginx/sites-available/Your_WEB_Folder

try_files $uri $uri/ /index.html;

快给我弄几个塔来!

相关问题