IT技术 - Heroku 仅显示 MERN 应用程序的后端。我怎样才能解决这个问题？ - 吾爱随笔录

我已经完成了我的第一个 MERN 应用程序。它在本地工作，并且在 Heroku 上“成功构建”，但显示的只是从 MongoDB 为“/”路由检索的后端数据。

我在这里查看了一些讨论将 MERN 堆栈应用程序部署到 Heroku 的资源： 1. https://www.freecodecamp.org/forum/t/solved-deployment-problem-showing-backend/280178 2. https： //www.freecodecamp.org/news/how-to-deploy-a-react-app-with-an-express-server-on-heroku-32244fe5a250/

我尝试将这些帖子与我的代码集成，但无济于事。我不确定如何将路径中间件与我的三个现有路由（“/”、“/authors”和“/books”）一起使用，以及最终如何导致 index.html 的构建。我不确定它是否有什么不同，但我正在使用 parceljs 来构建前端。

编辑：添加了文件夹布局的屏幕截图以显示 dist 文件夹在项目中的位置

下面是我的 server.js 文件：

if (process.env.NODE_ENV !== "production") {
  require("dotenv").config();
}

const express = require("express");
const app = express();
const cors = require("cors");
const path = require("path");

// Middleware
app.use(express.urlencoded({ limit: "10mb", extended: true }));
app.use(express.json({ limit: "10mb" }));
app.use(cors());

// Connect to Mongoose
const mongoose = require("mongoose");
mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useCreateIndex: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;
db.on("error", err => console.error(err));
db.once("open", () => console.log("Connected to Mongoose"));

// Define routes
const indexRouter = require("./routes/index");
const authorRouter = require("./routes/authors");
const bookRouter = require("./routes/books");

// Utilize routes
app.use("/", indexRouter);
app.use("/authors", authorRouter);
app.use("/books", bookRouter);

app.listen(process.env.PORT || 3000);