Nginx和Create React应用程序（使用React路由器）完整路由不工作

Question

我已经被困在这个问题上好几天了，我需要互联网的帮助。

我已经为我的react应用程序创建了一个静态HTML登录页项目（这两个项目是分开的），我希望使用Nginx为这两个项目提供服务。我的登录页项目有自己的目录结构和资产，如下所示：

/homepage
--index.html
--contact.html
--about-us.html
  /static
   --css files, imgs, ect

我的React应用程序是一个创建React应用程序，据我所知，在运行npm build之后，它会为您提供一个名为build的文件夹，并将所有项目文件正确绑定，以便您可以部署它。现在我有两个目录，上面有我为网站提供服务所需的全部内容，但我很难使用Nginx来实现这一点。

我希望我的登录页位于/so www.example。com和www.example。com/contact，ect将导致我的登录页项目，然后是www.example。com/app，附www.example。com/app/login，ect将导致我的react项目。

我的Nginx配置如下所示：

# redirect to https
server {
  listen        80;

  server_name   _;

  return 301 https://$host$request_uri;
}

server{
    listen 443 ssl;
    ssl_certificate /etc/nginx/certs/localhost.pem;
    ssl_certificate_key /etc/nginx/certs/localhost-key.pem;
    proxy_cookie_path / "/; HTTPOnly; Secure";

    location / {
        root /usr/share/nginx/html/homepage/;
        try_files  $uri.html $uri $uri/ =404;
    }

    location /app/ {
        alias /usr/share/nginx/html/app/;
        try_files  $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass          http://backend:8080/;
    }

}

我可以正常查看我的react apps主页，但当我导航到任何其他页面（如https://localhost/app/test我被发送到一个坏掉的登录页索引。html（所有链接/样式都已断开）。那么，链接呢https://localhost/app指向我的react应用程序的索引。但是当我去https://localhost/app/test是坏的，它给了我登录页的坏索引。html

我如何正确配置nginx服务于我的反应应用程序的其他路线与我的着陆页项目？

编辑：

对于更多的信息，我添加了一个事实，我正在使用React路由器为我的反应应用程序，我的index.tsx看起来是这样的：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import Home from "./components/Home";
import Login from "./components/Login/Login";
import Dashboard from "./components/Dashboard";
import SignupPage from "./components/Signup/SignupPage";
import DashNavbar from "./components/DashNavbar";
import PersonCard from "./components/PersonCard/PersonCard";
import AnalyticsSmallCard from "./components/AnalyticsSmallCard";
import Test2 from "./components/Test2";
import Test from "./components/Test";
import PrivateRoute from "./components/PrivateRoute";
import NotesSideBar from "./components/NotesSideBar";
import NotesPage from "./components/NotesPage";
import WarningCard from "./components/WarningCard";

const App = (
  <Router basename="/app">
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/login" component={Login} />
      <Route path="/signup" component={SignupPage} />
      <PrivateRoute exact path="/dashboard" component={Dashboard} />
      <Route path="/test" component={WarningCard} />
    </Switch>
  </Router>
);

ReactDOM.render(App, document.getElementById("root"));

serviceWorker.unregister();

Answer 1

正如@codebytesfl提到的，您需要使nginx返回您的react app索引。html用于/app/下的所有路径（因为react应用程序在客户端处理路由）。

我认为根本原因是alias指令的使用。

try\u files正在将$uri附加到已使用别名设置的路径上。欲知更多详情，请阅读本文

尝试将别名更改为root

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

Answer 2

Web服务器，服务文件。当你访问example.com/app时，网络服务器只是显示/usr/share/nginx/html/app/index.html中的内容，同样，如果你访问example.com/app/login，它会尝试要显示/usr/share/nginx/html/app/login/index.html中的内容

如果没有看到或不知道你是如何构建反应应用的，就很难知道问题出在哪里。React，当您构建时，将只创建单个index.html以及构建目录内的一堆javascript。

这就是为什么你可以在你的反应主页（www.example.com/app）上看到它。但是当你导航到example.com/app/login你不能。因为 /app有index.html， /app/login.没有nginx在 /app/login目录下期待一个. html文件。

快速解决方案：大多数人将使用React路由器创建多页React应用程序。这允许您在react应用程序中拥有路由。

即使你只有一个索引。html，您可以使用react router创建不同的“页面”，所有这些都由内置javascript处理，您不必担心在Nginx中创建大量路由。只需路由到react主应用程序，react路由器将处理其余部分！

Answer 3

我目前在项目中使用的方法是在我的包中添加主页字段。React应用程序中的json文件。

{
  "name": "react-app-name",
  ...dependencies and such

  "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://example.com/app",
  "proxy": "https://example.com/api"
}

除了在路由器组件中已经拥有的basename属性之外，您还需要这个属性。这应该允许您通过React路由器呈现这些页面。如果您可以看到example.com/app，我假设NGINX文件中的路径是正确的。