无法获取/NodeJS - Heroku - ReactJS答案

【问题标题】：Cannot GET / NodeJS - Heroku - ReactJS无法获取/NodeJS - Heroku - ReactJS
【发布时间】：2020-05-25 00:22:22
【问题描述】：

我在部署我的应用程序（NodeJS 的新手）时遇到问题，它在我的机器上运行良好，但在尝试进入应用程序时我从 heroku 收到错误

无法获取/

我唯一的 BE 逻辑连接到我的 Contact.js 组件中的表单我试图找到不同的解决方案，但似乎没有任何效果..

文件夹结构

reactapp (FE folder)
 ..build
   ..index.html
 ..src
   ..components
     ..pages
       ..Contact
         ..Contact.js

node_modules
.env
.gitignore
Index.js
package.json
Procfile

Contact.js（逻辑）

  async handleSubmit(e) {
    e.preventDefault();
    this.setState({ name: "", email: "", message: "", isClicked: true });
    setTimeout(() => {
      this.setState({ isClicked: false });
    }, 1000);
    document.querySelector(".form").reset();
    const { name, message, email } = this.state;
    const form = await axios.post("/api/form", {
      name,
      email,
      message
    });
  }

Index.js (BE)

require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");
const nodemailer = require("nodemailer");
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.post("/api/form", (req, res) => {
  nodemailer.createTestAccount((err, account) => {
    const htmlEmail = `
  <h3>####</h3>
    <ul>
    <li>###: ${req.body.name}</li>
    <li>Email: ${req.body.email}</li>
    </ul>
    <h3>####</h3>
    <p>${req.body.message}</p>
  `;

    let transporter = nodemailer.createTransport({
      service: "gmail",
      auth: {
        user: process.env.EMAIL,
        pass: process.env.PASSWORD
      }
    });

    let mailOptions = {
      to: "#######@gmail.com",
      replyTo: req.body.email,
      subject: "######",
      text: req.body.message,
      html: htmlEmail
    };

    transporter.sendMail(mailOptions, (err, info) => {
      if (err) {
        return console.log(err);
      } else {
        console.log("Message sent: %s", info.message);
        console.log("Message URL: %s", nodemailer.getTestMessageUrl(info));
      }
    });
  });
});

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`server is listening on port ${PORT}`);
});

package.json

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "npm start start --prefix reactapp",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "concurrently": "^5.0.2",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "nodemailer": "^6.4.2",
    "nodemailer-mailgun-transport": "^2.0.0",
    "nodemon": "^2.0.2"
  }
}

【问题讨论】：

标签： node.js reactjs heroku backend contact-form

【解决方案1】：

Heroku 在主文件夹中运行 npm install，但您还必须在 reactapp 文件夹中运行它。我建议在你的 package.json 中添加这个：

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactapp && npm run build --prefix reactapp"

如果你不需要构建你的 react 应用，你可以避免使用npm run build --prefix reactapp"

【讨论】：

在客户端脚本中，你写了两次“start”，会不会是这个问题？