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