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

i have setup a link that routes me to an about page (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>
    )}
  };

so, when i click the About Us link, it sends me to www.example.com/about

now, if i just open up a browser, and type in www.example.com/about, i get 404.

from my nginx server:

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"

so, what i'm gathering is nginx thinks 'about' is a directory. how do i reconcile this?

nginx config:

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; 
}

this whole scenario i believe ties into an Oauth issue i'm having with NextAuth.js. Which I believe is creating a link to /api/auth/sessions.

if i can figure this out, i might be able to figure out the other issue..

thanks!

CodePudding user response：

Your location / nginx rule should contain something like

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

The location block specifies the “/” prefix compared with the URI from the request. For matching requests, the URI will be added to the path specified in the root directive, that is, to /home/ubuntu/app-deploy/build, to form the path to the requested file on the local file system. If the file is not found, NGINX will fall back to the /index.html file. The try_files is needed because when we navigate to the defined routes, for example /about.html , NGINX will look for an about.html file in the build folder which doesn’t exist as the React App is Single Page Application. So, by sending back the index.html file, the React App can show the requested route, in this case /about .

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

CodePudding user response：

thanks to @chandresh_n i was able to get it:

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; 
}

i am also able to visit: example.com/api/auth/session which is propogated by NextAuth.js.

and after rebuilding, it fixed my Oauth issue. so, i can have serverless Oauth 2