MERN 项目路由在 Heroku 上不起作用

Question

我创建了一个个人网站。它是使用 ReactJs、Express、Node 和 MongoDB 开发的。它在我的本地主机上也可以正常工作，Heroku（使用 react-router-dom）也是如此。但是，当我直接点击 Heroku 上的 URL 时，它会显示错误。仅主页可用。

这是网址，https://amper.herokuapp.com/

package.json

{
  "name": "amper",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "homepage": "https://amper.herokuapp.com",
  "scripts": {
    "dev-client": "PORT=3000 react-scripts start",
    "server": "node server.js",
    "dev-server": "nodemon ./server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "PORT=3000 react-scripts start && node server.js",
    "dev": "concurrently --kill-others \"npm run dev-client\" \"npm run dev-server\""
  },
  "author": "Amper",
  "license": "ISC",
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^19.0.1",
    "@ckeditor/ckeditor5-react": "^2.1.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@testing-library/jest-dom": "^5.9.0",
    "@testing-library/react": "^10.0.4",
    "@testing-library/user-event": "^10.4.0",
    "axios": "^0.19.2",
    "bcrypt": "^4.0.1",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.5.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "draft-js": "^0.11.5",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "moment": "^2.26.0",
    "mongoose": "^5.9.16",
    "path": "^0.12.7",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-feather": "^2.0.8",
    "react-helmet": "^6.0.0",
    "react-moment": "^0.9.7",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.1",
    "react-select": "^3.1.0",
    "serve-static": "^1.14.1"
  },
  "engines": {
    "node": "12.16.3"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "^5.2.0",
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.4"
  }
}

server.js

const express = require('express');
const mongoose = require('mongoose');
const bodyparser = require('body-parser');
const cors = require('cors');
const path = require('path');
const serveStatic = require('serve-static');
require('dotenv').config();

const routes = require('./server/routes');

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

// mongo connection
mongoose.Promise = global.Promise;
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('Database Connected'))
  .catch((err) => console.log(err));

app.use(serveStatic(path.join(__dirname, 'build')));

// bodyparser setup
app.use(bodyparser.urlencoded({ extended: true }));
app.use(bodyparser.json());

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

routes(app);

app.listen(port, () => console.log(`App is running on port ${port}`));

项目文件夹结构

amper
|_ node_modules
|_ public
   |_ favicon.ico
   |_ index.html
   |_ manifest.json
   |_ robots.txt
|_ server
   |_ controllers
   |_ middleware
   |_ models
   |_ routes
|_ src
   |_ assets
   |_ components
   |_ App.js
   |_ index.js
   |_ serviceWorker.js
   |_ setupTests.js
|_ .env
|_ .gitignore
|_ package-lock.json
|_ package.json
|_ README.md
|_ server.js

Answer 1

目前面临完全相同的问题。

mongoose.connect(process.env.MONGO_URI ...

我的环境变量没有在 Heroku 上设置。我在下面添加了它：

heroku -> 设置 -> 配置变量 -> 显示配置变量

现在，我的应用显示 503 Service Unavailable（当我在 chrome-dev-tools 上的 network-info 下检查时）。 Heroku 日志显示 H12“请求超时”，在检查时，我得到了这个 page。

所以，我尝试postman 发起一个非常简单的“GET”请求，该请求将发送回 1 行。邮递员 GET 也失败了。

虽然这本身不是一个答案，但我已尝试列出所采取的步骤。其中一些正在使用 stackoverflow 上的其他问题，并将尝试链接这些问题。

相关的stackoverflow问题：

1. Node.js API working locally but not on Heroku

2. Mongodb atlas + node.js working locally but stop when pushed to Heroku

3. application times out when connecting to MongoLab from Heroku

作为附录，我还想查看来自 server.js 的任何“console.log”消息。上周刚刚构建了我的第一个 MERN 应用程序并正在寻找任何指针。

问题已解决：非常感谢mousto090 的以下回答。

if (process.env.NODE_ENV === "production") {
  // Set the static assets folder (ie, client build)
  app.use(express.static('client/build'));
  app.get('*', (req,res) => {
  res.sendFile(path.resolve(__dirname, 'client', 'build', index.html'))
  });
}

以上代码在我的 server.js 上。显然，我错过了在 Heroku 设置上声明的 NODE_ENV 变量的期望。添加了它，代码现在可以工作了。谢谢mousto090！

Answer 2

serve-static 包服务于build 文件夹，但如果您使用客户端路由，则这是not quite enough。

在所有路由之后添加以下代码

routes(app);
app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});