部署到 heroku 并响应前端根本不起作用

Question

一直在尝试将我的 create-react 应用程序（MERN 堆栈）应用程序部署到 Heroku，但在获取与在 Heroku 中显示相关的任何 React 时遇到问题。 在我的本地计算机上它工作得很好。 然而，在 Heroku 中，当我点击任何路线时，它只会显示我从后端提供的 json。 json 中有我所有的数据库信息，它告诉我我的后端和我的 MongoDB 已连接并正常工作。 但是，没有显示任何 React 组件。 我尝试添加一个 static.json 文件，修改了 heroku-postbuild 脚本，并修改了 server.js 文件中的不同代码，该文件为其他帖子中的静态 index.html 文件提供服务，但没有成功。 任何让我的前端在 Heroku 中显示的帮助将不胜感激！

链接到我在 Github github 中的代码

文件夹结构

客户端包.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "https://youth-sports.herokuapp.com",
  "homepage": "https://youth-sports.herokuapp.com",
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "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"
    ]
  },
  "devDependencies": {
    "node-sass": "^6.0.1"
  }
}

根/服务器端 package.json

{
  "name": "youth-sports",
  "version": "1.0.0",
  "description": "",
  "main": "sever.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client"
  },
  "author": "Shaun Valentine",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^6.0.12"
  }
}

server.js 文件

require('dotenv').config();
const Players = require('./Model/playersModel.js'); //!Importing players model into backend for now to serve front-end React
const express = require('express');
const app = express();
const path = require('path');
const PORT = process.env.PORT || 5000;

const mongoose = require('mongoose');
const MONGODB_URI = process.env.MONGODB_URI;
const db = mongoose.connection;

mongoose.connect(MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
db.on('open', () => {
  console.log('Mongo is Connected');
});

//? MIDDLEWARE
app.use(express.json());
if (process.env.NODE_ENV !== 'development') {
  app.use(express.static('public'));
  // app.use('/static', express.static(path.join(__dirname, 'build')));
}

// app.use(express.json());
// if (process.env.NODE_ENV === 'production') {
//   // app.use(express.static('public'));
//   app.use(express.static(path.join(__dirname, 'build')));
// }

const cors = require('cors');
app.use(cors());
app.use(express.urlencoded({ extended: true })); // Middleware - so we can use req.body otherwise Express can't read what's in the body of our POST request. This Middleware parses data from forms in the x-www-form-urlencoded format
app.use(express.json()); // Middleware - for parsing data coming in the body of the POST request as json format

//? GET REQUEST - INDEX ROUTE - SHOW ALL PLAYERS UPON HITTING THIS ROUTE
app.get('/players', async (req, res) => {
  try {
    const roster = await Players.find({});
    res.json(roster);
  } catch (error) {
    res.status(400).json(error);
  }
});

//? GET REQUEST - SHOW PAGE (INDIVIDUAL PLAYER)
app.get('/players/:id', async (req, res) => {
  try {
    const playerProfile = await Players.findById(req.params.id);
    res.status(200).json(playerProfile);
    console.log(playerProfile);
  } catch (error) {
    res.status(400).send(error);
  }
});

//? POST REQUEST - CREATE ROUTE - POST NEW PLAYER DATA TO MONGODB FROM NEW PLAYER FORM ON NewPlayer.js file
app.post('/players', async (req, res) => {
  try {
    console.log(req.body);
    await Players.create(req.body);
    res.redirect('/players');
  } catch (error) {
    console.log(error);
  }
});

app.get('/teams', async (req, res) => {
  try {
    await res.json({ message: 'Hello from server!!!' });
  } catch (error) {
    console.log(error);
  }
});

app.get('*', (req, res) => {
  res.sendFile(
    path.resolve(path.join(__dirname, 'client', 'public', 'index.html'))
  );
  // res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
  // res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(PORT, () => {
  console.log(`Listening on PORT ${PORT} yo`);
});

App.js 文件（客户端文件）

import './Sass/App.scss';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; //! MUST IMPORT BrowserRouter (changing name to just Router is optional) and Route and Switch
import NewPlayer from './Components/NewPlayer.js';
import Rosters from './Views/Rosters.js';
import PlayerProfile from './Views/PlayerProfile.js';
import Home from './Views/Home.js';
import './Sass/App.scss';

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/players">
            <Rosters />
          </Route>

          <Route exact path="/players/new">
            <NewPlayer />
          </Route>

          <Route exact path="/players/:id">
            <PlayerProfile />
          </Route>

          <Route exact path="/">
            <Home />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

静态文件

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

Answer 1

进行以下更新。

我们必须将 react-app 的build文件夹的静态文件提供给服务器。

根/服务器端 package.json

  {
  "name": "youth-sports",
  "version": "1.0.0",
  "description": "",
  "main": "sever.js",
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "npm run client-install && npm run client-build",
    "client-install": "cd client && npm install",
    "client-build": "cd client && npm run build"
  },
  "author": "Shaun Valentine",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^6.0.12"
  }
}

server.js 文件

require('dotenv').config();
const Players = require('./Model/playersModel.js'); //!Importing players model into backend for now to serve front-end React
const express = require('express');
const app = express();
const path = require('path');
const PORT = process.env.PORT || 5000;

const mongoose = require('mongoose');
const MONGODB_URI = process.env.MONGODB_URI;
const db = mongoose.connection;

mongoose.connect(MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
db.on('open', () => {
  console.log('Mongo is Connected');
});

//? MIDDLEWARE
app.use(express.json());
if (process.env.NODE_ENV !== 'development') {
  app.use(express.static('public'));
  // app.use('/static', express.static(path.join(__dirname, 'build')));
}


const cors = require('cors');
app.use(cors());
app.use(express.urlencoded({ extended: true })); // Middleware - so we can use req.body otherwise Express can't read what's in the body of our POST request. This Middleware parses data from forms in the x-www-form-urlencoded format
app.use(express.json()); // Middleware - for parsing data coming in the body of the POST request as json format

//? GET REQUEST - INDEX ROUTE - SHOW ALL PLAYERS UPON HITTING THIS ROUTE
app.get('/players', async (req, res) => {
  try {
    const roster = await Players.find({});
    res.json(roster);
  } catch (error) {
    res.status(400).json(error);
  }
});

//? GET REQUEST - SHOW PAGE (INDIVIDUAL PLAYER)
app.get('/players/:id', async (req, res) => {
  try {
    const playerProfile = await Players.findById(req.params.id);
    res.status(200).json(playerProfile);
    console.log(playerProfile);
  } catch (error) {
    res.status(400).send(error);
  }
});

//? POST REQUEST - CREATE ROUTE - POST NEW PLAYER DATA TO MONGODB FROM NEW PLAYER FORM ON NewPlayer.js file
app.post('/players', async (req, res) => {
  try {
    console.log(req.body);
    await Players.create(req.body);
    res.redirect('/players');
  } catch (error) {
    console.log(error);
  }
});

app.get('/teams', async (req, res) => {
  try {
    await res.json({ message: 'Hello from server!!!' });
  } catch (error) {
    console.log(error);
  }
});

app.listen(PORT, () => {
  console.log(`Listening on PORT ${PORT} yo`);
});