将 React + NodeJS + Express + MySQL 应用程序部署到 Heroku 只部署服务器而不是 React

Question

作为标题状态，我有一个 React + NodeJS + Express + MySQL，我们正在尝试将其部署到 Heroku 网页。每次将某些内容推送到 GitHub 的主分支时，我都将其设置为自动部署。

我们遇到的问题是它正在为服务器部署路由并显示所有正确的信息，但反应应用程序根本没有显示。我怎样才能使它不显示服务器路由但反应前端是？

随附的是 Server.js 的代码以及我正在运行以构建客户端的脚本。

const express = require('express')
const cors = require('cors')
const app = express()
const path = require('path');
const port = process.env.PORT || 8080;


const homeRoute = require("./routes/home");
const allReviews = require("./routes/getAllReviews");
const mostRecentReviews = require("./routes/mostRecentReview");
const postReview = require("./routes/postReview");
const editReview = require("./routes/editReview");
const updateReview = require("./routes/updateReview");
const deleteReview = require("./routes/deleteReview");
const filterReview = require("./routes/getFilterReview");
const recentReviews = require("./routes/mostRecentReview");

const locationAverageRating = require("./routes/locationAverageRating");
const allLocations = require('./routes/allLocations');

app.use(cors())

app.use('/', homeRoute);
app.use('/review', allReviews);
app.use('/locations', allLocations);
app.use('/review/recent', mostRecentReviews);
app.use('/review/post', postReview);

app.use('/review/edit', editReview);
app.use('/review/update', updateReview);
app.use('/review/delete', deleteReview);
app.use('/review/filter', filterReview);
app.use('/carrier/recent',recentReviews);

app.use('/carrier/edit', editReview);

app.use('/carrier/locations', locationAverageRating);

app.use(express.static('client/build'));
app.get('*', (req, res) =>{
    res.sendfile(path.resolve(__dirname + "./client/build/index.html"));
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`Example app listening on port ${port}!`)
});

Heroku 构建脚本：

  "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

提前感谢您的帮助，如果您需要任何其他文件或有任何问题，请随时与我们联系！

Answer 1

当使用app.use 时，顺序很重要。因为所有服务器路由都在到 react 构建的路由之前声明，所以服务器路由将优先。

考虑为服务器路由添加前缀，以将它们与应由前端构建处理的请求区分开来（/api 是常见的选择）。

另一种选择是为您的前端指定路由（/app 可能）。您可以将某些 GET 请求重定向到您的 homeRoute 内的此路由，这样如果有人从根 URL 访问您的网站，他们最终会出现在正确的位置（假设您没有其他您想要的 GET 路由homeRoute 处理）。

因此，您可以将通配符 GET 路由更改为如下所示：

app.get('/app*', (req, res) => {
  res.sendfile(path.resolve(__dirname + "./client/build/index.html"));
})

然后在'homeRoutes'内

app.get('*', (req, res) => {
  res.redirect('/app')
})
...other homeRoutes