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

Posted 2023-03-10

【中文标题】HEROKU 无法获取 /*任何页面*

【英文标题】：HEROKU Cannot GET /*any page*

【发布时间】：2021-10-14 11:38:15

【问题描述】：

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

我已经在 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"
    
  

【参考方案1】：

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

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