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

Question

我向 heroku 部署了一个 mern stack 应用程序并且部署成功，该应用程序在本地开发服务器上运行良好，但是当我单击已部署的应用程序时 link https://immense-sands-74220.herokuapp.com 我得到一个 Cannot Get / error，经过几个小时的搜索，我很确定我的服务器代码在应用程序运行时服务于客户端视图存在问题，我尝试使用下面的代码：

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!");
});

客户package.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"
}

服务器package.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"
  }
}

这是我的项目目录结构

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

Answer 1

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

Answer 2

这是我在 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”));
   });
}

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

Cannot GET / Error serving client files on deploying a mern stack app to heroku

deployment

heroku

node.js

reactjs

mern