node.js - MERN 项目路由在 Heroku 上不起作用

问题描述

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

这是 URL，https://amper.herokuapp.com/

包.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"
  }
}

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

标签： node.jsreactjsexpressheroku

解决方案

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

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

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

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

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

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

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

node.js - MERN 项目路由在 Heroku 上不起作用

问题描述

解决方案

推荐阅读