构建成功时无法将我的应用程序部署到 Heroku 空白页面和控制台错误？答案

【问题标题】：Having trouble deploying my app to Heroku blank page and console errors when the build succeeds?构建成功时无法将我的应用程序部署到 Heroku 空白页面和控制台错误？
【发布时间】：2020-10-29 12:19:07
【问题描述】：

我正在尝试在 Heroku 上使用 React + Node.js 和 Express 部署我的开发组合，并且构建成功并说它已部署，但我一直收到空白屏幕或黑屏。我很困惑，我想知道是不是我的 server.js 文件中的语法结构导致了问题，或者是 package.json 甚至我的 index.html 中的任何内容。我目前收到此错误：加载资源失败：服务器响应状态为 404（未找到）。我怀疑可能是我在 server.js 文件中错误地指向它。

如果有人能就如何解决这个问题提出建议，那就太棒了。我非常接近部署它。这很令人沮丧，我尝试了很多关于堆栈溢出的不同建议。

这是我的 index.html 文件：

<html lang="en"></html>
  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1" >
    <link rel="icon" type='image/x-icon' href="favicon.ico">
    <meta name="theme-color" content="#000000" >
    <meta
      name="description"
      content="Web site created using create-react-app">

      <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="stylesheet" href="./css/style.css" href="text/css">
    <link rel="manifest" href="/manifest.json" >
    <script type="text/babel" src="./lander.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons">


    <link href="public/css/layout.css">
    <link href="public/css/media-queries.css">
    <link href="public/css/magnific-popup.css">

    <title>Kevin Gillooly Dev Portfolio</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>

这是我的 server.js 文件：

require ('dotenv').config();

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path');
const buildPath = ('build/index.html');
const port = process.env.PORT || 5000;

const sendGrid = require('@sendgrid/mail');
const server = express();
server.use(bodyParser.json());

server.use(cors());

server.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

server.get('/api', (req, res, next) => {
  res.send('API Status: Running')
});

server.use(express.static(__dirname));

server.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'index.html'));
});

const REACT_APP_SENDGRID_API_KEY =`${process.env.REACT_APP_SENDGRID_API_KEY}`
server.post('/api/email', (req, res, next) => {
  sendGrid.setApiKey(REACT_APP_SENDGRID_API_KEY);
  console.log(req.body);
  const msg = {
      to: 'kevgill95@gmail.com',
      from: req.body.email,
      subject: req.body.subject,
      text: req.body.message
  }

  sendGrid.send(msg)
      .then(result => {
          res.status(200).json({
            success: true
          });

      })
      .catch(err => {
          console.log('error: ', err);
          res.status(401).json({
            success: false
          })
      })
});

server.listen(port, () => {
  console.log(`Server is up on port ${port}!`);
});

这是我的 package.json 文件：

{
  "name": "dev-personal-portfolio",
  "description": "a really cool app",
  "version": "1.0.0",
  "homepage": "https://kev-personal-portfolio.herokuapp.com/",
  "engines": {
    "node": "12.x"
  },
  "private": true,
  "proxy": "http://localhost:5000",
  "secure":false,
  "dependencies": {
    "@lawcket/websocket": "^0.1.5",
    "@material/textfield": "^6.0.0",
    "@popperjs/core": "^2.4.4",
    "@react-pdf/renderer": "^2.0.0-beta.6",
    "@sendgrid/mail": "^7.2.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "async": "^3.2.0",
    "axios": "^0.19.2",
    "bootstrap": "^4.5.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "material-components-web": "^6.0.0",
    "nodemailer": "^6.4.10",
    "react": "^16.13.1",
    "react-animations": "^1.0.0",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-loadable": "^5.5.0",
    "react-mdl": "^2.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-spring": "^8.0.27",
    "react-sticky": "^6.0.3",
    "serve-favicon": "^2.5.0",
    "typescript": "^3.9.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "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"
    ]
  },
  "devDependencies": {
    "3": "^2.1.0",
    "-": "0.0.1",
    "jquery": "^3.5.0",
    "popper.js": "^1.16.0"
  }
}

任何帮助将不胜感激！

（编辑） 这是我的目录布局的屏幕截图

Screenshot 1

Screenshot 2

（更多编辑） 这是我现在的文件夹结构的屏幕截图。

** 再次编辑 ** 这是我的文件夹结构

【问题讨论】：

你能分享你的目录图片吗
另外，你能澄清一些事情吗？看起来您想在同一个存储库中部署一个整体，即客户端和服务器。但是，您链接到的包是您的客户端包。我希望您将服务器包放在根级别。
@Hyetigran 我刚刚在编辑下发布了截图。这应该清楚我的服务器位于项目的根目录中。我也没有使用客户端文件夹。
谢谢。请看下面我的回答。如果有任何步骤不清楚，请告诉我，我可以添加更多细节。
@Hyetigran 我将我的 src、public 和我的节点模块移动到客户端文件夹中，它显示超过 5k 的更改，但这应该没问题吧？我打算提交这些，然后再次运行构建并 git push heroku master。我已经在heroku上设置了我的环境，所以应该没问题。我打算现在打电话，明天继续。再次感谢

标签： node.js reactjs heroku deployment

【解决方案1】：

根据您的项目结构，看起来服务器永远不会启动。客户端和服务器都出现package.json 文件是很常见的。

请参见下面的示例目录：

将所有 react 的东西放在一个单独的目录中，即红色框
您可以将 server.js 文件保存在根目录中。 npm 安装服务器的依赖项，例如 cors、express、dotenv 等。即蓝框
由于您使用 Heroku 进行托管，请确保添加以下脚本，即绿框
另外，由于您正在使用 sendGrid 的环境变量，请确保您在 Heroku 设置选项卡中设置它们。见下图

【讨论】：