HEROKU 无法获取 /*任何页面*

Question

我正在寻求帮助。请。我正在学习编码和构建网页/应用程序。目前，堆栈出现我不知道如何修复的错误，因为本地版本运行没有问题，但部署的版本出现错误。之前部署了一个类似的网页，没有任何问题。

我已经在 Heroku 上部署了一个带有客户端（React）和服务器端（Apollo & graphQL & mongoDB）的应用程序（在日志中没有问题的部署和构建）。我可以通过登录或注册加载主页，登录并查看包含所有数据的配置文件。 但是，当我刷新 /profile 页面或什至像 /contact 或 /about 这样的简单页面时，我会收到错误消息。

> 无法获取/页面

控制台

>加载资源失败：服务器响应状态为404（未找到）

请看下面的代码。

server/server.js

const express = require("express");
const { ApolloServer } = require("apollo-server-express");
const path = require("path");

const { typeDefs, resolvers } = require("./schemas");
const { authMiddleware } = require("./utils/auth");
const db = require("./config/connection");

const PORT = process.env.PORT || 3001;
const app = express();

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: authMiddleware,
});

server.applyMiddleware({ app });

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "../client/build")));
}

db.once("open", () => {
  app.listen(PORT, () => {
    console.log(`????  Now listening on port ${PORT}! ???? `);
    console.log(
      `???????????? Server ready at http://localhost:${PORT}${server.graphqlPath} `
    );
  });

client/src/App.js

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { ApolloProvider } from "@apollo/react-hooks";
import ApolloClient from "apollo-boost";

import Navbar from "./components/Nav";
import Footer from "./components/Footer";
import { PrivateRoute } from "./components/PrivateRoute";
import { PublicRoute } from "./components/PublicRoute";

import Home from "./pages/Home";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Profile from "./pages/Profile";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Runsheet from "./pages/Runhseet"
import Summary from "./pages/Summary";

const client = new ApolloClient({

  request: (operation) => {
    const token = localStorage.getItem("id_token");

    operation.setContext({
      headers: {
        authorization: token ? `Bearer ${token}` : "",
      },
    });
  },
  uri: "/graphql",
});

function App() {
  return (
    <ApolloProvider client={client}>
      <Router>
          <section className="hero is-success is-fullheight">
            <Navbar />
            <Switch>
              <PublicRoute path="/" exact component={Home} />
              <PublicRoute path="/login" exact component={Login} />
              <PublicRoute path="/register" exact component={Register} />
              <PrivateRoute path="/profile" exact component={Profile} />
              <PrivateRoute path="/runsheet" exact component={Runsheet} />
              <PrivateRoute path="/summary" exact component={Summary} />
              <Route path="/about" exact component={About} />
              <Route path="/contact" exact component={Contact} />
            </Switch>
            <Footer />
          </section>
      </Router>
    </ApolloProvider>
  );
}

export default App;

client/src/static.json（作为类似问题之一的解决方案找到，但是对我没有帮助，仍然遇到同样的问题）。

{
    "root": "build/",
    "clean_urls": false,
    "routes": {
      "/**": "index.html"
    }
  }

Answer 1

经过数小时的研究和重新输入后找到了答案

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/build/index.html'));
});