Question

Picture of my React application with all the files

我无法在 Heroku 上部署我的应用程序。

我的 package.json 用于外部（后端）文件

{
  "name": "teams-clone",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js && cd client && npm start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "redis": "^3.1.2",
    "socket.io": "^4.1.2"
  }
}

我的 server.js 文件

require("dotenv").config();
const express = require("express");
const http = require("http");
const bodyParser = require("body-parser");
const cors = require("cors");
const port = process.env.PORT;
const app = express();
const server = http.createServer(app);
const Routes = require("./app/routes");

app.use([
  cors(),
  bodyParser.json(),
  bodyParser.urlencoded({ extended: false }),
  Routes,
]);

const io = (module.exports.io = require("socket.io")(server, {
  cors: {
    origin: "*",
  },
}));
const socketManager = require("./app/socketManager");
io.on("connection", socketManager);

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

我的客户端 package.json 文件：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@syncfusion/ej2-react-schedule": "^19.1.69",
    "@testing-library/jest-dom": "^5.14.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "date-fns": "^2.22.1",
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "moment": "^2.29.1",
    "node-sass": "^4.14.1",
    "react": "^17.0.2",
    "react-calendar": "^3.4.0",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "shortid": "^2.2.16",
    "simple-peer": "^9.11.0",
    "socket.io": "^4.1.2",
    "socket.io-client": "^4.1.2",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

我的客户端也有这段用于套接字连接的代码：

let peer = null;
const socket = io.connect("http://localhost:4000");
const initialState = [];

我在部署时将其更改为 heroku 链接而不是本地主机 4000

我的 apiEndpints BASE_URL 现在是： http://本地主机:4000 我在部署时将其更改为 heroku 链接而不是本地主机 4000

我的应用程序如何启动：首先开启Redis.exe -> node server.js -> cd client -> npm start

我还用=> web: node server.js 制作了一个 Procfile

我做错了什么？

我想在 Heroku 上部署我的 React 应用程序，但在我的应用程序部署后出现错误无法获取/

0 个答案: