Развертывание приложения Hello World react js на Heroku

#javascript #reactjs #express #heroku #package.json

#javascript #reactjs #экспресс #heroku #package.json

Вопрос:

Я получаю сообщение об ошибке приложения. Это ошибка:

 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 run и очень смущен, где я ошибаюсь

введите описание изображения здесь

Ответ №1:

Heroku требуется файловый вызов Procfile для выполнения процессов сборки и запуска.

В вашем случае создайте файл с именем точно Procfile в основной папке вашего приложения и добавьте содержимое ниже:

 web: node server.js
  

Подробнее о Procfile можно прочитать здесь

Кроме того, чтобы запустить скрипт сборки на Heroku, вам нужно добавить его в раздел скрипта файла package.json следующим образом:

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

Пожалуйста, обратитесь к этой ссылке для получения подробной информации о том, как развернуть приложения webpack на Heroku.

Объяснение
Heroku автоматически устанавливает все наши зависимости и выполняет операцию после сборки, прежде чем обслуживать наше приложение. В этой операции после сборки мы выполняем производственное объединение наших файлов js и разрешаем Heroku запускать приложение, выполнив команду start .

Комментарии:

1. должен ли я установить «пуск» в скриптах внутри package.json на что-то другое?

2. Это procfile.txt или procfile

3. Поскольку я внес изменения, и он все еще выдает мне ту же ошибку

4. Procfile всегда представляет собой простой текстовый файл с именем Procfile без расширения файла. Например, Procfile.txt недействителен. Файл Procfile должен находиться в корневом каталоге вашего приложения. Он не работает, если размещен где-либо еще.

5. Я провел исследование по этому вопросу и обнаружил, что скрипты в package.json должны включать код для heroku. Я соответствующим образом отредактировал свой ответ.