react.js应用程序显示在nginx服务器中找不到404

Question

我将react.js应用程序上传到服务器.我正在使用nginx服务器.申请工作正常.但是当我转到其他页面并刷新时,网站无法正常工作.它显示404未找到错误.

我该怎么解决这个问题.

谢谢.

Answer 1

当您的react.js应用加载时,路由由前端处理react-router.比如说你在http://a.com.然后在导航到的页面上http://a.com/b.此路由更改在浏览器本身中处理.现在,当您http://a.com/b在新选项卡中刷新或打开URL 时,请求将转到nginx特定路径不存在的位置,因此您将获得404.

为避免这种情况,您需要为所有不匹配的路由加载根文件(通常是index.html),以便nginx发送文件,然后路由由浏览器上的react应用程序处理.要做到这一点,你必须在你的nginx.conf或sites-enabled适当的情况下进行以下更改

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

这告诉nginx要查找指定的$uri,如果找不到,则将其发送index.html回浏览器.

Answer 2

这里给出的答案是正确的。但是，当我尝试React在 docker 容器中部署我的应用程序时，我遇到了这个问题。问题是，如何更改nginxdocker 容器内的配置。

第 1 步：准备 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 容器。

第 2 步：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;
    }
}

第 3 步：现在构建 docker 镜像并运行它

$ docker build . -t react-docker

这应该会成功构建您的 docker 镜像。要检查，运行

$ docker images

现在运行

$ docker run -p 8000:80 react-docker 

并导航到http://localhost:8000

这是受到这个博客的启发。

Answer 3

对我来说，解决方案是：

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

Answer 4

经过几个小时我终于得到了这个工作：

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

最后一个参数 (=404) 使这个工作得以实现。

Answer 5

这对我来说很有效，同时使用 nginx 来响应：

将 nginx.conf（也可以是 default.conf）文件的 location 部分编辑为如下所示。nginx.conf 文件位于 /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;
        }
    }