Heroku - 部署时显示空白屏幕的 Express 和 React 应用程序

Question

我很难弄清楚这里发生了什么。当我将我的 React/Express 应用程序部署到 Heroku 时，一切都构建和部署没有错误，但我的 React 前端完全空白。

我在浏览器控制台中收到此错误：

 Uncaught SyntaxError: Unexpected token < 1.b1e0c624.chunk.js:1
 Uncaught SyntaxError: Unexpected token < main.48d62be5.chunk.js:1 
 manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.

以下是我的server.js 文件如何设置以发送根index.html 文件：

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

app.get('*', function(_, res) {
  res.sendFile(path.join('/app/client/build/index.html'), function(err) {
    if (err) {
      console.log(err);
      res.status(500).send(err);
    }
  });
});

这就是我的 React 应用程序package.json 的顶部（代码为简洁而编辑）的样子：

{
  "name": "client",
  "version": "0.1.0",
  "homepage": "https://radiant-tor-66940.herokuapp.com/",
  "private": true,
}

我认为在客户的package.json 中设置主页可以做到这一点，但没有。我真的不确定在这里做什么。我在想某事可能与路径或类似的东西有关。

更新

这对我来说仍然是个问题。下面我分享了更多代码，希望对我的情况有所帮助。这次页面加载时我遇到了一个新错误：

{"errno":-2,"code":"ENOENT","syscall":"stat","path":"/app/server/client/build/index.html","expose":false,"statusCode":404,"status":404}

上面的这个错误是从这个代码中的错误块发送的：

app.get('*', function(req, res) {
  res.sendFile('/client/build/index.html', { root: __dirname }, function(err) {
    if (err) {
      res.status(500).send(err);
    }
  });
});

我已经更改了我的server.js 文件以像这样提供index.js 文件，而不是使用模板文字（此时尝试任何方法）：

    //Express
    const express = require('express');
    const app = express();
    const port = process.env.PORT || 8000;
    //Core Node Modules
    const fs = require('fs');
    const path = require('path');

    //Middleware
    app.use(express.urlencoded({ extended: true }));
    app.use(express.json());

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

        app.get('*', function(req, res) {
          res.sendFile('index.html', { root: __dirname }, function(err) {
            if (err) {
              res.status(500).send(err);
            }
          });
        });

    app.listen(port, err => {
      if (err) console.info(`Error: The server failed to start on ${port}`);
      else console.info(`****** Node server is running on ${port} ******`);
    });

这是我的服务器的根级别package.json。我添加了heroku-postbuild 脚本来构建位于client 的React 应用程序：

      "scripts": {
        "test": "jest",
        "start": "node server/server.js",
        "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
      },
  "engines": {
    "node": "~9.10.1",
    "npm": "~5.6.0"
  }

这是位于 /client 中的 React 应用程序的 package.json：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "lodash": "^4.17.11",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "styled-components": "^4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:8000/"
}

Heroku 服务器上的文件如下所示：

第一张图片：根目录 第二张图片：/client 目录 第三张图片：/client/build 目录 第 4 张图片：/client/build/static 目录

Answer 1

问题出在我的server.js 文件中。

原来是express.static(path_join(__dirname, '/client/build'))

必须是：express.static(path_join(__dirname, '../client/build'))

之所以如此，是因为我的server.js 文件位于/server 中，并且它试图在/server 中找到/client/build，而不是Heroku 上的根应用程序目录。

Answer 2

由于我们无法访问您的服务器，因此很难说出问题背后的原因。我猜你错误地配置了你的快速服务器，因为这三个错误消息表明，服务器只返回 index.html 文件。

由于 HTML 不是有效的 Javascript，您会收到意外的令牌错误。

我也猜想，下面这行根本没有任何作用，这意味着该文件夹中没有文件（或者不是您要访问的文件）。

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