Развертывание Angular 5 на Heroku не удается с ошибкой приложения H10

Я развертываю приложение Angular 5 на Heroku с помощью развертывания Github. Процесс сборки на Heroku завершается успешно. Вот журнал сборки:

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  9.0.0
       engines.npm (package.json):   5.7.1

       Resolving node version 9.0.0...
       Downloading and installing node 9.0.0...
       Bootstrapping npm 5.7.1 (replacing 5.5.1)...
       npm 5.7.1 installed
-----> Restoring cache
       Skipping cache restore (not-found)
-----> Building dependencies
       Installing node modules (package.json + package-lock)

       > [email protected] install /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/uws
       > node-gyp rebuild > build_log.txt 2>&1 || exit 0


       > [email protected] install /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass
       > node scripts/install.js

       Downloading binary from https://github.com/sass/node-sass/releases/download/v4.8.3/linux-x64-59_binding.node
       Download complete
       Binary saved to /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass/vendor/linux-x64-59/binding.node
       Caching binary to /tmp/npmcache.6p2xH/node-sass/4.8.3/linux-x64-59_binding.node

       > [email protected] postinstall /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
       > node lib/post_install.js


       > [email protected] postinstall /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass
       > node scripts/build.js

       Binary found at /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass/vendor/linux-x64-59/binding.node
       Testing binary
       Binary is fine

       > [email protected] postinstall /tmp/build_f955e847c7812f77225546f9f0519385
       > ng build --aot -prod

       Date: 2018-05-01T12:51:14.033Z
       Hash: bae98aa0ec3557461128
       Time: 54842ms
       chunk {0} polyfills.46af3f84a403e219371b.bundle.js (polyfills) 59.7 kB [initial] [rendered]
       chunk {1} main.2c0ad66a3c04faa09c51.bundle.js (main) 393 kB [initial] [rendered]
       chunk {2} styles.63956080a26a0ea45a51.bundle.css (styles) 48.1 kB [initial] [rendered]
       chunk {3} inline.63bc67a6d5411e8cbf28.bundle.js (inline) 1.45 kB [entry] [rendered]
       added 1502 packages from 1260 contributors in 105.406s
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       removed 1484 packages in 15.39s
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 36.7M
-----> Launching...
       Released v3

Мое приложение никогда не запускается из-за ошибки приложения. Приложение отлично работает локально при использовании npm start или heroku local web.

Вот версии, которые используются в приложении:

  • Угловой 5.2.10
  • ппм 5.7.1
  • узел 9.0.0

Я получаю следующую ошибку и не знаю, как ее исправить:

2018-05-01T12:52:03.421925+00:00 app[web.1]: npm ERR! Exit status 1 2018-05-01T12:52:03.422287+00:00 app[web.1]: npm ERR! 2018-05-01T12:52:03.422552+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script. 2018-05-01T12:52:03.422819+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 2018-05-01T12:52:03.431523+00:00 app[web.1]: 2018-05-01T12:52:03.431832+00:00 app[web.1]: npm ERR! A complete log of this run can be found in: 2018-05-01T12:52:03.432041+00:00 app[web.1]: npm ERR!
/app/.npm/_logs/2018-05-01T12_52_03_424Z-debug.log 2018-05-01T12:52:03.482946+00:00 heroku[web.1]: Process exited with status 1 2018-05-01T12:52:03.910224+00:00 heroku[router]: at=error code=H10 desc = "App crashed" method=GET path = "/" host=marcums-puck-games.herokuapp.com request_id=6e709bae-f4df-497f-89e9-ddd22b8f9230 fwd = "66.41.188.175" dyno= connect= service= status=503 bytes= protocol=https 2018-05-01T12:52:04.326950+00:00 heroku[router]: at=error code=H10 desc = "App crashed" method=GET path = "/favicon.ico" host=marcums-puck-games.herokuapp.com request_id=a45ab870-def7-422e-974a-1e25c16191bb fwd = "66.41.188.175" dyno= connect= service= status=503 bytes= protocol=https

