为啥 react+nodejs 应用程序部署到 heroku 显示应用程序错误？
Posted
技术标签:
【中文标题】为啥 react+nodejs 应用程序部署到 heroku 显示应用程序错误？【英文标题】：why is react+nodejs app deployment to heroku showing Application error?为什么 react+nodejs 应用程序部署到 heroku 显示应用程序错误？ 【发布时间】：2021-04-08 12:16:37 【问题描述】：我正在尝试将我的投资组合网站部署到 heroku but showing applicatio error
这是我的heroku日志：
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 12.x...
Downloading and installing node 12.20.0...
Using default npm version: 6.14.8
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules
> nodemon@2.0.6 postinstall /tmp/build_85c92c3d_/node_modules/nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
added 232 packages in 9.267s
-----> Build
Running heroku-postbuild
> my-profile@1.0.0 heroku-postbuild /tmp/build_85c92c3d_
> cd profile && npm install && npm run build
> core-js@2.6.12 postinstall /tmp/build_85c92c3d_/profile/node_modules/babel-runtime/node_modules/core-js
> node -e "tryrequire('./postinstall')catch(e)"
> core-js@3.8.0 postinstall /tmp/build_85c92c3d_/profile/node_modules/core-js
> node -e "tryrequire('./postinstall')catch(e)"
> core-js-pure@3.8.0 postinstall /tmp/build_85c92c3d_/profile/node_modules/core-js-pure
> node -e "tryrequire('./postinstall')catch(e)"
> ejs@2.7.4 postinstall /tmp/build_85c92c3d_/profile/node_modules/ejs
> node ./postinstall.js
> nodemon@2.0.6 postinstall /tmp/build_85c92c3d_/profile/node_modules/nodemon
> node bin/postinstall || exit 0
added 2198 packages from 953 contributors and audited 2202 packages in 60.162s
134 packages are looking for funding
run `npm fund` for details
found 8 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
> profile@0.1.0 build /tmp/build_85c92c3d_/profile
> react-scripts build
Creating an optimized production build...
Compiled with warnings.
src/pageComponent/Map.js
Line 60:10: 'popupInfo' is assigned a value but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
398.36 KB build/static/js/2.08586e80.chunk.js
5.39 KB build/static/js/main.a1597eb1.chunk.js
770 B build/static/js/runtime-main.2eab5cd0.js
509 B build/static/css/main.5ca926eb.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
-----> Caching build
- node_modules
-----> Pruning devDependencies
audited 232 packages in 2.028s
15 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 95.1M
-----> Launching...
Released v4
https://portfolio-rony.herokuapp.com/ deployed to Heroku
它是一个通过在客户端和服务器端做出反应的投资组合应用程序，我使用 nodemailer 进行邮件发送。在执行节点索引和 npm start 双方时，它在 localhost 中运行良好。然后我重新配置了部署。下面我展示了部署配置。这是我的服务器端：
myprofile/index.js：
const express = require("express");
const router = express.Router();
const http = require('http')
const cors = require("cors");
const nodemailer = require("nodemailer");
const app = express();
app.use(cors());
app.use(express.json());
app.use("/", router);
/* app.listen(5000, () => console.log("Server Running")); */
const whiteList = [
"http://localhost:3000",
"http://localhost:5000",
"https://portfolio-rony.herokuapp.com/",
];
const corsOption=
origin:function (origin,callback)
console.log("**Origin of request" +origin)
if(whiteList.indexOf(origin)===-1||!origin)
console.log("origin acceptable")
callback(null,true)
else
console.log("Origin rejected")
callback(new Error('not allowed by CORS'))
const contactEmail = nodemailer.createTransport(
service: "**",
auth:
user: "***",
pass: "**",
,
);
contactEmail.verify((error) =>
if (error)
console.log(error);
else
console.log("Ready to Send");
);
router.post("/contact", (req, res) =>
const name = req.body.name;
const email = req.body.email;
const message = req.body.message;
const mail =
from: name,
to: "**",
subject: "Contact Form Message",
html: `<p>Name: $name</p><p>Email: $email</p><p>Message: $message</p>`,
;
contactEmail.sendMail(mail, (error) =>
if (error)
res.json( result: "ERROR" );
else
res.json( result: "Message Sent" );
);
);
if (process.env.NODE_ENV==='production')
app.use(express.static(path.join(__dirname,'profile/build')))
app.get('/*',(req,res)=>
res.sendFile(path.join(__dirname,'profile/build/index.html','index.html'))
)
const PORT = process.env.PORT || 5000;
const server = http.createServer(app);
server.listen(PORT, () =>
console.log(`server started on port: $PORT`);
);
myprofile/package.json：
"scripts":
"start": "node index.js",
"heroku-postbuild":"cd profile && npm install && npm run build"
,
这是我的客户端：
myprofile/profile/package.json：
"proxy": "http://localhost:5000",
"scripts":
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
,
有一个 axios 部分，我从 axios .post("https://localhost:5000/contact", data) 变成了 axios .post("/contact", data)。
然后我已部署到 github 并从那里将其部署到 heroku。在 gitignore node_modules 中也提到了双方。
但在成功部署后，登陆页面仍然显示应用程序错误。
我该如何解决？请告诉我。
更新： 这是查看日志：
2021-01-01T20:09:26.763964+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=portfolio-rony.herokuapp.com request_id=f6540932-1f90-4a2e-a841-695cc2c7ca9c fwd="81.193.90.208" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:09:40.255285+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-rony.herokuapp.com request_id=a9e291e7-24e3-4259-8c56-778f2cca2e0e fwd="54.162.178.132" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:10:05.041138+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=HEAD path="/" host=portfolio-rony.herokuapp.com request_id=8d47400f-4d58-45df-a897-107f3bf1c0ee fwd="217.182.175.162" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:10:58.282388+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-rony.herokuapp.com request_id=128a5a0f-e331-45cb-ac7b-0fa96ec8fdb1 fwd="49.36.45.97" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:11:00.534560+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=portfolio-rony.herokuapp.com request_id=0f9959f2-b16a-45d1-95b2-4ea82e815080 fwd="49.36.45.97" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:11:29.573355+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-rony.herokuapp.com request_id=6b378c7e-86d3-4134-b0b3-d800b50e0dd7 fwd="34.201.67.118" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:16:08.302973+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-rony.herokuapp.com request_id=60a19d50-2735-4c36-8bb1-f0d432b7e3a9 fwd="2.49.4.168" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:16:13.658790+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=portfolio-rony.herokuapp.com request_id=c2dede38-1f95-4795-ab37-d0e15b180ccc fwd="2.49.4.168" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:46:07.132299+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-rony.herokuapp.com request_id=3065ce5f-2d5a-4df5-b16b-94871f574377 fwd="81.193.90.208" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:46:09.400243+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=portfolio-rony.herokuapp.com request_id=08cd3df3-cd33-4502-b03c-103996cfad3e fwd="81.193.90.208" dyno= connect= service= status=503 bytes= protocol=https
我不知道这意味着什么以及为什么我的应用程序崩溃了......
【问题讨论】：
点击主页时日志显示什么？ 好吧，我没有使用命令行进行部署。我使用了连接到 github 的部署应用程序并手动部署。当我在部署错误后检查活动时，出现 iamrony@gmail.com: Deployed f847cd90 Today at 7:46 PM · v4 · 比较差异，当我点击比较差异时，它把我带到了 github 拉取请求页面。这可以吗？还是我必须使用 heroku cli 命令行？ 请按照此处提到的步骤进行操作 -devcenter.heroku.com/articles/… 然后，在 heroku.com 上打开记录器后，再次访问您的主页，查看日志显示的内容 我去查看日志并在浏览打开的应用程序链接后显示：2021-01-01T20:09:26.763964+00:00 heroku[router]: at=error code=H10 desc= “应用程序崩溃”方法=GET path="/favicon.ico" host=portfolio-rony.herokuapp.com request_id=f6540932-1f90-4a2e-a841-695cc2c7ca9c fwd="81.193.90.208" dyno= connect= service= status= 503 bytes=protocol=https 我显示的是最新的。因为它们太大了 对不起，即使我在这种情况下也一无所知：/如果你找到它，请更新这个答案，因为我很想知道。祝你好运！ 【参考方案1】：这个问题解决了
我的个人资料/index.js：
const express = require("express");
const router = express.Router();
const path=require('path')
const nodemailer = require("nodemailer");
const app = express();
app.use(express.json());
app.use("/", router);
app.use(express.static(path.join(__dirname, "profile/build")));
**************email part config***********
app.get("*", (req, res) =>
res.sendFile(path.join(__dirname + "/profile/build/index.html"));
);
const port = process.env.PORT || 5000;
app.listen(port);
console.log(`Server running on $port`);
myprofile/package.json 依赖项：
"scripts":
"start": "node index.js",
"heroku-postbuild": "cd profile && npm install && npm run build"
,
"express": "^4.17.1",
"nodemailer": "^6.4.17"
在客户端，除了卸载一些不必要的依赖项之外，我无需进行任何更改。
它成功了。
但与此同时，我已经阻止了我的 smtp 电子邮件。它停止发送任何电子邮件，因此我的网站应用程序有一个非活动的联系我部分
谢谢大家
【讨论】：
以上是关于为啥 react+nodejs 应用程序部署到 heroku 显示应用程序错误？的主要内容，如果未能解决你的问题，请参考以下文章
如何将 React + NodeJS Express 应用程序部署到 AWS？
在heroku上部署Nodejs+Express+React+Webpack应用
使用 Amazon AWS 将 React、Node/Express 和 MySQL Web 应用程序部署到 Web 上