Nginx 未在 React 应用程序中显示自定义“未找到页面”页面答案

【问题标题】：Nginx not showing custom 'Page Not Found' page in React appNginx 未在 React 应用程序中显示自定义“未找到页面”页面
【发布时间】：2021-05-21 02:05:19
【问题描述】：

好的，所以，我已经构建了一个 React 应用程序并将其部署在 Nginx 下。所以，到目前为止一切正常，即 Nginx 通过 HTTPS 为站点提供服务，尽管在我的 React 应用程序中，我使用 react-router-dom 和我的自定义 404 页面的默认路由.. 见下文。 /* 将未处理的请求路由到我的自定义“未找到”页面。当我只在本地运行 react app 时，这整个事情都很好，即通过运行“npm run”，尽管在我将静态构建部署到我的 web 服务器后，我有 Nginx 作为反向代理，任何访问有效安全页面的尝试（登录后）或者无效的页面路由只显示 Nginx 默认的 404 页面。我的 Nginx 配置如下..

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

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  licenses.mydomain.como;
        return 301 https://$host$request_uri;
        #root         /usr/share/nginx/html;
        root         /srv/www/licenses;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        index  index.html index.htm;
    try_files $uri $uri/ /index.html =404;
        }

        error_page 404 /404.html;
            location = /404.html {
                root /usr/share/nginx/html;
                #internal;
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

const routes = [
{
    path: "/",
    exact: true,
    isPrivate: false,
    page: () => <HomePage />,
  },
  {
    path: "/home",
    exact: true,
    isPrivate: false,
    page: () => <HomePage />,
  },
  {
    path: "/changerequest/",
    exact: true,
    isPrivate: false,
    page: () => <ChangeRequestApplication />,
  },
  {
    path: "/approvalcoderequest",
    exact: true,
    isPrivate: false,
    page: () => <ApprovalCodeRequest />,
  },
  {
    path: "/staffapp/",
    exact: true,
    isPrivate: false,
    page: () => <StaffApplication />,
  },
{
    path: "/reports/spotsallocationspersite",
    exact: true,
    isPrivate: true,
    menuid: 24,
    page: () => <SpotsAllocationPerSite />,
  },
  {
    path: "*",
    exact: true,
    isPrivate: false,
    page: () => <NotFound />,
  },
];

【问题讨论】：

标签： reactjs nginx

【解决方案1】：

删除 nginx.conf 文件中的以下部分：

error_page 404 /404.html;
location = /404.html {
     root /usr/share/nginx/html;
     #internal;
}

因为你的 react 应用已经处理了 404 页面。

如下替换location 块：

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

【讨论】：

谢谢阿米拉。我之前已经尝试过（并且刚刚重试）通过评论那些行甚至评论 location / {} 块并且它仍然服务于根位置但是当您输入受保护的路由时，它只显示 Nginx 标准 404 页面。
这是我在 Nginx 的 error.log 中看到的错误 ... 2021/05/21 13:21:37 [error] 2018290#0: *1 open() "/srv/ www/licenses/outstandingrequests”失败（2：没有这样的文件或目录），客户端：117.24.21.171，服务器：licenses.mydomain.com，请求：“GET /outstandingrequests HTTP/2.0”，主机：“licenses.mydomain.com ”
我认为这个问题可能与 Reactjs 页面如何作为单个页面 index.html 提供服务有关。其他一切都由 JS 呈现。整个应用程序中浏览器中的 URL 更改只是为了向用户显示他们已从一个页面移动到另一个页面。我们知道，在幕后，react 只是用新的 HTML 元素重新渲染画布。因此，在这种情况下，当我尝试使用 /outstandingrequests 的基本 url 时，Nginx 找不到任何像 /outstandingrequest 这样的文件夹并显示错误页面。可能需要在位置部分添加通配符或正则表达式..

【解决方案2】：

我找到了解决方案in this SO post。基本上按照这篇文章添加到您的 ssl.conf 或 nginx.conf 的位置段下方。

location / {

  if (!-e $request_filename){

    rewrite ^(.*)$ /index.html break;

  }

}

【讨论】：