在将 mern 堆栈应用程序部署到 heroku 时无法获取/错误服务客户端文件

Question

我在heroku上部署了一个mern stack应用程序并且部署成功，该应用程序在本地开发服务器上运行良好，但是当我单击已部署的应用程序链接https://immense-sands-74220.herokuapp.com 我收到无法获取/错误，经过数小时的搜索后，我很确定在应用程序运行时为客户端视图提供服务的服务器代码存在问题，我尝试使用以下代码：

const path = require('path');
// app.use(express.static(path.join(__dirname, './client/build')))

 app.get('*', function(_, res) {
   res.sendFile(path.join(__dirname, resolvedPath), function(err) {
     if (err) {
       res.status(500).send(err)
     }
   })
 })

但我最终遇到了这个错误：

server.js

//jshint esversion:6
const express = require("express");
const cors = require("cors");
const bodyParser = require('body-parser');
const mongoose = require("mongoose");
const session = require("express-session");
const passport = require("passport");
// const path = require('path');
// const filePath = "./client/public/index.html"
// const resolvedPath = path.resolve(filePath);

// console.log(resolvedPath);



const notesRouter = require("./routes/notes");
const registerRouter =  require("./routes/signup");
const loginRouter = require("./routes/signin");

require('dotenv').config();

const app = express();
const port = process.env.PORT || 3000;

app.use(cors()); 

app.use(express.json());
app.set('view engine', 'ejs');
app.use( bodyParser.json());
app.use(bodyParser.urlencoded({     
  extended: true
}));   

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(session({
  secret:"This is keeper clone.",
  resave: false,
  saveUninitialized: false
}));

app.use(passport.initialize());
app.use(passport.session());

// const uri = process.env.ATLAS_URI;
mongoose.connect("mongodb+srv://Karim:keeper@keeper.ickkk.mongodb.net/keeperDB?retryWrites=true&w=majority", { useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true});

const connection = mongoose.connection;

connection.once("open", () => {
    console.log("MongoDb database connection established successfully");
});

const User = require("./models/users");
passport.use(User.createStrategy());
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

app.use(express.static('/public/index.html'));



app.use("/", notesRouter);
app.use("/", registerRouter);
app.use("/", loginRouter);


// app.use(express.static(path.join(__dirname, './client/build')))

// app.get('*', function(_, res) {
//   res.sendFile(path.join(__dirname, resolvedPath), function(err) {
//     if (err) {
//       res.status(500).send(err)
//     }
//   })
// })

  


app.listen(port, () => {
    console.log("Server is running on port 3000!");
});

客户端包.json

{
  "name": "keeper",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "node server.js",
    "heruko-postbuild": "npm install && npm run-script build && npm run-script start:prod0"
  },
  "engines": {
    "node": "14.x",
    "npm": "6.x"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.6.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "ejs": "^3.1.5",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "mongoose": "^5.11.13",
    "mongoose-findorcreate": "^3.0.0",
    "nodemon": "^2.0.7",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0",
    "passport-local-mongoose": "^6.1.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:3000"
}

服务器包.json

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "engines": {
    "node": "14.x",
    "npm": "6.x"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "ejs": "^3.1.5",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "mongoose": "^5.11.10",
    "mongoose-findorcreate": "^3.0.0",
    "nodemon": "^2.0.7",
    "passport": "^0.4.1",
    "passport-facebook": "^3.0.0",
    "passport-google-oauth20": "^2.0.0",
    "passport-local": "^1.0.0",
    "passport-local-mongoose": "^6.1.0"
  }
}

这是我的项目目录结构

client package.json 文件可能包含一些 node.js 依赖项，这是因为我切换了目录结构，以便后端位于单独的文件夹中，客户端文件位于根目录中，并且我不断收到 module_not_found 每个错误节点依赖部署到heroku， 任何帮助都将不胜感激，因为我现在已经花费了 6 个多小时来解决与 heroku 部署相关的问题，试图清除 heroku 日志问题

Answer 1

这就是我在 heroku 上的工作原理

if (process.env.NODE_ENV === “production”) {
   app.use(express.static(“client/build”));
   app.get(“*”, (req, res) => {
      res.sendFile(path.resolve(__dirname, “client”, “build”, “index.html”));
   });
}

Answer 2

我不确切知道您的问题出在哪里，但请确保您记得在 Heroku 项目设置中配置任何环境变量。另外，我有一个当前部署在 Heroku 上的应用程序（免费层，没有插件，没有升级）并且使用几乎相同的堆栈和类似的项目结构工作。您也许可以参考它并解决您的问题。代码在这里：https://github.com/Perrottarichard/pizzapizza-server