看到將 create-react-app 應用程序部署到 heroku 的空白頁

Question

沒有 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

Answer 1

如果您使用 create-react-app，則不需要為 heroku 部署使用 server.js。 如果您堅持使用 server.js，它應該指向 build 文件夾，而不是 public 文件夾。 您需要先運行npm run build ，然后 server.js 應該在構建文件夾上提供服務器內容。 您可以為heroku-post-build添加一個新腳本。

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

Answer 2

看起來您的start腳本不包括構建反應應用程序。 你能試試這個嗎？

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

Answer 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 應用程序啟動的默認文件夾。