node.js - 使用 ExpressJS 和 React 部署时出现 404

问题描述

项目在当地按预期工作。为了在本地运行，我目前npm run start在项目根目录和客户端根目录中同时运行该命令。

我正在使用 Express 和 Create React App 创建一个简单的应用程序。尽管构建成功并且我的 Heroku 日志中没有错误，但我的部署显示了一个空白页面，上面写着“未找到”，并且在 chrome 控制台中出现 404 错误。

文件目录：

client
  > src
   -> components
   -> app.js
  > package.json
routes
  > tweets.js
index.js
package.json

根包.json：

{
  "name": "newStock",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": {
    "npm": "6.x",
    "node": "12.x"
  },
  "scripts": {
    "start": "node index.js",
    "heroku-postbuild": "cd client && npm install && npm run build",
    "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",
    "express": "^4.17.1",
    "password-generator": "^2.2.3",
    "socket.io": "^2.3.0",
    "socket.io-client": "^2.3.0",
    "twitter": "^1.7.1"
  }
}

根 index.js：

const express = require("express");
const http = require("http");
const socketio = require("socket.io");
const path = require("path");
const bodyParser = require("body-parser");
const app = express();
require("dotenv").config({ path: "./.env" });
require("./routes/tweets.js")(app, io);

const server = http.createServer(app);
const io = socketio(server);

//middleware
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, "client/build")));


app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/client/build/index.html"));
});
const port = process.env.PORT || 3001;
console.log(`Password generator listening on ${port}`);

server.listen(port, () => {
  console.log("server is up");
});

根路由/tweets.js：

const Twitter = require("twitter");

module.exports = (app, io) => {
  let twitter = new Twitter({
    consumer_key: process.env.TWITTER_CONSUMER_KEY,
    consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
    access_token_key: process.env.TWITTER_ACCESS_TOKEN_KEY,
    access_token_secret: process.env.TWITTER_ACCESS_TOKEN_SECRET
  });

  let socketConnection;
  let twitterStream;

  app.locals.searchTerm = "cake"; //Default search term for twitter stream.
  app.locals.showRetweets = false; //Default

  /**
   * Resumes twitter stream.
   */
  const stream = () => {
    console.log("Resuming for " + app.locals.searchTerm);
    twitter.stream(
      "statuses/filter",
      { track: app.locals.searchTerm },
      stream => {
        stream.on("data", tweet => {
          sendMessage(tweet);
        });

        stream.on("error", error => {
          console.log(error);
        });

        twitterStream = stream;
      }
    );
  };

  /**
   * Sets search term for twitter stream.
   */
  app.post("/setSearchTerm", (req, res) => {
    let term = req.body.term;
    app.locals.searchTerm = term;
    twitterStream.destroy();
    stream();
    console.log(req.body.term);
  });

  /**
   * Pauses the twitter stream.
   */
  app.post("/pause", (req, res) => {
    console.log("Pause");
    console.log(req.body.term);
    twitterStream.destroy();
  });

  /**
   * Resumes the twitter stream.
   */
  app.post("/resume", (req, res) => {
    console.log(req.body.term);
    console.log("Resume");
    stream();
  });

  //Establishes socket connection.
  io.on("connection", socket => {
    socketConnection = socket;
    stream();
    socket.on("connection", () => console.log("Client connected"));
    socket.on("disconnect", () => console.log("Client disconnected"));
  });

  /**
   * Emits data from stream.
   * @param {String} msg
   */
  const sendMessage = msg => {
    if (msg.text.includes("RT")) {
      return;
    }
    socketConnection.emit("tweets", msg);
  };
};

标签： node.jsreactjsexpressherokucreate-react-app

node.js - 使用 ExpressJS 和 React 部署时出现 404

问题描述

解决方案

推荐阅读