部署到 heroku - 白屏 - 没有明显错误 - MERN 堆栈在本地工作得很好，包括 API 请求 - 已经尝试了 27 次部署

Posted 2023-02-19

【中文标题】部署到 heroku - 白屏 - 没有明显错误 - MERN 堆栈在本地工作得很好，包括 API 请求 - 已经尝试了 27 次部署

【英文标题】：Deployment to heroku - white screen - no obvious errors - MERN stack works locally just fine including API requests - tried 27 deploys already

【发布时间】：2021-11-03 00:48:28

【问题描述】：

我已经尝试为客户端部署我的全栈应用程序超过 27 次，但没有成功 - 通常 Heroku 不是那么顽固，但我已经尝试一遍又一遍地检查我的 server.js 文件尝试不同的技巧但没有我仍然处于第一阶段，我的客户很快就需要他们的项目......我已经向 Heroku 部署了 10 多个应用程序，但是从我的 a** 痛苦的意义上来说，这个应用程序是难以置信的.请提供任何建议 - 我相信问题出在 Heroku 或 Heroku 如何为我的应用程序提供服务。我在控制台中有多个错误，但我以前见过这些错误并且应用程序仍在运行。与我有关的是“清单：行：1，列：1，语法错误。”我在其中广泛搜索并发现没有任何帮助，因为我什至没有触及清单文件。

我试过的......

Heroku 不喜欢 socket.io，因此删除它 更改了服务器代码以服务于 react 构建文件夹 - res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html')); 尝试使用 - app.use(express.static(__dirname + "/client/build")) 进行静态部署 将端口从const PORT = process.env.PORT || 5000; 更改为const port = process.argv[2]; 更改了 heroku 中的 dyno 和 Web 进程 - 甚至将 dyno 升级到 25 美元的 dyno，因为之前的错误是超时错误，所以我想也许它会帮助它更快地加载 添加了“Procfile”，内容为web: node server.js heroku 日志 --tail 不显示任何错误

---

这是我的 server.js 代码...

const express = require("express");
const app = express();
const config = require("config");
// init middleware
const bodyParser = require('body-parser');
const cors = require("cors");
const mongoDB = require("./config/db.js");
const path = require("path");
const xss = require('xss-clean');
const helmet = require("helmet");
const mongoSanitize = require('express-mongo-sanitize');
const rateLimit = require("express-rate-limit");
const aws = require('aws-sdk');


aws.config.update(
    secretAccessKey: config.get("wasabiSecretAccessKey"),
    accessKeyId: config.get("wasabiAccessKey"),
    region: config.get("wasabiRegion")
);

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

mongoDB();

app.use('*', cors());
app.use(cors());


app.use(bodyParser.json(
    limit: "20mb"
));
app.use(bodyParser.urlencoded(
    limit: "20mb",
    extended: false
));


const limiter = rateLimit(
    max: 100,// max requests
    windowMs: 60 * 60 * 1000 * 1000, // remove the last 1000 for production
    message: 'Too many requests' // message to send
); 

app.use(xss());
app.use(helmet());
app.use(mongoSanitize());
app.use(limiter);

// routes go here...
app.use("/add/card/make/payment", require("./routes/payments/checkout.js"));
app.use("/register", require("./routes/auth/register/index.js"));
app.use("/sign-in", require("./routes/auth/signin/index.js"));
app.use("/upload/agreement/consent/rules", require("./routes/rules/signRulesSheet.js"));
app.use("/gather/existing/cards", require("./routes/payments/gather/gatherExistingCards.js"));
app.use("/change/primary/card", require("./routes/payments/change/makePrimary.js"));
app.use("/add/additional/card/payments", require("./routes/payments/add/addPaymentMethod.js"));
app.use("/post/blog/post", require("./routes/blogs/create/createBlogPost.js"));
app.use("/gather/all/blogs", require("./routes/blogs/gather/index.js"));
app.use("/contact/form/connect", require("./routes/contact/sendMessage.js"));
app.use("/gather/individual/blog", require("./routes/blogs/gather/gatherIndividualBlog.js"));
app.use("/update/time/schedule", require("./routes/tours/schedule/scheduleChange.js"));
app.use("/gather/times/per/date", require("./routes/tours/gather/gatherTimes.js"));
app.use("/send/request/tour", require("./routes/tours/email/sendTourRequest.js"));
app.use("/make/payment/existing", require("./routes/payments/existing/index.js"));

app.get('/', (req, res) => res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html')));

app.get('*', (req, res) => 
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
);
app.get('/*', (req, res) => 
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
);



app.use(function(req, res, next) 
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
);
app.use(express.static(__dirname + "/client/build"))

if (process.env.NODE_ENV === "production") 

    app.use(express.static(__dirname + "/client/build"));

    // Express serve up index.html file if it doesn't recognize route
    app.get('*', (req, res) => 
        res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
    );
    app.get('/*', (req, res) => 
        res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
    );
; 

app.listen(PORT, () => 
    console.log(`Server listening on port $PORT!`);
);

我的服务器 package.json 看起来是这样的......

  "name": "brandy-website",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "server": "node server.js",
    "dev": "concurrently \"npm run start\" \"cd client && npm start\"",
    "heroku-postbuild": "cd client && npm install && npm run build"
  ,
  "author": "",
  "license": "ISC",
  "dependencies": 
    "@sendgrid/mail": "^7.4.6",
    "aws-s3": "^2.0.5",
    "aws-sdk": "^2.968.0",
    "axios": "^0.21.1",
    "body-parser": "^1.19.0",
    "concurrently": "^6.2.1",
    "config": "^3.3.6",
    "cors": "^2.8.5",
    "crypto": "^1.0.1",
    "express": "^4.17.1",
    "express-mongo-sanitize": "^2.1.0",
    "express-rate-limit": "^5.3.0",
    "helmet": "^4.6.0",
    "http": "^0.0.1-security",
    "https": "^1.0.0",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "mongodb": "^3.6.3",
    "mongoose": "^5.13.7",
    "multer": "^1.4.3",
    "multer-s3": "^2.9.0",
    "nodemon": "^2.0.12",
    "path": "^0.12.7",
    "socket.io": "^4.1.3",
    "stripe": "^8.170.0",
    "xss-clean": "^0.1.1"
  

【问题讨论】：

如果您找到解决方案，请发布我太陷入同一个问题

查看下面的评论 - 我可以提供我用来创建成功构建的样板项目的 repo，然后只需将现有代码复制并合并到新项目中即可。我没有找到其他解决方案来解决我的具体问题，但通常白屏不是由“构建”脚本创建的 - 这通常是应用程序中的另一个错误，但对我来说，这是我之前提到的

【参考方案1】：

问题出在“react-scripts build”过程中，所以我使用 webpack 而不是“create-react-app”构建了自己的 react 样板应用程序，并且成功部署了它。我认为这是最新的反应构建脚本的错误。我调试了一切，对我有用的是自定义反应构建。服务器成功地为构建提供服务，但没有呈现根标记。如果需要，我将提供我用来制作自己的 React 应用程序的 GitHub 存储库 - 只需 pm 我或发表评论