问当构建成功时，将我的应用程序部署到Heroku空白页面和控制台错误有困难吗？
EN

Stack Overflow用户

提问于 2020-07-09 00:59:05

回答 1查看 1.1K关注 0票数 2

我试图在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"
  }
}

任何帮助都将不胜感激！

(编辑)这里是如何布局我的目录的屏幕截图

截图1

截图2

(更多编辑)，这里是我的文件夹结构的屏幕截图。