看到将 create-react-app 应用程序部署到 heroku 的空白页答案

【问题标题】：Seeing a blank page on deploying create-react-app application to heroku看到将 create-react-app 应用程序部署到 heroku 的空白页
【发布时间】：2020-12-02 21:54:44
【问题描述】：

没有 webpack 配置，因为我没有弹出。我看到一个空的根 div。这是我的 package.json

{
  "name": "ttt",
  "version": "0.1.0",
  "homepage": "https://tictactoezz.herokuapp.com/",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "express": "^4.17.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.2"
  },
  "scripts": {
    "start": "node server/server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这是我的服务器/server.js

const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '../public');
const port = process.env.PORT || 3000;
app.use('/static', express.static(publicPath));
app.get('*', (req, res) => {
   res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(port, () => {
   console.log('Server is up!');
});

请帮忙！与此处发布的其他问题不同，我在控制台中看不到任何错误......只是一个空白屏幕。它适用于 localhost:3000

【问题讨论】：

检查您的 Heroku 错误日志
你解决过这个问题吗？

标签： reactjs

【解决方案1】：

如果你使用 create-react-app，你不需要 server.js 来部署 heroku。如果您坚持使用 server.js，它应该指向 build 文件夹，而不是 public 文件夹。您需要先运行npm run build，然后 server.js 应该在构建文件夹上提供服务器内容。您可以为heroku-post-build 添加一个新脚本。

...
"heroku-postbuild": "npm run build"
...

【讨论】：

是的，我意识到了，然后遇到了这个问题：stackoverflow.com/questions/61558585/…

【解决方案2】：

您的 start 脚本似乎不包括构建反应应用程序。你可以试试这个吗？

"scripts": {
    "prestart": "npm run build",
    "start": "node server/server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

【讨论】：

【解决方案3】：

我已经为同样的问题苦苦挣扎了两天。 Express&React.js 应用程序在 localhost 上运行良好，但在 heroku 上却不行。我将此添加到 server.js 并解决了问题。

app.use(express.static(path.join(__dirname, './frontend/build')));

我的 react.js 文件夹的名称为“frontend”，它与我的 server.js 文件处于同一级别。并且不要删除build 名称，也不要将其更改为任何其他名称。 build 是你的 react 应用启动的默认文件夹。

【讨论】：