javascript - 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}

上面的错误是从此代码中的错误 block 发送的:

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 目录 第四张图片:/client/build/static 目录

Answer 1

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

最初是 express.static(path_join(__dirname, '/client/build'))

它需要是:express.static(path_join(__dirname, '../client/build'))

出现这种情况是因为我的 server.js 文件位于 /server 中，并且它试图在其中找到 /client/build /server 而不是 Heroku 上的根应用程序目录。