将 mern 应用程序部署到 heroku。错误信息：未找到

Question

我做了一个 MERN 应用程序。它在本地完美无误地工作，但是当我将它部署到 Heroku 时它构建成功但是它没有显示我的反应应用程序。我只收到一条错误消息，显示未找到。不明白为什么找不到路径

我尝试过的：

正在将 package.json 中的主页从 none 更改为“.”现在转到实际网页 url
通过添加 0.0.0.0
在 server.js 中将 app.get("*") 更改为 "/" 和 "/*"
指定节点版本
添加了 .htaccess 文件
正在清理客户端文件夹，只留下必要的 React 安装文件。

应用程序结构

-Api
 --Client

Heroku 日志

2021-03-15T14:21:40.000000+00:00 app[api]: Build succeeded
2021-03-15T14:21:40.862882+00:00 heroku[web.1]: Restarting
2021-03-15T14:21:40.873048+00:00 heroku[web.1]: State changed from up to starting
2021-03-15T14:21:41.847346+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2021-03-15T14:21:41.976552+00:00 heroku[web.1]: Process exited with status 143
2021-03-15T14:21:49.972188+00:00 heroku[web.1]: Starting process with command `npm start`
2021-03-15T14:21:52.197649+00:00 app[web.1]: 
2021-03-15T14:21:52.197660+00:00 app[web.1]: > api@1.0.0 start /app
2021-03-15T14:21:52.197662+00:00 app[web.1]: > node server.js
2021-03-15T14:21:52.197663+00:00 app[web.1]: 
2021-03-15T14:21:52.909951+00:00 app[web.1]: server is up and listening on port 15638
2021-03-15T14:21:53.036086+00:00 heroku[web.1]: State changed from starting to up
2021-03-15T14:21:53.340517+00:00 app[web.1]: MongoDb is connected!
2021-03-15T14:24:02.426508+00:00 heroku[router]: at=info method=GET path="/" host=testappah.herokuapp.com request_id=1448316d-899f-4dd2-afc4-eb3b818d886f fwd="213.164.214.250" dyno=web.1 connect=1ms service=17ms status=404 bytes=279 protocol=https
2021-03-15T14:24:02.428663+00:00 app[web.1]: GET / 404 6.799 ms - 33

package.json 在 api

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "homepage": "https://testappah.herokuapp.com",
  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "Jonathan Jonsson",
  "license": "MIT",
  "dependencies": {
    "bcrypt": "^3.0.8",
    "concurrently": "^4.1.2",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "mongodb": "^3.6.3",
    "mongoose": "^5.11.15",
    "morgan": "^1.10.0",
    "passport": "^0.4.1",
    "passport-jwt": "^4.0.0"
  }
}

server.js

const mongoose = require("mongoose");
const express = require("express");
const app = express();
const morgan = require("morgan");
const connectDb = require("./config/db");
const path = require("path");

const cors = require("cors");
require("dotenv/config");
const passport = require("passport");

//Import routes
const usersRoute = require("./routes/users");
const productsRoute = require("./routes/products");
const orderRoute = require("./routes/orders");
const categoriesRoute = require("./routes/categories");
const adminRoute = require("./routes/admin");

// Fix deprication warning
mongoose.set("useCreateIndex", true);

//logger
app.use(morgan("dev"));

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

//Connect to mongoDb
connectDb();

//cors
app.use(cors());

// passport middleware
app.use(passport.initialize());

// passport config
require("./config/passport")(passport);

// Handle routes
app.use("/users", usersRoute);
app.use("/products", productsRoute);
app.use("/orders", orderRoute);
app.use("/categories", categoriesRoute);
app.use("/admin-dashboard", adminRoute);

app.use((req, res, next) => {
  const error = new Error("Not found");
  error.status = 404;
  next(error);
});

app.use((error, req, res, next) => {
  res.status(error.status || 500);
  res.json({
    error: {
      message: error.message,
    },
  });
});

if (process.env.NODE_ENV === "production") {
  // Serve any static files
  app.use(express.static(path.join(__dirname, "client/build")));
  // Handle React routing, return all requests to React app
  app.get("*", function (req, res) {
    res.sendFile(path.join(__dirname, "client/build", "index.html"));
  });
}

const PORT = process.env.PORT || 3003;
app.listen(`${PORT}`, () => {
  console.log(`server is up and listening on port ${PORT}`);
});

我的配置

require("dotenv/config");
const mongoose = require("mongoose");
const uri = process.env.DB_CONNECTION;

//connect to DB
const connectDb = async () => {
  try {
    await mongoose.connect(uri, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });

    console.log("MongoDb is connected!");
  } catch (err) {
    console.log(err);
    process.exit(1);
  }
};
module.exports = connectDb;

我在客户端文件夹中也有一个 static.json，看起来像这样

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

Answer 1

我认为这是因为 express 正在从上到下检查路由，而在您的情况下，处理 404 是在 React 的路由之前。尝试放置这个：

if (process.env.NODE_ENV === "production") {
  // Serve any static files
  app.use(express.static(path.join(__dirname, "client/build")));
  // Handle React routing, return all requests to React app
  app.get("*", function (req, res) {
    res.sendFile(path.join(__dirname, "client/build", "index.html"));
  });
}

在此之前：

app.use((req, res, next) => {
  const error = new Error("Not found");
  error.status = 404;
  next(error);
});

将 mern 应用程序部署到 heroku。错误信息：未找到

deploying mern app to heroku. error message: Not found

javascript

deployment

heroku

reactjs

mern