Блог

Я ищу помощи. Пожалуйста. Я учусь программировать и создавать веб-страницы/приложения. В настоящее время стек с ошибкой, которую я не знаю, как исправить, так как локальная версия работает без проблем, но развернутая версия получает ошибку. Ранее была развернута аналогичная веб — страница без каких-либо проблем.

Я развернул на Heroku (развернуто и построено без проблем в журналах) приложение на стороне клиента (React) и на стороне сервера (Apollo amp; GraphQL amp; MongoDB). Я могу загрузить главную страницу с логином или зарегистрироваться, войти в систему и просмотреть профиль со всеми полученными данными. Однако, когда я обновляю страницу /профиль или даже простые страницы, такие как /контакты или /о программе, я получаю сообщение об ошибке.

> Не удается ПОЛУЧИТЬ />страницу

Приставка

> Не удалось загрузить ресурс: сервер ответил со статусом 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"
    }
  }
 

Нашел ответ после многих часов исследований и перепечатки

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