файл server.js

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist'));

app.get('/*', function(req,res) {

res.sendFile(path.join(__dirname+'/dist/index.html'));
});

// Start the app by listening on the default Heroku port
const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.info('Express server listening on port', port)
});

файл package.json

{
  "name": "puckgames",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot -prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/flex-layout": "^5.0.0-beta.14",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.5",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19",
    "typescript": "~2.5.3"
  },
  "devDependencies": {
    "@angular/cli": "1.6.8",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  },
  "engines": {
    "node": "9.0.0",
    "npm": "5.7.1"
  }
}

Любая помощь будет оценена. Сообщите мне, если я не предоставил что-либо необходимое для отладки этого развертывания. Спасибо за ваше время.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
5 247
2

Ответы 2

попробуйте скопировать

"@ angular / cli": "1.6.8", "@ angular / compiler-cli": "^ 5.2.0", "машинописный текст": "~ 2.5.3"

от devdependencies к зависимостям

Heroku требует, чтобы у вашего приложения был бэкэнд. Для этого мы добавим в ваше приложение node и express. Я мог видеть, что большинство изменений уже присутствует в вашем package.json, но все же выполните следующие шаги и убедитесь, что вы выполнили все шаги, указанные ниже:

В вашем package.json, копия

"@angular/cli": "1.7.3"", "@angular/compiler-cli": "^5.2.0" 

с devDependencies на dependencies.

Создайте сценарий postinstall в package.json -

В "scripts" добавьте команду после установки:

"postinstall": "ng build --aot --prod"

Это говорит Heroku создать приложение с использованием Компилятор Ahead Of Time (AOT) и сделать его готовый к производству. Это создаст папку dist, из которой будут запускаться все версии нашего приложения, преобразованные в html и javascript.

Добавить двигатели node и npm -

Вам нужно будет добавить механизмы Node и NPM, которые Heroku будет использовать для запуска вашего приложения. Желательно, чтобы это была та же версия, что и на вашем компьютере. Итак, запустите node -v и npm -v, чтобы получить правильную версию, и включите ее в свой файл package.json следующим образом:

"engine": { "node": "8.9.4", "npm": "5.6.0" }

Скопируйте typescript в dependencies -

Скопируйте "typescript": "~2.5.3" из devDependencies в dependencies, чтобы также сообщить Heroku, какую версию машинописного текста использовать.

Установите Enhanced Resolve 3.3.0:

Выполните команду:

npm install [email protected] --save-dev

Установите сервер для запуска вашего приложения:

Локально мы запускаем ng serve из терминала, чтобы запустить наше приложение в локальном браузере. Но нам нужно будет настроить сервер Express, который будет запускать наше готовое к производству приложение (из созданной папки dist) только для обеспечения легкой и быстрой загрузки. Установите экспресс-сервер, запустив:

npm install express path --save

Создайте файл server.js в корне приложения и вставьте следующий код:

//Install express server    
const express = require('express');

const path = require('path');   

const app = express();   

// Serve only the static files form the dist directory    
app.use(express.static(__dirname + '/dist'));

app.get('/*', function(req,res) {  
    res.sendFile(path.join(__dirname+'/dist/index.html'));   
});  

// Start the app by listening on the default Heroku port    
app.listen(process.env.PORT || 8080);

Теперь запустите:

git push heroku your_remote_name

Heroku изучит ваш package.json и установит пакеты. Он запустит postinstall, а затем node server.js, чтобы развернуть ваше приложение. Вы можете проверить вкладку «Активность» и открыть журнал сборки, чтобы увидеть, как он на самом деле работает. Надеюсь, поможет!

пожалуйста, укажите автора при копировании пасты из блога medium.com/@hellotunmbi/…

Phil 27.01.2019 06:24

Это ng build --aot --prod, а не -prod

Robin Bruneel 27.12.2019 18:04

Другие вопросы по теме