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

如何解决将mern应用程序部署到heroku错误信息：未找到

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

我尝试过的：

• 将 package.json 中的主页从无更改为“。”现在到实际的网页网址
• 通过添加 0.0.0.0 将 Heroku 上的所有网址列入白名单
• 在 server.js 中将 app.get("*") 更改为 "/" 和 "/*"
• 指定节点版本
• 添加了 .htaccess 文件
• 清理客户端文件夹，只留下必要的 React 设置文件。

You can see the page here

应用结构

-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

api 中的 package.json

{
  "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,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"
    }
}

解决方法

我认为这是因为 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);
});