我的应用程序将我路由到一个页面，但我无法直接访问它

Question

我已经设置了一个 link 将我引导到一个关于页面 (about.js):

import React,{useState,useEffect} from 'react';
import Link from 'next/link'
///------------------------PAGES-------------------------------///
import {default as Main} from '../app/sections/Main.js'

export default function Home() {

  const [site, setSite] = useState('down');

  const mainprops = {
    site,
    setSite
  };

  if (site == 'up') {
    return(
      <div>
        <Main {...mainprops}/>
      </div>
    )}
  else if (site =='down') {
    return(
      <div>
        <h1>we are down for maintenance. thanks for your patience. </h1>
        <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      </div>
    )}
  };

所以，当我单击 About Us link 时，它会将我转到 www.example.com/about

现在，如果我打开浏览器并输入 www.example.com/about，我会得到 404。

来自我的 nginx 服务器：

2022/03/06 15:49:02 [error] 25#25: *8 open() "/etc/nginx/html/about" failed
(2: No such file or directory), client: 10.88.2.94, server: https://example.com, 
request: "GET /about HTTP/1.1", host: "example.com"

所以，我收集的是 nginx 认为 'about' 是一个目录。我该如何调和？

nginx 配置：

location / {
        proxy_redirect off;
        proxy_pass http://abda_1:$request_uri;
        try_files $uri /$uri.html;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;

        include /etc/nginx/conf.d/cors.txt;
        proxy_ssl_session_reuse on; 
}

我认为这整个场景与我在 NextAuth.js 中遇到的 Oauth 问题有关。我认为这是在 link 到 /api/auth/sessions.

如果我能解决这个问题，我也许能解决其他问题..

谢谢！

Answer 1

您的位置/nginx 规则应包含类似

的内容

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

位置块指定与请求中的 URI 相比的“/”前缀。对于匹配的请求，URI会被添加到root指令中指定的路径，即/home/ubuntu/app-deploy/build，形成请求文件在本地文件系统的路径。如果找不到该文件，NGINX 将回退到 /index.html 文件。 try_files 是必需的，因为当我们导航到定义的路由时，例如 /about.html ，NGINX 将在构建文件夹中查找一个 about.html 文件，该文件作为 React App 不存在是单页应用程序。因此，通过发回 index.html 文件，React App 可以显示请求的路由，在本例中为 /about .

参考：https://enrico-portolan.medium.com/how-to-host-react-app-with-nginx-634ad0c8425a

Answer 2

感谢@chandresh_n 我能够得到它：

root /etc/nginx/html;
location / {
    try_files $uri $uri/ /index.html;
}

location ~* {
        proxy_redirect off;
        proxy_pass http://abda_1;

        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;

        include /etc/nginx/conf.d/cors.txt;
        proxy_ssl_session_reuse on; 
}

我也可以访问： example.com/api/auth/session 由 NextAuth.js.

传播

重建后，它解决了我的 Oauth 问题。所以，我可以拥有无服务器 Oauth 2

我的应用程序将我路由到一个页面，但我无法直接访问它

my app routs me to a page, but i cant access it directly

reactjs

nginx

react-router

next.js

nginx-reverse-proxy