在Heroku上部署Hello World react js应用

Question

我收到一个应用程序错误。这是错误：

VBoxManage guestcontrol

我遵循了有关如何执行此操作的youtube教程。我添加了具有以下内容的server.js：

2020-10-29T17:02:02.043156+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=helloworld-mastercard.herokuapp.com request_id=640ea1df-832d-41a2-ab8a-90ba603398e9 fwd="37.228.208.88" dyno= connect= service= status=503 bytes= protocol=https
2020-10-29T17:02:05.327275+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=helloworld-mastercard.herokuapp.com request_id=f1f3fe21-e1e5-4a39-9ee5-bf078ff39266 fwd="37.228.208.88" dyno= connect= service= status=503 bytes= protocol=https

我的package.json如下：

const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
 return res.send('pong');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);

我已经完成了npm run build并且很困惑我要去哪里

Answer 1

Heroku需要一个名为Procfile的文件才能进行构建和运行过程。

以您为例，在应用程序的主文件夹中创建一个名为 Procfile 的文件，然后添加以下内容：

web: node server.js

您可以了解有关Procfile的更多信息here

此外，要在Heroku上运行构建脚本，您需要将其添加到package.json文件的脚本部分，如下所示：

"scripts": {
  "start": "node server.js", // serves the application
  "heroku-postbuild": "webpack -p" // runs after installation
}

有关如何将Webpack应用程序部署到Heroku的详细信息，请参阅此link。

说明 Heroku自动安装我们所有的依赖项，并在为我们的应用程序提供服务之前执行构建后操作。在此生成后操作中，我们对js文件进行了生产捆绑，并允许Heroku通过运行start命令来启动应用程序。