Сбой Angular 5 Deploy to Heroku с ошибкой приложения H10 - PullRequest
0 голосов
/ 01 мая 2018

Я развертываю приложение 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)

       > uws@9.14.0 install /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/uws
       > node-gyp rebuild > build_log.txt 2>&1 || exit 0


       > node-sass@4.8.3 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

       > uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
       > node lib/post_install.js


       > node-sass@4.8.3 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

       > puckgames@0.0.0 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! Статус выхода 1 2018-05-01T12: 52: 03.422287 + 00:00 приложение [web.1]: npm ERR! 2018-05-01T12: 52: 03.422552 + 00:00 приложение [web.1]: npm ERR! Не удалось на puckgames@0.0.0 стартовый скрипт. 2018-05-01T12: 52: 03,422819 + 00: 00 приложение [web.1]: npm ERR! Это, вероятно, не проблема с npm. Есть скорее всего, дополнительные записи журнала выше. 2018-05-01T12: 52: 03.431523 + 00: 00 приложение [web.1]: 2018-05-01T12: 52: 03.431832 + 00: 00 app [web.1]: npm ERR! Полный журнал этого прогона можно найти в: 2018-05-01T12: 52: 03.432041 + 00: 00 приложение [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]: процесс завершен с статус 1 2018-05-01T12: 52: 03.910224 + 00:00 геройку [роутер]: at = ошибка code = H10 desc = "Приложение упало" method = GET path = "/" хозяйничать = marcums-puck-games.herokuapp.com request_id = 6e709bae-f4df-497f-89e9-ddd22b8f9230 fwd = "66.41.188.175" dyno = connect = service = status = 503 байта = протокол = https 2018-05-01T12: 52: 04.326950 + 00: 00 heroku [роутер]: at = код ошибки = H10 desc = "Сбой приложения" method = GET path = "/ favicon.ico" хозяйничать = marcums-puck-games.herokuapp.com request_id = a45ab870-def7-422e-974a-1e25c16191bb fwd = "66.41.188.175" dyno = connect = service = status = 503 байта = протокол = 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.log('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"
  }
}

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

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

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

В вашем пакете. Json , скопируйте

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

от devDependencies до dependencies.

Создать скрипт postinstall в package.json -

Под "scripts" добавить команду postinstall:

"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, какую версию машинописи использовать.

Install Enhanced Resolve 3.3.0 :

Запустите команду:

npm install enhanced-resolve@3.3.0 --save-dev

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

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

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, чтобы ускорить ваше приложение. Вы можете проверить вкладку «Активность» и открыть журнал сборки, чтобы увидеть, как он на самом деле работает. Надеюсь, это поможет!

0 голосов
/ 04 мая 2018

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

"@ angular / cli": "1.6.8", "@ angular / compiler-cli": "^ 5.2.0", "машинопись": "~ 2.5.3"

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...