将 Hello World React js 应用程序部署到 Heroku

Question

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

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

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

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);

我的package.json如下：

{
  "name": "helloworld",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "express": "^4.17.1",
    "express-favicon": "^2.0.1",
    "path": "^0.12.7",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

我已经完成了 npm 运行 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 会自动安装我们所有的依赖项，并在为我们的应用程序提供服务之前继续执行 post-build 操作。在此 post-build 操作中，我们对 js 文件进行生产捆绑，并允许 Heroku 通过运行开始命令 kick-start 应用程序。

将 Hello World React js 应用程序部署到 Heroku

Deploying Hello World react js app on to Heroku

javascript

heroku

express

reactjs

package.json